‏stagger grid در Anime.js: انیمیشن شبکه‌ای با یک خط کد

اگه با Anime.js کار کرده باشی، احتمالاً با تابع stagger آشنایی داری که بهت اجازه می‌ده انیمیشن المان‌ها رو با تأخیر پشت‌سرهم اجرا کنی. اما یه قابلیت کمتر دیده‌شده توی این کتابخونه وجود داره به اسم stagger grid که کار رو یه سطح بالاتر می‌بره.

با stagger grid می‌تونی توزیع تأخیر انیمیشن رو نه فقط به‌صورت خطی، بلکه روی یه شبکه دوبعدی (مثل یه جدول با ستون و ردیف) تنظیم کنی. این یعنی می‌تونی افکت‌های موجی جذاب بسازی که از یه نقطه مشخص شروع می‌شن و به همه جهات پخش می‌شن.

برای استفاده از این قابلیت، کافیه پارامتر grid رو توی آپشن‌های stagger تنظیم کنی. دو حالت داری:

حالت اول: ابعاد صریح یه آرایه به شکل [columns, rows] می‌دی و خودت ابعاد شبکه رو مشخص می‌کنی.

حالت دوم: auto-grid (از نسخه ۴.۴.۰) با grid: true می‌ذاری Anime.js خودش موقعیت المان‌ها رو بخونه و شبکه رو بسازه. این حالت از موقعیت فیزیکی المان‌ها در DOM یا مختصات {x, y} در آبجکت‌های جاوااسکریپت استفاده می‌کنه.

پارامتر from هم مشخص می‌کنه انیمیشن از کجای شبکه شروع بشه. مثلاً می‌تونی یه ایندکس تصادفی بدی تا هر بار از یه نقطه متفاوت شروع بشه.

توی مثال رسمی داکیومنتیشن، یه شبکه ۱۱×۴ از مربع‌ها انیمیت می‌شن. هر بار که انیمیشن تموم می‌شه، دوباره از یه نقطه تصادفی شروع می‌کنه:

import { animate, stagger } from 'animejs';

const $squares = utils.$('.square');

function animateGrid() {
  animate($squares, {
    scale: [
      { to: [0, 1.25] },
      { to: 0 }
    ],
    boxShadow: [
      { to: '0 0 1rem 0 currentColor' },
      { to: '0 0 0rem 0 currentColor' }
    ],
    delay: stagger(100, {
      grid: [11, 4],
      from: utils.random(0, 11 * 4)
    }),
    onComplete: animateGrid
  });
}

animateGrid();

در این کد، تأخیر ۱۰۰ میلی‌ثانیه‌ای بین هر المان با توجه به فاصله‌شون از نقطه شروع تصادفی توزیع می‌شه. نتیجه یه افکت موجی زیباست که از یه جای رندوم توی شبکه بلند می‌شه.

این قابلیت به‌خصوص برای گالری‌ها، داشبوردها، بازی‌های مبتنی بر تایل، یا هر جایی که المان‌ها به‌صورت شبکه‌ای چیده شدن خیلی جذابه.

نکات کلیدی:

• stagger grid از نسخه ۲.۰.۰ Anime.js پشتیبانی می‌شه
• می‌تونی ابعاد رو دستی با [columns, rows] بدی یا با grid: true بذاری خودش حساب کنه
• حالت auto-grid از نسخه ۴.۴.۰ اضافه شده و موقعیت المان‌ها رو خودکار تشخیص می‌ده
• پارامتر from نقطه شروع انیمیشن رو مشخص می‌کنه و می‌تونه تصادفی باشه
• ترکیب stagger grid با onComplete یه انیمیشن حلقه‌ای بی‌پایان با نقطه شروع رندوم می‌سازه