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



visibility  
mode_comment   ۰

همونطور که دیدید در جلسه قبل توضیحاتی در مورد Web Animation API دادیم و تفاوتها و شباهت های اون رو با CSS Animation بررسی کردیم. در جلسه قبل گفتیم که میتونیم از تنظیمات متنوعی که وجود داره استفاده کنیم. این تنظیمات بصورت زیر بودند:

اگر به خوبی با CSS Animation و ویژگی های مربوط به اون آشنا بوده باشید، نام تعدادی از این موارد با هم فرق داره و مشابه نیستند. نکات زیر رو مدنظر قرار بدین:

  • بجای animation-timing-function که درون CSS استفاده میشه، اینجا از easing استفاده میکنیم. میبینید که کوتاهتر هست و سریعتر میتونین با اون کار کنید.
  • بجای animation-iteration-count که درون CSS استفاده میشه، اینجا از iterations استفاده میکینم. اگر بخوایم انیمیشن مورد نظر بینهایت بار اجرا بشه، درون CSS از infinite استفاده میشه ولی در اینجا از Infinity مورد استفاده قرار میگیره. نکته ای هم که باید در نظر بگیرید اینه که نیازی به کوتیشن یا " برای Infinity ندارید. بدلیل اینکه Infinity در Javascript یک کلمه کلیدی از پیش تعریف شده هست و معنای بینهایت رو میده.
  • درون CSS زمان بر حسب ثانیه هست ولی در Javascript و Web Animation API ما از میلی ثانیه استفاده میکنیم. هر 1000 میلی ثانیه یک ثانیه محسوب می شود. میتونین درون CSS هم از میلی ثانیه استفاده کنید ولی خیلی متداول نیست و همه افراد این کار رو انجام نمیدن.

خب حالا میخوایم ویژگی iterationStart رو بیشتر بررسی کنیم و ببینیم که دقیقا چه کاری رو انجام میده. این ویژگی زمانی مفید واقع میشه که شما بجای عدد صحیح از یک عدد اعشاری استفاده کنید. برای مثال شما میتونین مقدار این ویژگی رو برابر با 0.5 قرار بدین و با اینکار انیمیشن مورد نظر شما از نیمه راه شروع میشه. اگر مقدار iterations رو برابر با 1 قرار بدین و مقدار iterationStart رو برابر با 0.5 قرار بدین، انیمیشن شما از نیمه شروع میشه و به پایان میرسه و از شروع تا نیمه نیز ادامه خواهد داشت. کد این حالت بصورت زیر هست:

علاوه بر این حالت میتونین تنظیمات زیر رو نیز قرار بدین:

با اینکار انیمیش از نیمه راه شروع میشه و تا آخر ادامه پیدا میکنه.

ویژگی endDelay زمانی مفید واقع میشه که شما قصد داشته باشید چند انیمیشن رو پشت سر هم قرار بدین و بخواید که بین هر کدام تاخیر و وقفه به وجود بیارید.

نکات مربوط به Easing:

Easing نقش خیلی مهمی درون انیمیشنها بر عهده دارد. Web Animation API دو راه مختلف برای استفاده از Easing رو بهمون پیشنهاد میکنه. راه اول استفاده از Easing درون Options هست و راه دیگر، استفاده از Easing درون آرایه Keyframes هست. در CSS زمانی که برای ویژگی animation-timing-function مقدار ease-in-out رو قرار میدین، ممکنه تصویر کنید که ابتدای انیمیشن شما با ease in شروع میشه و انتهای انیمیشن با ease out به پایان میرسه. در واقع Easing ها بین keyframe یا فریم ها قرار میگیره و برای کل انیمیشن تعریف نمیشه. راه اولی که برای تعریف easing در Web Animation API وجود داره که برای هر فریم به صورت جداگانه مقدار Easing رو مشخص کنیم، بصورت زیر:

میبینید که 3 فریم داریم و برای رفتن از فریم 1 به 2 از حالت ease-in و برای رفتن از حالت 2 به 3 از حالت ease-out استفاده کردیم. چه در CSS و چه در WAAPI شما نمیتونین برای فریم آخر Easing رو مشخص کنید و این کار اشتباهی هست. به دلیل اینکه بعد از فریم آخر دیگه فریمی وجود نداره که بخواید حالت تغییر به فریم بعد رو مشخص کنید.

گاهی اوقات بهتره که یک Easing رو به کل انیمیشن اعمال کنیم. اینکار درون CSS امکان پذیر نیست ولی به لطف Web Animation API میتونیم این کار رو انجام بدیم. برای اینکار میتونین از ویژگی easing موجود در شئ options استفاده کنید. بصورت زیر:

شما میتونین تفاوت این دو نمونه انیمیشن رو در دموی زیر مشاهده کنید: میبینید که دو حالت مربوط به Easing چه تفاوتهایی با یکدیگر دارند.

در جلسه بعد با ادامه این مبحث در خدمتتون هستیم.

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

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

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.