انیمیشنهای CSS در مقابل Web Animation API - قسمت 4

ساخت وبلاگ
0 4 ۲۹ تیر ۹۶

همونطور که اطلاع دارید در جلسات قبل توضیحاتی در مورد تفاوتهای انیمیشنهای CSS و Web Animation API یا همون WAAPI دادیم و شما رو با اونا آشنا کردیم. در این جلسه میخوایم مباحث باقی مانده در این زمینه رو بیان کنیم و این موضوع رو به پایان برسونیم.

شئ Animation

متد animate علاوه بر انیمیشنی کردن المنتهای مورد نظر ما، چیزهای دیگه ای رو برگشت میده که میتونیم از اونا بهره ببریم. اگر این متد رو بصورت زیر درون یک متغیر ذخیره کنیم:

و حالا درون Console متغیر myAnimation رو چاپ کنیم، خروجی شبیه به تصویر زیر خواهد بود:

اگر به این شئ دقیق نگاه کنیم، متوجه خواهیم شد که یک شئ از نوع Animation هست. این شئ همه قابلیتها برای کنترل انیمیشن رو در اختیار ما قرار میده و یکی از متدهای اون myAnimation.pause() هست که همونطور که از اسمش مشخص هست، انیمیشن رو متوقف میکنه. اگر بخوایم درون CSS یک انیمیشن رو متوقف کنیم، باید مقدار ویژگی animation-play-state رو تغییر بدیم. بعنوان مثال دیگر با استفاده از شئ انیمیشن به راحتی میتونیم انیمیشن رو معکوس کنیم. برای اینکار از متد myAnimation.reverse() استفاده میکنیم. اگر همینکار رو با استفاده از CSS بخوایم انجام بدیم باید مقدار ویژگی animation-direction رو تغییر بدیم. همچنین ما میتونیم با استفاده از ویژگی playbackRate سرعت اجرای انیمیشن رو تغییر بدیم. اگر مقدار بیشتر از 1 قرار بدیم، سرعت بیشتر و اگر مقدار کمتر از یک قرار بدیم، سرعت اجرا کمتر خواهد شد. بصورت زیر:

متد getAnimations

این متد آرایه ای از تمامی Animation object های مربوط به المنت مورد نظر رو به ما تحویل میده. چه انیمیشن با استفاده از CSS تعریف شده باشه و چه با استفاده از WAAPI، این متد اونا رو برگشت میده و میتونین همه اونا رو در یکجا ببینید. کد اون بصورت زیر است:

فرض کنید شما دوست ندارید که انیمیشن هاتون رو با استفاده از Javascript و Web Animation API به وجود بیارید و میخواید از CSS استفاده کنید. در این مواقع نیز شما به راحتی میتونین با استفاده از متد getAnimations، انیمیشنهای مورد نظر رو مدیریت کنید. یعنی میتونین با CSS و keyframe های اون انیمیشن رو به وجود بیارید و با Javascript اون رو کنترل کنید.

حتی اگر فقط یک انیمیشن برای المنت مورد نظر تعریف شده باشد، متد getAnimations یک آرایه رو برمیگردونه. کد زیر رو در نظر بگیرید:

همونطور که میبینید فقط انیمیشن اول از انیمیشنهای مرتبط با المنت h2 رو انتخاب کردیم و درون متغیر myCSSAnimation قرار دادیم. حالا میتونیم از Web Animation API استفاده کنیم و انیمیشن ساخته شده با CSS رو مدیریت کنیم، بصورت زیر:

Promise و رویدادها

همونطور که میدونین تعدادی رویداد از قبیل animationstart و animationend و animationiteration و transitionend داریم که با استفاده از CSS راه انداخته میشن. بعضی اوقات نیاز میشه که رویدادهای animationend و transitionend رو زیرنظر بگیریم و زمانی که انیمیشن به پایان رسید، المنت مورد نظر رو حذف کنیم. راه معادل 2 رویداد ذکر شده در Web Animation API با استفاده از شئ Animation بصورت زیر است:

میبینید که رویداد onfinish وقتی trigger میشه، callback اون اجرا میشه و المنت مورد نظر remove یا حذف میشه. WAAPI به ما اجازه میده که علاوه بر رویدادها از Promise ها نیز استفاده کنیم. شئ Animation یک ویژگی دیگه بنام finished داره که یک Promise رو برمیگردونه و زمانی که انیمیشن به پایان میرسه، حالت resolve یا موفقیت اون اجرا میشه. پس معادل Promise کد بالا بصورت زیر خواهد بود:

شئ Animation ویژگی ها و متدهای زیاد دیگه ای نیز داره که با استفاده از اون میتونین انیمیشن های مورد نظرتون رو بصورت کامل مدیریت کنید.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 318 تاريخ : شنبه 31 تير 1396 ساعت: 4:59

خبرنامه