وقتی نوبت به انیمیشن‌های وب می‌رسد، توسعه‌دهندگان باید نیازهای انیمیشن را با فناوری مناسب (CSS یا JavaScript) مدیریت کنند. بسیاری از انیمیشن ها با CSS قابل پیاده‌سازی هستند، اما جاوااسکریپت همیشه قابلیت‌ها و کنترل‌های بیشتری را ارائه می دهد. در این مقاله یاد میگیرید که چطور به سادگی بتوانید انیمیشن ها را با JavaScript در پروژه‌های خود مدیریت کنید.
با استفاده از دستور
document.getAnimationsمی توانید از جاوا اسکریپت برای مدیریت انیمیشن های CSS استفاده کنید!
متد document.getAnimations آرایه ای از اشیاء CSSAnimation را برمی گرداند . CSSAnimation مجموعه ای از اطلاعات در مورد انیمیشن ارائه می دهد: playState، timeline، effect، و رویدادهایی مانند onfinish. سپس می توانید آن اشیاء را برای تنظیم انیمیشن ها تغییر دهید:
// Make all CSS animations on the page twice as fast
document.getAnimations().forEach((animation) => {
animation.playbackRate *= 2;
});
// Stop all CSS animations on the page
document.getAnimations().forEach((animation) => {
animation.cancel();
});
مشاهده کردید که با استفاده از قطعه کد بالا به راحتی توانستیم انیمیشن های داخل صفحات را مدیریت کنیم.
در خط ۲ تمامی انیمیشن های موجود در صفحه را ۲ برابر سریعتر می کند! همچنین در خط ۷ سعی میکنیم تا تمامی انیمیشن های صفحه را متوقف کنیم!
هر دوی این موارد با استفاده از یک forEach بر روی تمامی آیتم های صفحه که دارای انیمیشن می باشد اعمال می شود. این forEach بر روی آیتم های دریافت شده از سمت document.getAnimations انجام می شود.
