آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

0 270 ۲۰ دی ۹۵

در این مطلب با ادامه نکاتی کاربردی در مورد 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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :