۵ تا از بهترین کتابخانه های انیمیشن جاوا اسکریپت

نویسنده پوریا ستایش پوریا ستایش
1399/05/14
0
122
زمان مطالعه 5 دقیقه
۵ تا از بهترین کتابخانه های انیمیشن جاوا اسکریپت

برای تعامل بیشتر با مخاطبان سایتمان نیاز داریم توجه آنان را جلب کنیم. گاهی به‌وسیله یک عکس، گاهی با یک رنگ خاص و گاهی هم با انیمیشنی کردن المان‌های صفحه. شما برای انیمیشنی کردن المان‌ها چه ایده‌ای دارید؟ در مقاله‌ای به بررسی کتابخانه‌هایی که با CSS نوشته شدند پرداختیم. اما در این مقاله قصد داریم ۵ کتابخانه جاوا اسکریپت انیمیشن معرفی کنیم که رایگان هم هستند.

طراحی وب سمت کاربر در دهه گذشته با انقلابی بزرگ مواجه شده است. حدوداً ۱۰ الی ۱۵ سال پیش، بیشتر ما صفحات ثابتی که تحرکی نداشتند، طراحی می‌کردیم. روز به‌روز توجه انسان‌ها کم می‌شود و این وظیفه طراحان رابط کاربری است که توجه آنان را جلب کنند.

آیا می‌دانید انیماتور کیست؟ سازنده انیمیشن را انیماتور می‌گویند. انیماتور به طرح‌ها و مدل‌های روی صفحه روح می‌بخشد. طراحان رابط کاربری نیز باید انیماتور باشند تا بتوانند به المان‌های صفحه روح ببخشند. اما یادگیری و ساخت انیمیشن‌ها در زمان کوتاه کار سختی است. بهترین کار استفاده از یک کتابخانه خوب است. در ادامه لیست ۵ تا از بهترین کتابخانه‌های انیمیشن جاوا اسکریپت را می‌بینید:

  • Bounce.js
  • AnimeJS
  • GreenSock (GSAP)
  • ZDog
  • AniJS

توجه داشته باشید که ما از منظر یک طراح رابط کاربری به کتاب‌خانه‌ها نگاه خواهیم کرد نه از زاویه دید یک توسعه دهنده یا «Developer».

کتابخانه Bounce.js

‌bounce.js یک کتابخانه انیمیشن جاوا اسکریپتی است که تمرکز آن فراهم کردن مجموعه‌ای از انیمیشن‌های بامزه و اصطلاحا فَنَری برای وب‌سایت شماست.

  • خالق: Tictail
  • منتشرشده در: سال ۲۰۱۴
  • آخرین ورژن: ۰.۸.۲
  • محبوبیت: ۵۹۷۵ ستاره در گیتهاب
  • حجم کتابخانه: ۱۶ کیلوبایت

Bounce.js یک کتابخانه انیمیشن شسته رُفته است. دَه انیمیشن از قبل تنظیم شده دارد به همین دلیل حجم این کتابخانه بسیار کم است. انیمیشن‌ها در این کتابخانه به شکل صحیح و بی‌عیب و نقص کار می‌کنند. اگر سلیقه و نیاز شما انیمیشن سبک «پراندن یا جوشیدن» است، بهترین کار استفاده از این انیمیشن است. هم حجم کمی دارد، هم نیازهای شما را پوشش می‌دهد.

کتابخانه AnimeJS

AnimeJS جدیدترین موردی است که به لیست ما اضافه شده است. به شکل شگفت‌آوری همه‌کاره و قدرتمند است. تنها سؤالی که پیش می‌آید این است که «آیا بیش از حد برای برنامه‌های وب ساده است؟».

بله، شاید. اما همان‌طور که یادگیری آن نیز سریع است، حجم آن کم است، اما یافتن مشکلی در آن بسیار سخت است. کتابخانه AnimeJS به‌عنوان یک کتابخانه انیمیشن سبک جاوا اسکریپت با مستندات ساده و در عین حال قدرتمند معرفی می‌کنیم. با ویژگی‌های CSS ، تگ‌های SVG ، ویژگی‌های DOM و اشیاء JavaScript به راحتی کار می‌کند.

  • خالق: Julian Garnier
  • منتشرشده در: سال ۲۰۱۶
  • آخرین ورژن: ۳.۱.۰
  • محبوبیت: ۳۲۶۰۵ ستاره در گیتهاب
  • حجم کتابخانه: ۱۶.۸ کیلوبایت

از همه دلایل بهتر، Anime.JS «مستندات» خیره کننده‌ای دارد. نمونه‌های آن با نوشتن کد HTML به همراه کد JavaScript در یک محیط زیبا نشان داده می‌شود. به‌طور خلاص ، اگر با استفاده از  انیمیشن‌ها در جاوا اسکریپت مشکلی ندارید، استفاده نکردن از Anime.Js منطقی نیست!

کتابخانه GreenSock

GreenSock یا «GSAP - GreenSock Animation Platform» برای ایجاد انیمیشن‌های تر و تمیز و گاهی پیشرفته، مناسب است. GSAP دارای ویژگی‌ها و پلاگین‌های خیره کننده است. به‌عنوان مثال می‌توانید، شکل‌های SVG، رسم انیمیشن نوار قلبی با SVG ، قابلیت اسکرولی و موارد دیگر را به راحتی ایجاد کنید. GSAP سریع است، با انواع مرورگر سازگار است همچنین سینتکس آن ساده است.

  • آخرین ورژن: ۲.۱.۳
  • محبوبیت: ۹۷۰۹ ستاره در گیتهاب
  • حجم کتابخانه: ۳۱۳ کیلوبایت

یک مثال از رسم انیمیشنی شبیه به نوار قلبی به وسیله GSAP ببینیم:

 

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

اگر به دنبال مستند سازی دقیق هستید، اگر جامعه پشتیبانی برای شما اهمیت دارد، اگر به دنبال کتابخانه قدرتمند هستید، من واقعا توصیه می‌کنم در پروژه بعدی خودتان از این کتابخانه انیمیشن استفاده کنید. مطمئنم پشیمان نمی‌شوید.

کتابخانه Zdog

Zdog یک کتابخانه جاوا اسکریپت برای ایجاد طرح‌ها و انیمیشن‌های سه بعدی است. به کمک آن می‌توانید طرح‌های خود را با استفاده از عنصر canvasیا SVG ترسیم کنید و آن‌ها را انیمیشنی کنید. قبلا در مقاله ای با عنوان «آموزش جامع کتابخانه Zdog» به بررسی این کتابخانه پرداختیم.

  • آخرین ورژن: ۱.۱.۰
  • محبوبیت: ۶۹۴۰ ستاره در گیتهاب
  • حجم کتابخانه: ۲۸ کیلوبایت

اگر با JavaScript آشنا باشید، اصول اولیه Zdog را خیلی سریع یاد می‌گیرید. مستندسازی دقیقی داد و نمونه های زیادی از آن در سایت های مختلف مثل Codepen منتشر شده است.

کتابخانه AniJS

کتابخانه نهایی که مورد بحث قرار دادیم برای روند پیاده سازی منحصر به فرد خودش بسیار جالب است. AniJS یک کتابخانه انیمیشن است که روند پیاده سازی آن با بقیه تفاوت دارد. حتما با data attribute یا ویژگی data در HTML آشنا هستید. به وسیله مقداری که برای data-anijs می‌نویسیم، می‌توانیم رویداد اجرا، نوع انیمیشن و المانی که انیمیشن روی آن اجرا می‌شود را تنظیم کنیم. بگذارید با یک مثال عمکرد را شرح دهیم.

در این مثال می‌خواهیم بگوییم : «اگر کاربر کلیک کرد،، انیمیشن flipInY را روی عنصری با کلاس container-box اعمال کن» به شکل زیر عمل می‌کنیم:

<div data-anijs="if: click, do: flipInY, to: .container-box"></div>
  • خالق: Dariel Noel
  • منتشرشده در: سال ۲۰۱۴
  • آخرین ورژن: ۰.۹.۳
  • محبوبیت: ۳۵۲۴ ستاره در گیتهاب
  • حجم کتابخانه: ۱۰.۵ کیلوبایت

AniJS کتابخانه‌ای است که اندازه بسیار مناسبی دارد. نحوه تنظیم آن نسبت به سایر کتابخانه‌های انیمیشن کاملاً متفاوت است. به نظر من این کتابخانه ارزش دارد حداقل یک بار برای پروژه‌های شما امتحان شود.

کدام کتابخانه را انتخاب کنیم؟

بسیاری از کتابخانه‌های انیمیشن منتظر هستند تا شما پروژه بعدی خودتان را با آن‌ها انجام دهید. موارد ذکر شده در بالا چند مورد از بهترین ها هستند. اگر به دنبال گزینه ای و کامل قدرتمند هستید، GreenSock یا AnimeJS را انتخاب کنید. فقط توجه داشته باشید که استفاده از یک کتابخانه انیمیشن در صفحه وب شما می‌تواند تعامل با کاربران را بهبود بخشد، در طرف مقابل زیاده روی در استفاده از آن، کار را خراب تر می‌کند و باعث گیجی کاربران می‌شود.