انیمیشن یکی از گرایش‌هایی است که پنجه‌های خود را در زمینه رابط وب نگه داشته است. معروفیت آن نوسان دارد، اما همیشه به عنوان یک کامپوننت ضروری در هر وبسایتی در جایی حضور دارد. انیمیشن در هر ناحیه‌ای از طراحی، از اسپینرهای کوچک گرفته تا transitionهای کلی صفحه نقش دارد.
برای طراحانی که به دنبال ترکیب کردن انیمیشن هستند، گزینه‌های زیادی موجود است. از transitionهای دکوری که فقط رابط را زیباتر می‌کنند گرفته، تا افکت‌های معنادار که تجربه کاربری را ارتقا می‌دهند. مجموعه‌ای که ما آماده کرده‌ایم، ابزاری را پوشش می‌دهد که شما را قادر می‌سازد تا انیمیشن‌هایی را در مقیاس‌های متنوع و برای اهداف مختلف به کار بگیرید. در این مقاله ۲ قسمتی، ۷۵ پلاگین و کتابخانه را خواهید دید، که تمام نیازهای شما را پوشش می‌دهند. از تمام آن‌ها در زمان مشابه استفاده نخواهید کرد، اما هر کدام استفاده ایده‌آل خود را دارند.
با ما در بخش دوم همراه باشید:
41. Animatic.js
Animatic.js یک راه حل میان مرورگری با فیزیک‌های مجتمع است که تغییر شکل‌های CSS، تغییر شکل‌های سه بعدی و JavaScript را به کار می‌گیرد تا همه چیز را زنده جلوه دهد. کار اصلی آن این است که تلاش‌های مورد نیاز از سمت شما برای پویانمایی چندین آبجکت به صورت همزمان را کاهش دهد. با استفاده از این ابزار می‌توانید انیمیشن‌های موازی و متوالی‌ای را بسازید، در حالیکه مدت زمان، تاخیر و توابع easing را تنظیم می‌کنید.
42. Move.js
Move.js یک ابزار بسیار ساده برای ساخت انیمیشن‌های معمولی مانند scaling، skewing، حرکت دادن یا translating را بسازید. هر یک از انیمیشن‌ها می‌توانند با توابع easing کلاسیک ارتقا داده شوند.
43. Eg.js
Eg.js یک مجموعه به دقت جمع‌آوری شده از افکت‌ها و عناصر دینامیک است که هدفشان ارتقای تعامل در رابط است. ۸ کامپوننت قدرتمند وجود دارند که عملیات‌های پایه، ۶ متد اصلی و رویدادها را دسته‌بندی می‌کنند.
44. GFX
GFX یک کتابخانه انیمیشن سه بعدی قانع کننده برای ساخت انیمیشن‌های CSS 3 به روش برنامه‌نویسی است. این کتابخانه با jQuery کار می‌کند و ساخت نتایج مورد نظر را ساده‌تر می‌کند. در هنگام کار با این ابزار، می‌توانید با مواردی مانند scaling، چرخش، translating، skewing و برخی موارد دیگر بازی کنید.
45. Stylie
Stylie قطعا شما را با ظرفیت‌های خود شگفت‌زده خواهد کرد. مرکز کنترل آن ۴ تب را دارد که شما را قادر می‌سازند تا keyframeها، easing، گزینه‌های خروجی و HTML را تنظیم کنید، و در نتیجه انیمیشن‌های پیچیده را به راحتی بسازید.
46. Iconate.js
Iconate.js به تغییر شکل‌ها حیات می‌دهد، و transition میان دو آیتم را با افکت‌هایی دلنشین، پیشرفت می‌دهد. این ابزار نه تنها با Font Awesome، بلکه با Glyphicons و همچنین مجموعه شخصی خود شما هم به خوبی کار می‌کند.
47. AnimateMate
AnimateMate یک ابزار کوچک برای تولید و خروجی گرفتن انیمیشن‌هایی در مقیاس پایین از محیط Sketch خود است. این ابزار آنچنان فانتزی نیست، اما شما را قادر می‌سازد تا با keyframeها کار کنید، توابع easing اضافه کنید، sequenceها را کنترل کنید و...
48. CAAT
CAAT یک فریم‌وورک استرلینگ است که یک صف قدرتمند را با استفاده از JavaScript تشکیل می‌دهد. جعبه ابزار آن سکانس‌ها، فناوری‌های چند رندری، پکیج‌های استاندارد برای رفتار و... را شامل می‌شود.
49. Granim.js
Granim.js یک کتابخانه JavaScript کوچک، برای کار با رابط‌ها است. این کتابخانه می‌تواند یک انیمیشن افت حرارتی استاندارد، افت حرارت‌های دینامیک اعمال شده بر روی تصاویر، یا افت حرارت‌های در حال حرکت باشد.
50. Animista
Animista یک زمینه کار برای اجرای آزمایشات با استفاده از مجموعه‌ای از انیمیشن‌های بر پایه CSS مرسوم است. مدت زمان، تابع زمان‌بندی، تاخیر، تکرار و برخی گزینه‌های دیگر را تنظیم کنید تا خروجی نهایی را باب میل خود بسازید.
51. Obnoxious.css
Obnoxious.css پنج انیمیشن بر پایه CSS دارد که عناصر رابط را مجبور به لرزش، چرخش، بزرگ شدن و... می‌کنند. تنها کاری که باید انجام دهید، این است که کلاس مد نظر خود را به div مورد نظر اعمال کنید.
52. Animatelo
Animatelo تعداد زیادی افکت‌های دینامیک دارد که از Animate.css قدرتمند گرفته شده‌اند، و یک روش راحت‌تر برای اعمال آن‌ها فراهم کرده است. با تشکر از اِی‌پی‌آی Web Animations، این ابزار توسط تمام مرورگرهای مدرن پشیبانی می‌شود.
53. Foxholder
Foxholder پکیجی از ۱۵ افکت کوچک است که به خصوص برای ارتقای تعامل کاربر با فرم‌ها ساخته شده است. هر متد به روش خود فیلدهای ورودی را تحت فشار قرار می‌دهد.
54. Rhythm.js
Rythym.js تماما متشکل از انیمیشن‌های کوچک الهام گرفته شده از دیسکو است. این کتابخانه JavaScript افکت‌هایی را شامل می‌شود که نوعی حرکات رقص مانند را تقلید می‌کنند. تقریبا ۲۰ گزینه در این ابزار وجود دارند که وبسایت شما را زیباتر خواهند کرد.
55. Colorido.js
درست به مانند Granim.js، این پلاگین بر پایه JavaScript برای دستکاری رنگ به روشی درست ساخته شده است. این ابزار به شما کمک می‌کند تا به طور دینامیک، تن و کدورت پس‌زمینه و رنگ را تغییر دهید، و هم چنین برخی افت حرارت‌های شعاعی، خطی و افقی را به کار بگیرید.
56. Barba.js
Barba.js از PJAX استفاده می‌کند تا تغییر مکان دادن میان صفحات که معمولا سخت است را برای کاربر ساده کند. این ابزار فقط محفظه قدیمی را مخفی می‌کند و محفظه جدید را به روشی زیبا نمایش می‌دهد.
57. ScrollReveal.js
ScrollReveal.js یک ابزار معروف برای ساخت انیمیشن‌های اسکرول است. با استفاده از متد reveal() این ابزار، می‌توانید انیمیشن‌های مختلفی را مدیریت کنید و تمام ابعاد استاندارد آن‌ها را کنترل کنید. نکته مثبت درباره آن این است که هم با وب و هم با مرورگرهای موبایل به خوبی کار می‌کند.
58. Scrollanim
Scrollanim پیچیدگی کمتری دارد، اما همچنان نسبت به مثال قبلی ساده‌تر است. گرچه در اصل CSS 3 را مد نظر دارد، اما همچنان شما را قادر می‌سازد تا با استفاده از اِی‌پی‌آی JavaScript انیمیشن‌هایی بسازید که توسط اسکرول کردن فعال می‌شوند. این ابزار تعداد زیادی راه حل‌های از پیش ساخته شده دارد که می‌توانید سریعا به پروژه خوداعمال کنید.
59. ScrollTrigger
در حالیکه دو مثال قبلی به طور عمده بر روی اسکرول کردن عمودی تمرکز می‌کنند، این مورد برای ساخت وبسایت‌ها افقی است. این ابزار شما را قادر می‌سازد تا با استفاده از یک سینتکس ساده، رابط‌های دینامیکی بر روی محور x بسازید.
60. Force.js
Force.js یک راه حل کوچک است که از تعداد زیاد عملکردها و غنی بودن در تعداد گزینه‌ها، محروم مانده است. گرچه، این ابزار برای کارهای معمولی مثل تنظیم کردن آبجکت‌ها برای حرکت به صورت نرم یا زیباسازی اسکرول کردن مناسب است.
61. AOS
AOS مخفف Animate on Scroll (پویانمایی در هنگام اسکرول) است. این ابزار دقیقا کاری که می‌گوید را انجام می‌دهد. تعدادی افکت از پیش تعریف شده برای شما فراهم می‌کند که با استفاده از یک رویداد اسکرول فعال می‌شوند. اگر می‌خواهید بدون ورود عمیق به کد یک ورود دراماتیک به section مورد نظر بدهید، این ابزار برای شما عالی است.
62. Rellax
Rellax یک اختلاف منظر زیبا است. Rellax یک کتابخانه Vanilla JavaScript است که بعد سوم را برای رابط شما فراهم می‌کند.
63. Tilt.js
Tilt.js یک افکت چرخش جذاب بر پایه اختلاف منظر تولید می‌کند. این افکت، آبجکت‌ها را به یک موقعیت شیب‌دار منتقل می‌کند و یک افکت سه بعدی را در زمینه دو بعدی نمایش می‌دهد. شما می‌توانید محور آن را تنظیم کرده، و در نتیجه افکت خود را جذاب‌تر و جالب‌تر کرده، یا نوعی احساس تابش یا معلق را بازسازی کنید.
64. Transform-when
Transform-when یک راه حل عالی برای طراحی تجربه‌ای با یک کارایی بالا و پشتیبانی بومی برای دستگاه‌های موبایل است. این ابزار دو پارامتر حیاتی را به کار می‌گیرد: زمان و موقعیت اسکرول؛ و در نتیجه ماجراجویی کاربر را بر روی رابط از سمت شما کاملا تحت کنترل قرار می‌دهد. این ابزار هم با عناصر SVG و هم با عناصر HTML کار می‌کند.
65. CSS3 Animation
این مورد یک مولد قدیمی به همراه یک پیش‌نمایش زنده برای ساخت انیمیشن‌های CSS 3 پایه است. یک مرکز کنترل استاندارد در آن وجود دارد که در آن می‌توانید مدت زمان transition، تعداد دفعات تکرار، توابع زمان‌بندی و... را تنظیم کنید. مسیر آن ساده است: همه چیز را راه‌اندازی کنید، کد HTML و CSS نتیجه را کپی کرده و در پروژه خود paste کنید.
66. Curve.js
Curve.js زندگی را به خطوط هدیه می‌دهد و باعث می‌شوند که این متون برقصند و به مانند یک موج، بچرخند. از این ابزار برای ساخت پس‌زمینه‌های چکیده، ظریف و الهام گرفته شده از هندسه استفاده کنید.
67. Animator.js
طبق آمار موجود ، Animator.js منعطف، موثر و سبک است. این ابزار ساده‌ترین راه را برای مدیریت keyframeها فراهم می‌کند و انیمیشن‌های CSS را برای مقیاس‌های متنوعی فراهم می‌کند. همچنین این ابزار به هیچ‌گونه Dependency نیاز ندارد.
68. Cel-animation
Cel-animation یک مخلوط Sass است که به شما کنترل خوبی بر روی keyframeهای سنتی می‌دهد. شما می‌توانید با استفاده از آن، SVG یا هر نوعی از عناصر HTML را به حرکت در آورید.
69. Scrollissimo
Scrollissimo ساخته شده است تا به همراه Greenshock کار کند، و با مهارت و به صورت نرم، آبجکت‌ها را در هنگام اسکرول کردن کاربر پویانمایی کند. این ابزار با داشتن یک پلاگین JavaScript اضافی برای گجت‌های لمسی، دستگاه‌های زیادی را پوشش می‌دهد.
70. jqClouds
jqClouds یک پلاگین اولیه است که یک طراحی را تولید کرده، و با ابرهای متحرک پر می‌کند. شما می‌توانید طرح آن را تغییر داده، و ابرها را با هر آبجکت دیگری جایگزین کنید.
71. Color animation
همانطور که حدث زده‌اید، این ابزار برای پویانمایی تن و شفافیت پس‌زمینه، حاشیه یا متن است. در واقع این ابزار با رنگ هر آبجکتی که یک ویژگی را دارد، کار می‌کند.
72. Flubber
برای جلوگیری کردن از پرش‌ها و دگرگونی‌های شدید که می‌توانند در هنگام تبدیل شدن یک آبجکت به یک آبجکت دیگر بروز دهند، می‌توانید از Flubber استفاده کنید. تنها نکته منفی درباره آن این است که فقط با گرافیک‌های ۲ بعدی کار می‌کند.
73. Particles.js
اگر از انیمیشن‌های ذره‌ای خوشتان می‌آید، می‌توانید از این مولد پرکاربرد استفاده کنید. این ابزار بر پایه یک کتابخانه قابل اعتماد JavaScript ساخته شده است که تمام کارها را انجام می‌دهد. ترجیحات خود در زمینه‌هایی مانند رنگ، عدد، شکل، اندازه، کدورت و... را تنظیم کنید و نتیجه نهایی را خروجی بگیرید.
74. 3D Lines Animation with Three.js
این مورد یک اسکریپت کوچک است که تمام قابلیت‌های پلاگین‌های معرفی شده در بالا را پشتیبانی نمی‌کند. با این وجود، این ابزار یک پس‌زمینه به خوبی پویانمایی شده پر از انیمیشن‌های ذره‌ای را به رابط شما اضافه می‌کند. شما می‌توانید رنگ، خطوط، کدورت و برخی موارد دیگر را تنظیم کنید تا آن را با محیط خود وقف دهید.
75. Three.js
و حال آخرین مورد یعنی Three.js، یک کتابخانه قدرتمند و همه کاره است که پشت تعداد زیادی از وبسایت‌ها قرار دارد. این ابزار هم برای پروژه‌های ساده و هم برای پروژه‌های پیچیده مناسب است. Three.js شما را قادر می‌سازد تا با ، ، CSS3D و WebGL کار کنید و انیمیشن‌های سه بعدی دیدنی و جذاب خود را بسازید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید