آموزش جامع Anime.js

📦معرفی و ساختار پایه

Anime.js یک کتابخانه انیمیشن JavaScript سبک (~۱۷KB) است که توسط Julian Garnier ساخته شده. از CSS properties، SVG، DOM attributes و Object های جاوااسکریپت پشتیبانی می‌کند و API ساده‌ای برای Timeline و Stagger دارد.

نصب

/* روش ۱: فایل لوکال */
<script src="anime.min.js"></script>

/* روش ۲: CDN */
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.2/lib/anime.min.js"></script>

/* روش ۳: NPM */
// npm install animejs
import anime from 'animejs';

ساختار اصلی

هر انیمیشن یک شیء JavaScript است که به تابع anime() پاس می‌شود:

anime({
  targets: '.box',       // المان هدف — CSS selector / DOM node / آرایه
  translateX: 250,        // property که انیمیت می‌شود
  duration: 800,          // مدت (میلی‌ثانیه) — پیش‌فرض: 1000
  delay: 200,             // تأخیر قبل از شروع
  easing: 'easeOutQuad',  // نوع easing
  loop: true,             // تکرار (عدد یا true برای بی‌نهایت)
  direction: 'alternate', // 'normal' | 'reverse' | 'alternate'
  autoplay: true,         // شروع خودکار — پیش‌فرض: true
  round: 1,               // گرد کردن مقادیر عددی
});

انواع Targets

// CSS Selector
targets: '.my-class'
targets: '#my-id'
targets: 'div, span'

// DOM Node
targets: document.querySelector('.box')

// NodeList
targets: document.querySelectorAll('.item')

// آرایه
targets: [el1, el2, el3]

// Object (برای انیمیت عدد — مثلاً counter)
targets: { value: 0 }

🎨Properties و Values

Anime.js می‌تواند انواع مختلف CSS properties، transform ها و حتی object ها را انیمیت کند.

CSS Transforms

anime({
  targets: '.box',
  translateX: 200,          // px پیش‌فرض
  translateY: '2rem',       // با واحد
  rotate: '1turn',          // یک دور کامل (360deg)
  rotate: 45,               // درجه
  scale: 1.5,               // مقیاس
  scaleX: 2,               // مقیاس افقی
  skewX: 15,               // کج‌شدگی
  perspective: 100,        // برای 3D
  rotateY: 180,            // چرخش 3D
});

CSS Properties

anime({
  targets: '.box',
  width: '200px',
  height: '200px',
  backgroundColor: '#ff6b6b',  // camelCase
  color: 'rgb(255,255,255)',
  opacity: 0.5,
  borderRadius: '50%',
  fontSize: '2em',
  left: '50%',
});

انواع مقادیر

// ۱. مقدار ساده — از حالت فعلی تا هدف
translateX: 300

// ۲. از/تا [from, to]
translateY: [-50, 0]
opacity:    [0, 1]

// ۳. Keyframes داخل property
translateX: [
  { value: 100, duration: 400 },
  { value: 200, duration: 800, easing: 'easeOutBounce' }
]

// ۴. Function-based — برای هر المان جداگانه
translateX: (el, i, total) => i * 50    // el=المان، i=index، total=تعداد کل
delay:      (el, i) => i * 100

// ۵. رنگ‌ها (hex / rgb / hsl)
backgroundColor: '#3498db'
color: 'hsl(200, 70%, 50%)'

📈توابع Easing

Easing تعیین می‌کند انیمیشن چطور شتاب می‌گیرد و کند می‌شود. Anime.js بیش از ۴۰ تابع easing آماده دارد، به علاوه spring فیزیکی.

دسته‌بندی Easing‌ها

پارامترهای Spring

// spring(mass, stiffness, damping, velocity)
easing: 'spring(1, 80, 10, 0)'
//             ↑     ↑     ↑      ↑
//           جرم سختی  میرایی سرعت اولیه

// مثال‌ها:
'spring(1, 100, 10, 0)'   // سفت‌تر
'spring(2, 80, 5, 0)'     // جرم بیشتر، ارتجاع بیشتر
'spring(1, 80, 20, 0)'    // میرایی بیشتر، کمتر لرزش

// steps — مناسب Sprite Animation
easing: 'steps(8)'  // ۸ مرحله پلکانی

📋Timeline

با anime.timeline() می‌توانید چند انیمیشن را به‌صورت زنجیره‌ای یا با overlap اجرا کنید. هر .add() یک انیمیشن به timeline اضافه می‌کند.

ساختار Timeline

const tl = anime.timeline({
  easing: 'easeOutExpo',   // easing پیش‌فرض برای همه
  duration: 600,          // duration پیش‌فرض
  loop: false,
});

tl
  .add({ targets: '#box1', translateX: 200 })
  .add({ targets: '#box2', translateX: 200 })            // بعد از تمام شدن قبلی
  .add({ targets: '#box3', translateX: 200 }, '-=400')  // ۴۰۰ms قبل از پایان قبلی (Overlap)
  .add({ targets: '#box4', translateX: 200 }, '+=200')  // ۲۰۰ms بعد از پایان قبلی (Gap)
  .add({ targets: '#box5', translateX: 200 }, 1500);      // در ms 1500 از شروع timeline

مدیریت Timeline

const tl = anime.timeline({ autoplay: false });
tl.add({ ... });

tl.play();     // شروع
tl.pause();    // توقف
tl.restart(); // از ابتدا
tl.reverse(); // معکوس
tl.seek(500); // رفتن به ms 500

// آگاهی از پیشرفت
tl.update = anim => {
  console.log(anim.progress + '%');
};

🌊Stagger

با anime.stagger() می‌توانید یک تأخیر پلکانی به گروهی از المان‌ها اعمال کنید تا ورود cascade-وار داشته باشند.

انواع Stagger

// ۱. خطی ساده — هر المان n میلی‌ثانیه بعد از قبلی
delay: anime.stagger(100)

// ۲. با شروع از یک index خاص
delay: anime.stagger(100, { start: 500 })   // اولی ۵۰۰ms تأخیر
delay: anime.stagger(100, { from: 'last' })  // از آخر به اول
delay: anime.stagger(100, { from: 'center'}) // از وسط به دو طرف
delay: anime.stagger(100, { from: 3 })      // از index 3

// ۳. range — تأخیر تصادفی بین min و max
delay: anime.stagger([100, 500])

// ۴. Grid — برای آرایش شبکه‌ای
delay: anime.stagger(50, { grid: [5, 4], from: 'center' })

// ۵. روی property دیگری هم می‌شود
translateX: anime.stagger(20)  // هر المان ۲۰px بیشتر
scale:      anime.stagger(0.1, { from: 'center' })

🎮کنترل Playback

anime() یک شیء برمی‌گرداند که متدهای کنترل کامل انیمیشن را دارد. می‌توانید انیمیشن را play، pause، reverse و seek کنید.

متدهای کنترل

const anim = anime({
  targets: '#box',
  translateX: 300,
  duration: 3000,
  loop: true,
  autoplay: false,   // شروع نکن
  direction: 'alternate'
});

anim.play();          // شروع / ادامه
anim.pause();         // مکث
anim.restart();      // از ابتدا
anim.reverse();      // معکوس کردن جهت
anim.seek(1500);     // رفتن به ms 1500
anim.seek(anim.duration * 0.5);  // رفتن به ۵۰٪

// خواندن وضعیت
anim.currentTime    // ms فعلی
anim.progress       // درصد پیشرفت (0-100)
anim.duration       // کل مدت (ms)
anim.paused         // آیا pause است؟
anim.completed      // آیا تمام شده؟

// Promise — وقتی تمام شد
await anim.finished;
console.log('انیمیشن تمام شد!');

🔔Callbacks و رویدادها

Anime.js چندین callback تعریف می‌کند که در مراحل مختلف چرخه انیمیشن فراخوانی می‌شوند.

انواع Callbacks

anime({
  targets: '#box',
  translateX: 300,
  duration: 1500,
  loop: 2,

  begin: (anim) => {
    // یک بار در شروع کل انیمیشن
    console.log('شروع شد');
  },

  loopBegin: (anim) => {
    // شروع هر loop
    console.log('لوپ شماره ' + anim.currentLoop);
  },

  update: (anim) => {
    // هر frame — پرکاربردترین callback
    console.log(Math.round(anim.progress) + '%');
    document.getElementById('prog').style.width = anim.progress + '%';
  },

  loopComplete: (anim) => {
    // پایان هر loop
  },

  complete: (anim) => {
    // یک بار در پایان کل انیمیشن
    console.log('تمام شد!');
  },

  changeBegin: (anim) => { /* شروع فاز change */ },
  changeComplete: (anim) => { /* پایان فاز change */ },
});

Promise API

// روش ۱: .finished Promise
const anim = anime({ targets: '#box', translateX: 300, duration: 1000 });
await anim.finished;
console.log('انیمیشن اول تمام شد');

// روش ۲: زنجیره async/await
async function sequence() {
  await anime({ targets: '#box', translateX: 200, duration: 500 }).finished;
  await anime({ targets: '#box', scale: 1.5, duration: 300 }).finished;
  await anime({ targets: '#box', opacity: 0, duration: 400 }).finished;
  document.getElementById('#box').style.display = 'none';
}

🖼انیمیشن SVG

Anime.js یکی از قوی‌ترین کتابخانه‌ها برای انیمیشن SVG است. از stroke drawing، path motion، morphing و SVG attributes پشتیبانی می‌کند.

۱. Stroke Drawing — رسم خط

anime({
  targets: '#my-path',
  strokeDashoffset: [anime.setDashoffset, 0],  // از محاسبه اتوماتیک تا صفر
  easing: 'easeInOutSine',
  duration: 2000,
  direction: 'alternate',
  loop: true
});

۲. Motion Path — حرکت روی مسیر

const path = anime.path('#motionPath');

anime({
  targets: '#ball',
  translateX: path('x'),     // مختصات x مسیر
  translateY: path('y'),     // مختصات y مسیر
  rotate:     path('angle'),  // زاویه مماس مسیر
  easing: 'linear',
  duration: 3000,
  loop: true
});

۳. SVG Attributes

anime({
  targets: 'circle',
  r: [10, 50],          // شعاع
  cx: 200,              // مرکز افقی
  fill: '#ff6b6b',      // رنگ پر
  stroke: '#333',       // رنگ خط
  strokeWidth: 3,        // ضخامت خط
  opacity: [0, 1],
  duration: 1000,
  easing: 'easeOutElastic'
});

🛠پروژه‌های واقعی

در این بخش چند کامپوننت پرکاربرد واقعی با Anime.js می‌سازیم.

۱. Counter انیمیشن

const obj = { value: 0 };
anime({
  targets: obj,
  value: 2847,
  round: 1,           // گرد کردن به عدد صحیح
  duration: 2000,
  easing: 'easeOutExpo',
  update: () => {
    el.textContent = obj.value.toLocaleString('fa');
  }
});

⚖مقایسه و بهترین روش‌ها

Anime.js در مقابل GSAP

بهترین روش‌ها

• از translateX/Y به جای left/top استفاده کنید — transform ها GPU-accelerated هستند و سریع‌ترند.
• از will-change: transform در CSS استفاده کنید — برای المان‌هایی که اغلب انیمیت می‌شوند.
• انیمیشن‌های loop: true را با pause() متوقف کنید — وقتی المان از صفحه خارج می‌شود تا CPU آزاد شود.
• از autoplay: false و Intersection Observer ترکیب کنید — انیمیشن فقط وقتی المان در viewport است اجرا شود.
• برای chain کردن از await anim.finished استفاده کنید — بهتر از تودرتو کردن callbacks.

🚀زمین بازی کد (Playground)

کد Anime.js را همین‌جا ویرایش کن و انیمیشن را زنده ببین. یک مثال را از منوی بالا انتخاب کن، مقادیر را تغییر بده و دکمهٔ ▶ اجرا را بزن. نسخهٔ ۳.۲.۲ همین صفحه آفلاین بارگذاری می‌شود.