نکاتی کاربردی در مورد CSS (جلسه 17) : نکاتی در مورد Animation iteration

- visibility ۰ mode_comment

در این مطلب با ادامه نکاتی کاربردی در مورد CSS در خدمتتون هستیم. css-style

تکرار انیمیشن میتونه مقدار کسری رو هم قبول کنه

زمانی که از انیمیشنها درون CSS استفاده میکنید، ویژگی بنام animation-iteration-count وجود داره که به احتمال زیاد با اون زیاد کار کردید. با استفاده از این ویژگی میتونین مشخص کنید که انیمیشنی که ساختید چند بار تکرار و نمایش داده بشه. مثلا اگر بخوایم انیمیشنی 3 بار نمایش داده بشه، بصورت زیر عمل میکنیم:

همونطور که دیدید عدد صحیح 3 رو قرار دادیم و با این کار مشخص کردیم که انیمیشن ما سه بار بصورت کامل نمایش داده بشه. اما به احتمال زیاد شما خبر نداشتید که میتونین بجای عدد صحیح از اعداد کسری هم برای این ویژگی استفاده کنید. مثال زیر رو در نظر بگیرید:

میبینید که مقدار این ویژگی رو برابر با 0.5 قرار دادیم. با اینکار انیمیشن فقط تا نیمه راه انجام میشه و کامل نخواهد شد. بیاید یک نمونه و دمو رو با هم دیگه مشاهده کنیم که در اون دو دایره قرار گرفته. دایره بالایی 1 بار بصورت کامل اجرا میشه و دایره پایین 0.5 بار اجرا میشه و انیمیشن اون نصفه کاره میمونه. مشاهده کنید: همونطور که دیدید زمانی که بر روی دکمه Animate کلیک میکنیم، دو توپ شروع به حرکت میکنن. توپ اول تا انتها میره ولی توپ دوم وسط راه متوقف میشه. چیزی که جالبه و باید به اون توجه داشته باشید اینه که iteration duration بر پایه مقدار اون ویژگی که انیمیشنی میشه، نیست. به بیان دیگر اگر شما چیزی رو 100 پیکسل بصورت انیمیشنی در بیارید، نیمه اون الزاما نقطه 50 پیکسل نیست. برای مثال انیمیشن قبلی از timing function خطی یا linear استفاده کرده. بخاطر همین نیمه راه اون همون وسطه وسط میشه. ولی اگر بجای تابع خطی از توابع دیگر استفاده کنیم، این موضوع فرق میکنه. اگر از Ease استفاده کنیم، بصورت زیر خواهد شد: همونطور که دیدید این بار دایره دوم در وسط راه متوقف نشد و این بخاطر تفاوت در timing function اونا هست. اگر شما درک خوبی از توابع زمانی داشته باشید، میدونید که اگر از ease-in-out استفاده کنیم، دوباره نیمه انیمیشن مانند linear خواهد شد. شما میتونین همه توابع زمانی رو با اعداد کسری مختلف امتحان کرده و خروجی اونا رو بررسی کنید.

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

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

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

یا علی

Source

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

نیاز به لاگین

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