همونطور که دیدید در جلسه قبل توضیحاتی در مورد Web Animation API دادیم و تفاوتها و شباهت های اون رو با CSS Animation بررسی کردیم. در جلسه قبل گفتیم که میتونیم از تنظیمات متنوعی که وجود داره استفاده کنیم. این تنظیمات بصورت زیر بودند:
1 2 3 4 5 6 7 8 9 10 11 12 | var options = { iterations: Infinity, iterationStart: 0, delay: 0, endDelay: 0, direction: 'alternate', duration: 700, fill: 'forwards', easing: 'ease-out', } element.animate(keyframes, options); |
اگر به خوبی با CSS Animation و ویژگی های مربوط به اون آشنا بوده باشید، نام تعدادی از این موارد با هم فرق داره و مشابه نیستند. نکات زیر رو مدنظر قرار بدین:
خب حالا میخوایم ویژگی iterationStart رو بیشتر بررسی کنیم و ببینیم که دقیقا چه کاری رو انجام میده. این ویژگی زمانی مفید واقع میشه که شما بجای عدد صحیح از یک عدد اعشاری استفاده کنید. برای مثال شما میتونین مقدار این ویژگی رو برابر با 0.5 قرار بدین و با اینکار انیمیشن مورد نظر شما از نیمه راه شروع میشه. اگر مقدار iterations رو برابر با 1 قرار بدین و مقدار iterationStart رو برابر با 0.5 قرار بدین، انیمیشن شما از نیمه شروع میشه و به پایان میرسه و از شروع تا نیمه نیز ادامه خواهد داشت. کد این حالت بصورت زیر هست:
var option = { iterations: 1, iterationStart: 0.5 } |
علاوه بر این حالت میتونین تنظیمات زیر رو نیز قرار بدین:
var option = { iterations: .5, iterationStart: .5 } |
با اینکار انیمیش از نیمه راه شروع میشه و تا آخر ادامه پیدا میکنه.
ویژگی endDelay زمانی مفید واقع میشه که شما قصد داشته باشید چند انیمیشن رو پشت سر هم قرار بدین و بخواید که بین هر کدام تاخیر و وقفه به وجود بیارید.
نکات مربوط به Easing:
Easing نقش خیلی مهمی درون انیمیشنها بر عهده دارد. Web Animation API دو راه مختلف برای استفاده از Easing رو بهمون پیشنهاد میکنه. راه اول استفاده از Easing درون Options هست و راه دیگر، استفاده از Easing درون آرایه Keyframes هست. در CSS زمانی که برای ویژگی
مقدار ease-in-out رو قرار میدین، ممکنه تصویر کنید که ابتدای انیمیشن شما با ease in شروع میشه و انتهای انیمیشن با ease out به پایان میرسه. در واقع Easing ها بین keyframe یا فریم ها قرار میگیره و برای کل انیمیشن تعریف نمیشه. راه اولی که برای تعریف easing در Web Animation API وجود داره که برای هر فریم به صورت جداگانه مقدار Easing رو مشخص کنیم، بصورت زیر:var keyframes = [ { opacity: 0, easing: 'ease-in' }, { opacity: 0.5, easing: 'ease-out' }, { opacity: 1 } ] |
میبینید که 3 فریم داریم و برای رفتن از فریم 1 به 2 از حالت ease-in و برای رفتن از حالت 2 به 3 از حالت ease-out استفاده کردیم. چه در CSS و چه در WAAPI شما نمیتونین برای فریم آخر Easing رو مشخص کنید و این کار اشتباهی هست. به دلیل اینکه بعد از فریم آخر دیگه فریمی وجود نداره که بخواید حالت تغییر به فریم بعد رو مشخص کنید.
گاهی اوقات بهتره که یک Easing رو به کل انیمیشن اعمال کنیم. اینکار درون CSS امکان پذیر نیست ولی به لطف Web Animation API میتونیم این کار رو انجام بدیم. برای اینکار میتونین از ویژگی easing موجود در شئ options استفاده کنید. بصورت زیر:
var options = { duration: 1000, easing: 'ease-in-out', } |
شما میتونین تفاوت این دو نمونه انیمیشن رو در دموی زیر مشاهده کنید: میبینید که دو حالت مربوط به Easing چه تفاوتهایی با یکدیگر دارند.
در جلسه بعد با ادامه این مبحث در خدمتتون هستیم.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق و پیروز باشید.
یا علی
Source
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 228