وقتی نوبت به انیمیشن‌های وب می‌رسد، توسعه‌دهندگان باید نیازهای انیمیشن را با فناوری مناسب (CSS یا JavaScript) مدیریت کنند. بسیاری از انیمیشن ها با CSS قابل پیاده‌سازی هستند، اما جاوااسکریپت همیشه قابلیت‌ها و کنترل‌های بیشتری را ارائه می دهد. در این مقاله یاد میگیرید که چطور به سادگی بتوانید انیمیشن ها را با JavaScript در پروژه‌های خود مدیریت کنید.<blockquote>با استفاده از دستور&nbsp;<code>document.getAnimations</code>&nbsp;می توانید از جاوا اسکریپت برای مدیریت انیمیشن های CSS استفاده کنید!</blockquote>متد <code>document.getAnimations</code> آرایه ای از اشیاء&nbsp;<code>CSSAnimation</code>&nbsp;را برمی گرداند&nbsp;.&nbsp;<code>CSSAnimation</code> مجموعه ای از اطلاعات در مورد انیمیشن ارائه می دهد:&nbsp;<code>playState</code>،&nbsp;<code>timeline</code>،&nbsp;<code>effect</code>، و رویدادهایی مانند&nbsp;<code>onfinish</code>.&nbsp;سپس می توانید آن اشیاء را برای تنظیم انیمیشن ها تغییر دهید:<pre><code class="language-javascript">
// Make all CSS animations on the page twice as fast
document.getAnimations().forEach((animation) =&gt; {
 animation.playbackRate *= 2;
});

// Stop all CSS animations on the page
document.getAnimations().forEach((animation) =&gt; {
 animation.cancel();
}); 
</code></pre>مشاهده کردید که با استفاده از قطعه کد بالا به راحتی توانستیم انیمیشن های داخل صفحات را مدیریت کنیم.در خط ۲ تمامی انیمیشن های موجود در صفحه را ۲ برابر سریعتر می کند! همچنین در خط ۷ سعی میکنیم تا تمامی انیمیشن های صفحه را متوقف کنیم!&nbsp; هر دوی این موارد با استفاده از یک forEach بر روی تمامی آیتم های صفحه که دارای انیمیشن می باشد اعمال می شود. این forEach بر روی آیتم های دریافت شده از سمت&nbsp;<code>document.getAnimations</code> انجام می شود.

پیاده سازی انیمیشن در CSS کاری هست که به آن عادت داریم، اما چه می شود که انیمیشن ها را در JavaScript مدیریت کنیم؟ اینجا به شما خواهم گفت...

مدیریت انیمیشن در JavaScript به جای CSS

وبلاگ - مقالات بر اساس تگ "animation"

مدیریت انیمیشن در JavaScript به جای استفاده از انیمیشن در CSS