بهبودهای Web Animations API در Chromium 84

هماهنگ کردن انیمیشن ها با وعده ها، بهبود عملکرد با انیمیشن های قابل تعویض، انیمیشن های روان تر با حالت های ترکیبی و موارد دیگر.

Kevin Ellis

Una Kravets

هنگامی که انیمیشن ها به درستی استفاده شوند، درک و حافظه کاربر از نام تجاری شما را بهبود می بخشند ، اقدامات کاربر را هدایت می کنند و به کاربران کمک می کنند برنامه شما را هدایت کنند - زمینه را در یک فضای دیجیتال فراهم می کنند.

Web Animations API ابزاری است که توسعه دهندگان را قادر می سازد تا انیمیشن های ضروری را با جاوا اسکریپت بنویسند. این برنامه برای پشتیبانی از انیمیشن‌های CSS و پیاده‌سازی انتقال و ایجاد افکت‌های آینده و همچنین ایجاد و زمان‌بندی افکت‌های موجود نوشته شده است.

در حالی که فایرفاکس و سافاری قبلاً مجموعه کاملی از ویژگی‌ها را پیاده‌سازی کرده‌اند، Chromium 84 مجموعه‌ای از ویژگی‌های پشتیبانی‌نشده قبلی را به Chrome و Edge می‌آورد که قابلیت همکاری بین مرورگرها را امکان‌پذیر می‌کند.

سابقه طولانی Web Animations API در Chromium.

شروع شدن

اگر از قوانین @keyframe استفاده کرده باشید، ایجاد یک انیمیشن از طریق Web Animations API بسیار آشنا است. ابتدا باید یک Object Keyframe ایجاد کنید. چه چیزی ممکن است در CSS شبیه به این باشد:

@keyframes openAnimation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

در جاوا اسکریپت به این شکل خواهد بود:

const openAnimation = [
  { transform: 'scale(0)' },
  { transform: 'scale(1)' },
];

جایی که پارامترهای انیمیشن را در CSS تنظیم می کنید:

.modal {
  animation: openAnimation 1s 1 ease-in;
}

شما در JS تنظیم می کنید:

document.querySelector('.modal').animate(
    openAnimation, {
      duration: 1000, // 1s
      iterations: 1, // single iteration
      easing: 'ease-in' // easing function
    }
);

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

توجه: نام‌های دارای خط فاصله زمانی که در فریم‌های کلیدی استفاده می‌شوند، به حالت شتر تبدیل می‌شوند (مثلاً background-color به backgroundColor )

Beyond element.animate()

با این حال، با به‌روزرسانی، Web Animations API دیگر محدود به انیمیشن‌های ایجاد شده از طریق element.animate() نیست. ما می‌توانیم انیمیشن‌ها و انتقال‌های CSS را نیز دستکاری کنیم.

getAnimations() متدی است که تمام انیمیشن‌های یک عنصر را بدون توجه به اینکه از طریق element.animate() ایجاد شده باشد یا از طریق قوانین CSS (انیمیشن یا انتقال CSS) برمی‌گرداند. در اینجا نمونه ای از آنچه به نظر می رسد آورده شده است:

شما ابتدا فریم های کلیدی را برای انتقال "get" تا مشخص کنید که از کجا در حال انتقال هستیم. سپس، دو انیمیشن opacity جدید ایجاد می‌کنید که جلوه متقاطع محو شدن را فعال می‌کند. پس از تکمیل کراس فاید، کپی را حذف می کنید.

ارکستراسیون انیمیشن ها با وعده ها

در Chromium 84، اکنون دو روش دارید که می‌توان از آنها با وعده‌ها استفاده کرد: animation.ready و animation.finished .

• animation.ready شما را قادر می سازد منتظر اعمال تغییرات معلق باشید (یعنی جابجایی بین روش های کنترل پخش مانند پخش و مکث).
• animation.finished وسیله ای برای اجرای کد جاوا اسکریپت سفارشی در زمانی که یک انیمیشن کامل می شود فراهم می کند.

بیایید به مثال خود ادامه دهیم و یک زنجیره انیمیشن هماهنگ با animation.finished ایجاد کنیم. در اینجا، شما یک تبدیل عمودی ( scaleY ) دارید، به دنبال آن یک تبدیل افقی ( scaleX )، به دنبال آن یک تغییر کدورت در عنصر فرزند:

اعمال تبدیل و کدورت به یک عنصر مدال باز. به نسخه ی نمایشی در Codepen مراجعه کنید

const transformAnimation = modal.animate(openModal, openModalSettings);
transformAnimation.finished.then(() => { text.animate(fadeIn, fadeInSettings)});

قبل از اجرای مجموعه انیمیشن بعدی در زنجیره، این انیمیشن ها را با استفاده از animation.finished.then() زنجیر کرده ایم. به این ترتیب انیمیشن ها به ترتیب ظاهر می شوند و شما حتی با مجموعه گزینه های مختلف (مانند سرعت و سهولت) روی عناصر هدف مختلف افکت ها اعمال می کنید.

در CSS، بازآفرینی این کار دشوار خواهد بود، به‌ویژه زمانی که انیمیشن‌های منحصربه‌فرد و در عین حال توالی‌بندی شده را روی عناصر متعدد اعمال می‌کنید. شما باید از یک @keyframe استفاده کنید، درصدهای زمان بندی صحیح را برای قرار دادن انیمیشن ها مرتب کنید، و قبل از فعال کردن انیمیشن ها در دنباله animation-delay استفاده کنید.

مثال: پخش، مکث و معکوس کردن

آنچه می تواند باز شود، باید بسته شود! خوشبختانه، از Chromium 39 ، Web Animations API توانایی پخش، توقف و معکوس کردن انیمیشن‌هایمان را در اختیار ما قرار داده است.

می‌توانید انیمیشن بالا را بگیرید و با کلیک مجدد روی دکمه با استفاده از .reverse() یک انیمیشن صاف و معکوس به آن بدهید. به این ترتیب، می‌توانید تعامل روان‌تر و متنی‌تری برای مدال ما ایجاد کنید.

نمونه ای از باز و بسته شدن مدال با کلیک روی دکمه. نسخه ی نمایشی در Glitch را ببینید

کاری که می توانید انجام دهید این است که دو انیمیشن در حال پخش ( openModal و یک تبدیل کدورت درون خطی) ایجاد کنید و سپس یکی از انیمیشن ها را مکث کنید و آن را تا زمانی که دیگری تمام شود به تاخیر بیاندازید. سپس می‌توانید از وعده‌ها برای صبر کردن تا پایان هر کدام قبل از بازی استفاده کنید. در نهایت، می توانید بررسی کنید که آیا یک پرچم تنظیم شده است یا خیر، و سپس هر انیمیشن را معکوس کنید.

مثال: تعاملات پویا با فریم های کلیدی جزئی

مثال هدف گذاری مجدد، جایی که یک کلیک ماوس انیمیشن را در یک مکان جدید تنظیم می کند. نسخه ی نمایشی در Glitch را ببینید

selector.animate([{transform: `translate(${x}px, ${y}px)`}],
    {duration: 1000, fill: 'forwards'});

در این مثال، تنها یک فریم کلیدی وجود دارد و هیچ موقعیت شروع مشخصی وجود ندارد. این نمونه ای از استفاده از فریم های کلیدی جزئی است. کنترل کننده ماوس چند کار را در اینجا انجام می دهد: یک مکان پایانی جدید را تنظیم می کند و یک انیمیشن جدید را راه اندازی می کند. موقعیت شروع جدید از موقعیت اصلی فعلی استنباط می شود.

انتقال‌های جدید می‌توانند در حالی که موارد موجود هنوز در حال اجرا هستند، فعال شوند. این بدان معنی است که انتقال فعلی قطع می شود و یک انتقال جدید ایجاد می شود.

بهبود عملکرد با انیمیشن های قابل تعویض

هنگام ایجاد انیمیشن‌ها بر اساس رویدادها، مانند 'mousemove' ، هر بار یک انیمیشن جدید ایجاد می‌شود که می‌تواند به سرعت حافظه را مصرف کند و عملکرد را کاهش دهد. برای رفع این مشکل، انیمیشن‌های قابل تعویض در Chromium 83 معرفی شدند که پاک‌سازی خودکار را امکان‌پذیر می‌کند، جایی که انیمیشن‌های تمام‌شده به‌عنوان قابل تعویض پرچم‌گذاری می‌شوند و در صورت جایگزینی با انیمیشن تمام‌شده دیگری، به‌طور خودکار حذف می‌شوند. به مثال زیر توجه کنید:

رد دنباله دار با حرکت موش متحرک می شود. نسخه ی نمایشی در Glitch را ببینید

elem.addEventListener('mousemove', evt => {
  rectangle.animate(
    { transform: translate(${evt.clientX}px, ${evt.clientY}px) },
    { duration: 500, fill: 'forwards' }
  );
});

هر بار که ماوس حرکت می کند، مرورگر موقعیت هر توپ را در دنباله دنباله دار دوباره محاسبه می کند و یک انیمیشن برای این نقطه جدید ایجاد می کند. مرورگر اکنون می داند که انیمیشن های قدیمی را حذف کند (فعال کردن جایگزینی) زمانی که:

1. انیمیشن به پایان رسید.
2. یک یا چند انیمیشن بالاتر در ترتیب ترکیبی وجود دارد که آنها نیز به پایان رسیده اند.
3. انیمیشن های جدید همان ویژگی ها را متحرک می کنند.

می‌توانید با جمع‌آوری شمارنده با هر انیمیشن حذف‌شده، با استفاده از anim.onremove برای فعال کردن شمارنده، ببینید دقیقاً چند انیمیشن جایگزین می‌شوند.

چند روش اضافی وجود دارد تا کنترل انیمیشن خود را حتی بیشتر کنید:

• animation.replaceState() وسیله ای برای ردیابی فعال بودن، ماندگاری یا حذف شدن یک انیمیشن فراهم می کند.
• animation.commitStyles() سبک یک عنصر را بر اساس سبک اصلی به همراه تمام انیمیشن های موجود در عنصر به ترتیب ترکیبی به روز می کند.
• animation.persist() یک انیمیشن را به عنوان غیرقابل تعویض علامت گذاری می کند.

توجه: animation.commitStyles() و animation.persist() معمولاً با حالت های ترکیبی مانند "add" استفاده می شوند. نسخه ی نمایشی حالت های ترکیبی را در زیر بررسی کنید تا آنها را در عمل ببینید.

انیمیشن های روان تر با حالت های ترکیبی

با Web Animations API، اکنون می‌توانید حالت ترکیبی انیمیشن‌های خود را تنظیم کنید، به این معنی که آنها می‌توانند علاوه بر حالت پیش‌فرض «جایگزین»، افزودنی یا تجمعی باشند. حالت های ترکیبی به توسعه دهندگان این امکان را می دهد که انیمیشن های متمایز بنویسند و بر نحوه ترکیب افکت ها کنترل داشته باشند. اکنون سه حالت ترکیبی پشتیبانی می‌شود: 'replace' (حالت پیش‌فرض)، 'add' و 'accumulate' .

هنگامی که انیمیشن های ترکیبی می کنید، یک توسعه دهنده می تواند جلوه های کوتاه و متمایز بنویسد و آنها را با هم ترکیب کند. در مثال زیر، ما در حال اعمال چرخش و مقیاس کلید فریم برای هر جعبه هستیم که تنها تنظیم حالت ترکیبی است که به عنوان یک گزینه اضافه شده است:

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

در حالت ترکیبی پیش‌فرض 'replace' ، انیمیشن نهایی جایگزین ویژگی تبدیل می‌شود و در rotate(360deg) scale(1.4) به پایان می‌رسد. برای 'add' ، کامپوزیت چرخش را اضافه می‌کند و مقیاس را ضرب می‌کند و در نتیجه حالت نهایی rotate(720deg) scale(1.96) ایجاد می‌شود. 'accumulate' دگرگونی‌ها را ترکیب می‌کند، که منجر به rotate(720deg) scale(1.8) می‌شود. برای اطلاعات بیشتر در مورد پیچیدگی‌های این حالت‌های ترکیبی، شمارش‌های CompositeOperation و CompositeOperationOrAuto را از مشخصات Web Animations بررسی کنید.

بیایید نگاهی به یک مثال عنصر UI بیندازیم:

یک منوی کشویی فنری که دو انیمیشن ترکیبی روی آن اعمال شده است. نسخه نمایشی در Glitch را ببینید

در اینجا، دو انیمیشن top ترکیب شده است. اولی یک انیمیشن ماکرو است که فهرست کشویی را در ارتفاع کامل خود منو به عنوان یک افکت اسلاید از بالای صفحه جابه جا می کند و دومی که یک انیمیشن میکرو است، در هنگام برخورد به صفحه، کمی جهش اعمال می کند. پایین استفاده از حالت ترکیبی 'add' یک انتقال نرم‌تر را ممکن می‌سازد.

const dropDown = menu.animate(
    [
      { top: `${-menuHeight}px`, easing: 'ease-in' },
      { top: 0 }
    ], { duration: 300, fill: 'forwards' });

  dropDown.finished.then(() => {
    const bounce = menu.animate(
      [
        { top: '0px', easing: 'ease-in' },
        { top: '10px', easing: 'ease-out' },
        { ... }
      ], { duration: 300, composite: 'add' });
  });

آینده Web Animations API چیست

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

• انیمیشن های مرتبط با اسکرول با Houdini API
• جدول زمانی قابل تغییر
• اثر گروهی و همگام سازی