هماهنگ کردن انیمیشن ها با وعده ها، بهبود عملکرد با انیمیشن های قابل تعویض، انیمیشن های روان تر با حالت های ترکیبی و موارد دیگر.
تاریخ انتشار: 27 می 2020
هنگامی که انیمیشن ها به درستی استفاده شوند، درک و حافظه کاربر از نام تجاری شما را بهبود می بخشند ، اقدامات کاربر را هدایت می کنند و به کاربران کمک می کنند برنامه شما را هدایت کنند - زمینه را در یک فضای دیجیتال فراهم می کنند.
Web Animations API ابزاری است که توسعه دهندگان را قادر می سازد تا انیمیشن های ضروری را با جاوا اسکریپت بنویسند. این برنامه برای پشتیبانی از انیمیشنهای CSS و پیادهسازی انتقال و ایجاد افکتهای آینده و همچنین ایجاد و زمانبندی افکتهای موجود نوشته شده است.
در حالی که فایرفاکس و سافاری قبلاً مجموعه کاملی از ویژگیها را پیادهسازی کردهاند، Chromium 84 مجموعهای از ویژگیهای پشتیبانینشده قبلی را به Chrome و Edge میآورد که قابلیت همکاری بین مرورگرها را امکانپذیر میکند.
شروع کردن
ایجاد یک انیمیشن با استفاده از Web Animations API در صورتی که از قوانین @keyframe
استفاده کرده باشید، بسیار آشنا است. ابتدا باید یک 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 ندارید. این شامل توانایی توالی افکتها و افزایش کنترل حالتهای پخش آنها میشود.
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
)، به دنبال آن یک تغییر کدورت در عنصر فرزند:
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()
یک انیمیشن صاف و معکوس به آن بدهید. به این ترتیب، میتوانید تعامل روانتر و متنیتری برای مدال ما ایجاد کنید.
کاری که می توانید انجام دهید این است که دو انیمیشن در حال پخش ( openModal
و یک تبدیل کدورت درون خطی) ایجاد کنید و سپس یکی از انیمیشن ها را مکث کنید و آن را تا زمانی که دیگری تمام شود به تاخیر بیاندازید. سپس میتوانید از وعدهها برای صبر کردن تا پایان هر کدام قبل از بازی استفاده کنید. در نهایت، می توانید بررسی کنید که آیا یک پرچم تنظیم شده است یا خیر، و سپس هر انیمیشن را معکوس کنید.
مثال: تعاملات پویا با فریم های کلیدی جزئی
selector.animate([{transform: `translate(${x}px, ${y}px)`}],
{duration: 1000, fill: 'forwards'});
در این مثال، تنها یک فریم کلیدی وجود دارد و هیچ موقعیت شروع مشخصی وجود ندارد. این نمونه ای از استفاده از فریم های کلیدی جزئی است. کنترل کننده ماوس چند کار را در اینجا انجام می دهد: یک مکان پایانی جدید را تنظیم می کند و یک انیمیشن جدید را راه اندازی می کند. موقعیت شروع جدید از موقعیت اصلی فعلی استنباط می شود.
انتقالهای جدید میتوانند در حالی که موارد موجود هنوز در حال اجرا هستند، فعال شوند. این بدان معنی است که انتقال فعلی قطع می شود و یک انتقال جدید ایجاد می شود.
بهبود عملکرد با انیمیشن های قابل تعویض
هنگام ایجاد انیمیشنها بر اساس رویدادها، مانند 'mousemove'
، هر بار یک انیمیشن جدید ایجاد میشود که میتواند به سرعت حافظه را مصرف کند و عملکرد را کاهش دهد. برای رفع این مشکل، انیمیشنهای قابل تعویض در Chromium 83 معرفی شدند که پاکسازی خودکار را امکانپذیر میکند، جایی که انیمیشنهای تمامشده بهعنوان قابل تعویض پرچمگذاری میشوند و در صورت جایگزینی با انیمیشن تمامشده دیگری، بهطور خودکار حذف میشوند. به مثال زیر توجه کنید:
elem.addEventListener('mousemove', evt => {
rectangle.animate(
{ transform: translate(${evt.clientX}px, ${evt.clientY}px) },
{ duration: 500, fill: 'forwards' }
);
});
هر بار که ماوس حرکت می کند، مرورگر موقعیت هر توپ را در دنباله دنباله دار دوباره محاسبه می کند و یک انیمیشن برای این نقطه جدید ایجاد می کند. مرورگر اکنون می داند که انیمیشن های قدیمی را حذف کند (فعال کردن جایگزینی) زمانی که:
- انیمیشن به پایان رسید.
- یک یا چند انیمیشن بالاتر در ترتیب ترکیبی وجود دارد که آنها نیز به پایان رسیده اند.
- انیمیشن های جدید همان ویژگی ها را متحرک می کنند.
میتوانید با جمعآوری شمارنده با هر انیمیشن حذفشده، با استفاده از anim.onremove
برای فعال کردن شمارنده، ببینید دقیقاً چند انیمیشن جایگزین میشوند.
چند ویژگی و روش اضافی وجود دارد که کنترل انیمیشن شما را حتی بیشتر می کند:
-
animation.replaceState
ابزاری برای ردیابی فعال بودن، ماندگاری یا حذف شدن یک انیمیشن فراهم میکند. -
animation.commitStyles()
سبک یک عنصر را بر اساس سبک اصلی به همراه تمام انیمیشن های موجود در عنصر به ترتیب ترکیبی به روز می کند. -
animation.persist()
یک انیمیشن را به عنوان غیرقابل تعویض علامت گذاری می کند.
انیمیشن های روان تر با حالت های ترکیبی
با Web Animations API، اکنون میتوانید حالت ترکیبی انیمیشنهای خود را تنظیم کنید، به این معنی که آنها میتوانند علاوه بر حالت پیشفرض «جایگزین»، افزودنی یا تجمعی باشند. حالت های ترکیبی به توسعه دهندگان این امکان را می دهد که انیمیشن های متمایز بنویسند و بر نحوه ترکیب افکت ها کنترل داشته باشند. اکنون سه حالت ترکیبی پشتیبانی میشود: 'replace'
(حالت پیشفرض)، 'add'
و 'accumulate'
.
هنگامی که انیمیشن های ترکیبی می کنید، یک توسعه دهنده می تواند جلوه های کوتاه و متمایز بنویسد و آنها را با هم ترکیب کند. در مثال زیر، ما در حال اعمال چرخش و مقیاس کلید فریم برای هر جعبه هستیم که تنها تنظیم حالت ترکیبی است که به عنوان یک گزینه اضافه شده است:
در حالت ترکیبی پیشفرض 'replace'
، انیمیشن نهایی جایگزین ویژگی تبدیل میشود و در rotate(360deg) scale(1.4)
به پایان میرسد. برای 'add'
، کامپوزیت چرخش را اضافه میکند و مقیاس را ضرب میکند و در نتیجه حالت نهایی rotate(720deg) scale(1.96)
ایجاد میشود. 'accumulate'
دگرگونیها را ترکیب میکند، که منجر به rotate(720deg) scale(1.8)
میشود. برای اطلاعات بیشتر در مورد پیچیدگیهای این حالتهای ترکیبی، فهرستبندیهای CompositeOperation و CompositeOperationOrAuto را از مشخصات Web Animations بررسی کنید.
به مثال عنصر UI زیر نگاهی بیندازید:
در اینجا، دو انیمیشن 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 چیست
اینها همه افزودههای هیجانانگیزی به قابلیتهای انیمیشن در مرورگرهای امروزی هستند و حتی موارد اضافهتری نیز در راه است. برای مطالعه بیشتر در مورد آنچه در آینده خواهد آمد، این مشخصات آینده را بررسی کنید: