10 کتابخانه برتر و رایگان انیمیشن برای وب

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

انیمیشن برای وب

1. GSAP

کتابخانه GSAP یکی از جالب ترین منابع رایگان برای توسعه دهندگان است.این برنامه کاملا بر روی جاوا اسکریپت اجرا می شود و این یکی از قویترین کتابخانه های انیمیشن است که می توانید آن را استفاده کنید.

بهترین عملکرد را میتوان در html5 و مرورگرهای جدید مشاهده کرد.بدون ذکر نماند که تیم به طور مداوم این کتابخانه را با ویژگی‌های جدید به‌روز می‌کند.GSAP می تواند با SVG ها،canvas elements یا حتی jQuery ها همراه با سایر کتابخانه های مرتبط مانند EaselJS کار کند.

اگر به یک کتابخانه انیمیشن قدرتمند وب نیاز دارید، مطمئنا به دنبال آن هستید. همچنین میتواند کارهای ساده‌ای را انجام دهد، اما تعداد زیادی از کتابخانه‌های کوچک وجود دارد که میتوانید آنها را امتحان کنید.

01-gsap-green-socks-animation

2. Anime.js

با Anime.js شما می توانید انیمیشن های زیبایی را با لوگو، دکمه ها، تصاویر، و … طراحی کنید.Anime.js از کلیه کاربردهای معمول مانند click / hovers / swipes پشتیبانی می‌کند و شما به یک دسته از انیمیشن های سفارشی دسترسی پیدا می‌کنید. اگر نگاهی به مستندات داشته باشید، می توانید یک دسته از نمونه هایی را که به درستی درون صفحه قرار گرفته اند، پیدا کنید.علاوه بر آن، مجموعه‌ای در CodePen وجود دارد که نمونه هایی از Anime.js برای مشاهده‌شان وجود دارد.

02-anime-js-logo

3. Wicked CSS

این یکی از جدیدترین کتابخانه‌هایی است که تمرکز کامل برروی کدهای CSS دارد. Wicked css روی بالاترین ویژگی‌های CSS3 کار می‌کند تا نتیجه بسیار زیبا و حیرت‌انگیزی ارائه دهد.

از صفحه اصلی شما مجموعه ای از نسخه‌ی نمایشی زنده را پیدا خواهید کرد که می توانید در مرورگر آن را امتحان کنید.اینها عبارتند از object rotations(چرخش اشیاء)، flips، slide-ins و بسیاری از افکت‎های انیمیشن مشابه.

برخی از این ها ممکن است به اندازه کافی ساده باشند که بتوانید آنها را خودتان بسازید.اما بقیه پیچیده‌تر هستند و این چیزی است که کار کردن با کتابخانه CSS Wicked را سرگرم کننده می سازد.

03-wicked-css3-library

4. Animate CSS

شاید Animate.css منبع صریحی برای انیمیشن وب باشد.این کتابخانه اوپن‌سورس چند سال پیش منتشر شد و هنوز هم بیشتر از همیشه مورد توجه قرارگرفته است.

توسعه دهنده Daniel Eden این پروژه را به عنوان یک روش ساده برای اضافه کردن انیمیشن های سفارشی CSS3 به یک صفحه وب ایجاد کرده است. در طول سالها آن را به یک کتابخانه متحرک کاملا قدرتمند با قدرت کافی برای اجرای هر پروژه بزرگ تبدیل کرده است.

صفحه اصلی بسیاری از نسخه های نمایشی را ارائه میدهد، بنابراین شما می توانید سبک های انیمیشنی را امتحان کنید و ببینید شما به چه چیزی  فکر می‌کنید.علاوه بر آن مجموعه‌ای از مستندات بزرگ در GitHub که شامل لیستی از کلاس ها و برخی از نمونه‌کدها میباشد وجود دارد.

04-animate-css

مطلب مرتبط:دوره آموزش کار با انیمیشن های وب در سی اس اس

5. Tuesday

یکی از چیزهایی که من از Tuesday دوست دارم، سادگی انیمیشن‌هایش است. با استفاده از این کتابخانه شما چگونگی ظاهر عناصر در صفحه را کنترل می‌کنید.

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

05-tuesday-css-animation

6. CSShake

من تا به‌حال کتابخانه CSS به سرگرم‌کنندگی یا عجیبی CSShake ندبدم. یک قسمت از آن دیوانه و یک بخش منحصر به فرد است بنابرابن احتمال اینکه برای هر وبسایت مناسب نباشد وجود دارد.

دلیل اینکه CSShake در لیست قرار گرفته این است که کتابخانه‌ای با این ویژگی‌ها به فکرم نمیرسد.با CSShake شما با فدرت میتوانید انیمیشن‌های شناور با افکت‌های متحرک از هر نوع استایلی در CSS ایجاد کنید.

06-csshake-shaking-animations

7. Mo.js

از بسیاری از کتابخانه‌های جاوا اسکریپت برای انیمیشن، باید گفت Mo.js یکی از بهترین هاست. این کتابخانه بسیار عظیم است و واقعا برای motion graphic بر روی انیمیشن UI / UX طراحی شده است.

اما شما می‌توانید از این برای هر چیزی استفاده کنید اگر یاد بگیرید که چگونه کار می کند.کدها برای دستکاری بسیار ساده هستند و یک دسته از آموزش هایی وجود دارد که می‌توانید آنها را دنبال کنید تا زندگی خود را ساده تر کنید.

آیا این کتابخانه انیمیشن کامل است؟ به سختی!

هرچند که این ویژگی‌های زیبای بسیاری را شامل میشود،و واقعا فرآیند هرچه انیمیشن را از قبیل navbar،logo و سایر اشیاء که شما انیمیشت‌سازی میکید ساده میکند.

07-mo-js-library

8. Animate Plus

برای یک کتابخانه انیمیشن بسیار سبک و آسان، از Animate Plus دیدن کنید.این درحالت minified تنها 2کیلوبایت حجم دارد و همه ویژگی‌های اساسی که می توانید با انیمیشن سفارشی جاوا اسکریپت را شامل میشود.

نصب آن با npm بسیار آسان است و شما می توانید آن را در تنظیمات کد GitHub تنظیم کنید.اکثر اینها تنها نسخه نمایشی اولیه(DEMO) هستند، بنابراین آنها چیز بسیار پیچیده نیستند.اما شما می توانید تمام گزینه ها و روش های فراخوانی را هم در GitHub پیدا کنید.

08-animate-plus-library

9. Bounce.js

با Bounce.js می‌توانید انیمیشن های قدرتمند CSS3 و JS را فقط با چند کلیک ایجاد کنید.

در صفحه اصلی، یک custom animation builder را پیدا خواهید کرد. به این ترتیب می توانید ویژگی های خاص انیمیشن را که می‌خواهید بر روی صفحه بدون اضافه کردن کد اضافی،اضافه کنید.

بزرگترین تفاوت با Bounce.js این است که آن فقط به عنوان یک کتابخانه کار نمی‌کند.اگر چه شما می توانید اطلاعات راه اندازی را در GitHub پیدا کنید، این فقط یک اسکریپت اساسی نیست.این در واقع با  web builder میاید، بنابراین Bounce.js یکی از چندین کتابخانه انیمیشن است که می توانید در مرورگر خود استایل‌دهی کنید.

09-bounce-js-script

10. Magic

انیمیشن های سرگرم کننده با یک تکه بازیگوشی بهترین توصیف کتابخانه Magic است.

این مجموعه کلا بر روی انیمیشن CSS3 تمرکز می‌کند و در عین حال شامل سبک‌های سفارشی است که در جای دیگری یافت نمی‌شود.این یک مجموعه بسیار بزرگ از کدهای CSS3 است و شما میتوانید یسیاری از ترفندها را از قبیل Rotations, perspective flips, fading effects, plenty پیدا کنید.

10-magic-css-animation-library

 

منبع: *

سهند کاظم‌زاده

سلام من سهند هستم یکی از نویسندگان کدفرند،به برنامه نویسی شدیدا علاقه دارم

همه مطالب این نویسنده

تاکنون هیچ نظری ثبت نشده است