‏Anime.js: موتور انیمیشن همه‌کاره جاوااسکریپت

Anime.js یه کتابخونه‌ی انیمیشن جاوااسکریپته که هدفش اینه که تمام محدودیت‌های مرورگر رو کنار بذاره و یه API واحد و یکپارچه برای انیمیت کردن هر چیزی روی وب بده. چه بخوای المان‌های HTML رو جابه‌جا کنی، چه شکل‌های SVG رو morph کنی، چه انیمیشن رو با اسکرول صفحه سینک کنی — همه‌ی اینا با Anime.js شدنیه.

یکی از قابلیت‌های جالبش اینه که می‌تونی تک‌تک property های CSS transform رو مستقل از هم انیمیت کنی و با Composition API اون‌ها رو باهم ترکیب کنی. مثلاً می‌تونی همزمان چرخش و جابه‌جایی یه المان رو با هم blend کنی بدون اینکه یکی دیگری رو خراب کنه.

برای کارهای SVG هم ابزارهای خوبی داره: می‌تونی خطوط رو draw کنی، شکل‌ها رو به هم morph کنی، و المان‌ها رو روی یه motion path حرکت بدی. مثلاً این کد یه ماشین رو روی یه مسیر مشخص حرکت می‌ده:

animate('.car', {
  ...createMotionPath('.circuit'),
});

و برای رسم خطوط SVG:

animate(createDrawable('.circuit'), {
  draw: '0 1',
});

قابلیت Scroll Observer هم می‌ذاره انیمیشن‌ها رو به اسکرول صفحه وصل کنی. می‌تونی تعیین کنی انیمیشن دقیقاً کِی شروع بشه، چقدر سریع پیش بره، و چه callback هایی داشته باشه. این ترکیب با stagger هم می‌شه جلوه‌های خیلی شیکی ساخت:

animate(createDrawable('path'), {
  draw: ['0 0', '0 1', '1 1'],
  delay: stagger(40),
  ease: 'inOut(3)',
  autoplay: onScroll({ sync: true }),
});

Draggable API هم یه بخش کامل و مستقله که می‌ذاره المان‌های HTML رو قابل drag کنی، با snap و flick و throw. می‌تونی بهشون فنر هم اضافه کنی تا وقتی رهاشون می‌کنی، با یه جهش طبیعی برگردن:

createDraggable('.circle', {
  releaseEase: createSpring({
    stiffness: 120,
    damping: 6,
  })
});

Scope API هم برای انیمیشن‌های ریسپانسیو طراحی شده. می‌تونی media query تعریف کنی و بر اساس portrait یا landscape بودن صفحه، رفتار انیمیشن رو عوض کنی — بدون اینکه کد تکراری بنویسی.

از نظر حجم هم Anime.js خیلی سبکه. کل باندل حدود ۲۴.۵ کیلوبایته ولی چون ماژولاره، می‌تونی فقط همون بخشی که نیاز داری رو import کنی. مثلاً Timer به تنهایی ۵.۶ کیلوبایته و Animation فقط ۵.۲ کیلوبایت اضافه می‌کنه.

در کل Anime.js یه انتخاب جدیه برای هر توسعه‌دهنده‌ی فرانت‌اندی که می‌خواد انیمیشن‌های پیچیده رو با کدی تمیز و خوانا پیاده کنه، بدون اینکه به چند کتابخونه‌ی مختلف وابسته باشه.

نکات کلیدی:

• کتابخونه‌ی جاوااسکریپت برای انیمیشن‌های وب با یک API یکپارچه
• پشتیبانی از CSS transforms، SVG، اسکرول، و draggable
• Timeline API قدرتمند برای هماهنگ کردن چندین انیمیشن
• Stagger utility برای ساخت جلوه‌های دومینویی و گروهی
• Scope API برای انیمیشن‌های ریسپانسیو بر اساس media query
• معماری ماژولار با حجم کل حدود ۲۴.۵ کیلوبایت
• کاملاً رایگان و متن‌باز