11 کتابخانه انیمیشن JavaScript

گردآوری و تالیف : عرفان کاکایی
تاریخ انتشار : 27 مرداد 1397
دسته بندی ها : جاوا اسکریپت

وقتی که به دنبال کتابخانه‌های انیمیشن خوب برای JavaScript می‌گشتم، پی بردم که برخی از بهترین‌های آن‌ها دیگر پشتیبانی نمی‌شوند. پس از کمی تحقیق، ۱۱ مورد از بهترین‌های آن‌ها را برای استفاده در برنامه‌ها یافته، و در اینجا لیست کرده‌ام. همچنین، در آخر نیز چند کتابخانه که دیگر پشتیبانی نمی‌شوند، اما پرکاربرد هستند را خواهید یافت.

استفاده از CSS خالص

قبل از این که به کتابخانه‌ها وارد شویم، استفاده از CSS خالص را فراموش نکنید. اما چرا؟ زیرا این یک روش استاندارد است و می‌تواند کارای GPU را افزایش دهد، سازگاری backward و forward را به همراه دارد، و احتمالا موثر‌ترین روش برای ساخت انیمیشن‌های است. در لینک زیر می‌توانید یک مورد را مشاهده کنید:

https://codepen.io/jcoulterdesign/pen/BrdPaw

1. Three.js

این کتابخانه یک روش عالی برای ساخت انیمیشن‌های سه بعدی بر روی مرورگر است، که دارای ۴۳ هزار ستاره بوده، و از WebGL به روشی خلاقانه استفاده می‌کند. این کتابخانه با داشتن <canvas>، <svg>، CSS3D و رندرهای WebGL، ما را قادر می‌سازد تا تجربیات تعاملی خوبی در دستگاه‌ها و مرورگرها ایجاد کنیم. Three.js در سال 2010 معرفی شد و حالا توسط 1000 شرکت کننده توسعه داده می‌شود.

2. Anime.js

Anime با داشتن بیش از ۲۰ هزار ستاره، یک کتابخانه انیمیشن JavaScript است که با ویژگی‌های CSS، تغییر شکل جداگانه CSS، SVG یا هر صفت DOM و آبجکت‌های JavaScript کار می‌کند. این کتابخانه شما را قادر می‌سازد تا چندین ویژگی انیمیشن مختلف را به هم زنجیر کنید، چندین اتفاق را با یکدیگر همگام‌سازی کنید، timeline ایجاد کنید و...

3. Mo.js

این کتابخانه که ۱۴ هزار ستاره دارد، یک جعبه‌ابزار گرافیک‌های متحرک برای وب، با APIهای ساده، مطابقت بین دستگاه‌های مختلف و بیش از ۱۵۰۰ Unit-test است. می‌توانید با حرکت دادن اشیاء در DOME یا SVG DOME، آبجکت‌های mo.js را بسازید.

4. Velocity

Velocity با داشتن ۱۵ هزار ستاره، یک موتور انیمیشن JavaScript سریع با API مشابه به @.animate() در jQuery است. این کتابخانه امکاناتی مانند انیمیشن‌های رنگی، تغییر شکل، حلقه، پشتیبانی SVG، اسکرول کردن و... را به همراه دارد.

لینک آزمایش کتابخانه در codepen.io:

https://codepen.io/hone/pen/azRzbe

5. Popmotion

این کتابخانه انیمیشن‌های واکنشپذیر که دارای ۱۴ هزار ستاره است، تنها ۱۱ کیلوبایت حجم دارد. Popmotion توسعه‌دهندگان را قادر می‌سازد تا انیمیشن‌ها و تعاملاتی بر پایه actionها، (جریانات مقادیر که می‌توانند که شروع شده، و یا متوقف شوند) بسازند. همچنین می‌توانید از CSS، SVG، React، Three.js و API آن که اعداد را به عنوان ورودی خود دریافت می‌کند، استفاده کنید.

6. Vivus

Vivus با داشتن بیش از ۱۰ هزار ستاره، یک کلاس JavaScript بدون هیچ‌گونه Dependency است که شما را قادر می‌سازد تا SVGها را پویانمایی کنید. می‌توانید از انیمیشن‌های موجود استفاده کنید، یا اسکریپت سفارشی خود را برای کشیدن SVGها بسازید.

7. GreenSock JS

GSAP یک کتابخانه JavaScript برای ساخت انیمیشن‌هایی با کارایی بالا و بدون نیاز به Dependency است، که به نظر می‌رسد توسط ۴ میلیون وبسایت استفاده می‌شود. GSAP منعطف بوده، و با React، Vue، Angular و vanilla JS کار می‌کند.

8. Scroll Reveal

این کتابخانه که دارای ۱۵ هزار ستاره بوده، و به هیچ‌گونه Dependency نیاز ندارد، شما را قادر به ساخت انیمیشن‌هایی با قابلیت اسکرول برای مرورگرهای وب و موبایل می‌کند. Scroll Reveal از چندین نوع افکت پشتیبانی می‌کند، و حتی شما را قادر می‌سازد تا انیمیشن‌های خود را تعریف کنید.

9. Hover (CSS)

حال، این مورد یک کتابخانه CSS است. Hover با داشتن ۲۰ هزار ستاره، مجموعه‌ای از افکت‌های بر پایه CSS3 را فراهم کرده است، که می‌توانند به لینک‌ها، دکمه‌ها، لوگوها، SVG، تصاویر و... که در CSS، Sass و LESS وجود دارند، اعمال شوند. می‌توانید افکت مورد نظر را در stylesheet خود کپی و پیست کرده، یا یک reference به آن‌ها ایجاد کنید.

10. Kute.js

یک موتور JavaScript کاملا تکامل یافته، با امکانات مورد نیاز برای انیمیشن‌های مرورگر. این کتابخانه بر روی کیفیت، انعطاف، کارایی و حجم تمرکز دارد.

11. Typed.js

این کتابخانه با داشتن ۶ هزار ستاره، اساسا شما را قادر می‌سازد تا انیمیشن‌های تایپی برای رشته‌ها، در سرعت تعیین شده بسازید. همچنین می‌توانید یک تگ div بر روی صفحه خود قرار دهید. این کتابخانه هم معروف، و هم پرکاربرد است.

موارد دیگری که بهتر است بشناسید:

دقت کنید که این ۸ کتابخانه، اکثرا دیگر پشتیبانی نمی‌شوند؛ پس با دقت از آن‌ها استفاده کنید.

منبع

مقالات پیشنهادی

15 کتابخانه جالب javascript و css دی ۹۵

ماموریت ما در راکت این است که شما را بر اساس تکنولوژی روز طراحی وب به روز نگه داریم . به همین خاطر هم هست که ما تقریبا ماهانه یا چند هفته در میان پستی...

15 کتابخانه جالب javascript و css

ماموریت ما در راکت این است که شما را بر اساس تکنولوژی روز طراحی وب به روز نگه داریم . به همین خاطر هم هست که ما تقریبا ماهانه یا چند هفته در میان پستی...

10 کتابخانه جذاب برای CSS و JavaScript در تیر ۱۳۹۶

در این مطلب کتابخانه جذاب برای CSS و JavaScript در تیر ۱۳۹۶ رو مشاهده میکنید که با استفاده از اون ها میتونید کارهای مختلفی با css و js انجام بدید که ک...

15 کتابخانه جالب JavaScript و CSS

باز هم با مجموعه‌ای از منابع منتخب در خدمت شما هستیم، که ارزش توجه شما را دارند. در این مقاله، با ۱۵ کتابخانه JavaScript و CSS آشنا خواهید شد