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

ترجمه و تالیف : عرفان کاکایی
تاریخ انتشار : 13 خرداد 98
خواندن در 2 دقیقه
دسته بندی ها : جاوا اسکریپت

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

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

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

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

1. Three.js

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

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

2. Anime.js

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

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

3. Mo.js

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

این کتابخانه که ۱۴ هزار ستاره دارد، یک جعبه‌ابزار گرافیک‌های متحرک برای وب، با 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

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

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

6. Vivus

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

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

7. GreenSock JS

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

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

8. Scroll Reveal

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

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

9. Hover (CSS)

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

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

10. Kute.js

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

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

11. Typed.js

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

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

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

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

منبع

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر لازم است ابتدا وارد سایت شوید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید