CSSبرنامه نویسی وب

آشنایی با timing-function در CSS

از ویژگی timing-function در سی اس اس برای تعیین سرعت تغییر ویژگی یک عنصر دارای transition , animation در گذر زمان, استفاده می شود.

این ویژگی timing-function در سی اس اس اجازه می دهد تا فرایند تغییر یک ویژگی بتواند سرعت های مختلفی در دوره زمانیش داشته باشد. به بیان ساده تر عملیات transition و animation می تواند با سرعت خیلی زیادی شروع شود و با یک سرعت آرام به اتمام برسد. اینگونه تنظیمات از طریق مقادیر این ویژگی قابل کنترل است. در مثال زیر transition به صورت خطی انجام می شود یعنی سرعت آن در تمام مدت اجرا یکسان است.

در مثال زیر ویژگی color دارای دوره زمانی 2s و transition-timing-function آن برابر ease و درنگ آن برابر 3 ثانیه می باشد و دیگر ویژگی ها هم به ترتیب به همین صورت مقادیرشان تعیین می شود.

مقادیر زیر برای این ویژگی مجاز هستند:

<timing-function> یک تابع ریاضیاتی است که سرعت یک شی که دارای انیمیشن یا ترنزیشن هست را در طول زمان مشخص می کند. این تابع نحوه پیشرفت ترنزیشن و یا انیمیشن را در یک چرخه دوره زمانیشان توصیف می کند.

این افزایش یا کاهش سرعت در انیمشن ها با ویژگی animation-timing-function و در ترنزیشن ها با ویژگی transition-timing-function قابل کنترل است.

این تابع می تواند به سه روش زیر تعریف شود:

()steps

()cubic-bezier

کلمات کلیدی

()steps

کار این تابع تقسیم زمان ترنزیشن و انیمیشن به فاصله های زمانی برابر می باشد. این تابع دو پارامتر می گیرد پارامتر اول یک عدد صحیح مثبت است که نشان دهنده تعداد تکه های زمانی است و پارامتر دوم یکی از کلمات start و end می باشد که تعیین می کند تغییرات در اول یک فاصله زمانی اتفاق بیفتد یا در آخر آن.

در مثال نخست, پارامتر این تابع عدد صحیح 6 می باشد این به این معنا است که ترنزیشن در 6 قدم انجام خواهد شد. زمان ترنزیشن برابر با 3 ثانیه می باشد: transition-duration: 3s; پس هر قدم برابر 0.5 ثانیه ( 6 ÷ 3 ) خواهد بود. حال با توجه به دومین پارامتر که کلمه start می باشد تغییر در شروع یک فاصله زمانی صورت می گیرد یعنی اولین حرکت در ثانیه 0 و دومین حرکت در ثانیه نیم خواهد بود. این در حالی است که دومین پارامتر مثال دوم کلمه end می باشد پس تغییرات در هر قدم در آخر یک فاصله زمانی انجام می گیرند و نه در اول آن. پس اولین تغییر را در ثانیه نیم و دومین را در ثانیه 1 خواهیم داشت. پس الان دلیل نیم ثانیه مکث مثال دوم را در اولین قدم, می دانیم.

()cubic-bezier

کار این تابع تعریف یک محنی بزیر می باشد. با استفاده از این تابع شما قادر خواهید بود تا timing function مخصوص به خود را بسازید و افکت هایی مثل افکت ورجه ورجه کردن (bouncing) را بوجود بیاورید.

در این منحنی نقطه شروع p0 و نقطه پایان p3 می باشد و p1 و p2 نقاط کمکی برای این دو نقطه می باشند. مختصات p0 همیشه برابر با (0,0) و p3 برابر (1,1) می باشد.
مختصات محور X نقاط p1 و p2 همیشه باید عددی بین 0 و 1 باشند. اعداد 0 و 1 نمایانگر نقاط شروع و پایان یک ترنزیشن و یا انیمیشن می باشند, پس در نتیجه هر عددی کوچکتر از صفر و بزرگتر از یک خارج از محدوده زمانی ترنزیشن یا انیمیشن می باشد پس آن عدد نامعتبر خواهد بود.

با توجه به مطالب بالا برای تعریف این تابع فقط با دو نقطه سروکار خواهید داشت که همان دو نقطه کمکی خواهند بود که به صورت زیر تعریف می شوند:

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

CSS cubic-bezier Builder

کلمات کلیدی

علاوه بر اینکه قادر به ساخت تابع زمانی خود با استفاده از دو تابع گفته شده هستید, CSS هم چند کلمه کلیدی را برای تعریف توابع زمانی خاصی پشتیبانی می کند که در زیر آمده اند:

تابع ease معادل تابع cubic-bezier(0.25, 0.1, 0.25, 1) می باشد. و این تابع مقدار پیشفرض ویژگی های animation-timing-function و transition-timing-function می باشد. پس اگر مقداری برای این دو ویژگی تعریف نشود انیمیشن یا ترنزیشن شما با تابع ease همراه خواهد بود.

تابع linear معادل تابع cubic-bezier(0, 0, 1, 1) می باشد. استفاده از این تابع باعث می شود که سرعت از اول تا آخر حرکت ثابت باشد.

تابع ease-in معادل تابع cubic-bezier(0.42, 0, 1, 1) می باشد. استفاده از این تابع باعث می شود که حرکت با سرعت آرامی شروع شود و کم کم شتاب بگیرد و به یک سرعت ثابت برسد و در نهایت با آن سرعت ثابت به اتمام برسد.

تابع ease-out معادل تابع cubic-bezier(0, 0, 0.58, 1) می باشد. استفاده از این تابع باعث می شود که حرکت با سرعت بالایی شروع شود و کم کم شتابش کم شود و به یک سرعت ثابت برسد و در نهایت با آن سرعت ثابت به اتمام برسد.

تابع ease-in-out معادل تابع cubic-bezier(0.42, 0, 0.58, 1) می باشد. این تابع ترکیب ease-in و ease-out می باشد به این معنا که حرکت با یک سرعت کم شروع می شود در وسط کار شتاب می گیرد و کم کم سرعتش کم می شود و با یک سرعت ثابت به پایان می رسد.

از این ویژگی timing-function در سی اس اس هم برای ترنزیشن ها و هم برای انیمیشن استفاده میشه برای ترنزیشن از (transition-timing-function) و برای انیمیشن از (animation-timing-function).

 

مثال برای ()cubic-bezier

[codepen_embed height=300 theme_id=3 slug_hash=’hlatn’ user=’bennettfeely’ default_tab=’html’ animations=’run’] See the Pen <a href=’http://codepen.io/bennettfeely/pen/hlatn’></a>
[/codepen_embed]

مثال برای ()Step

[codepen_embed height=300 theme_id=3 slug_hash=’tukwj’ user=’simurai’ default_tab=’html’ animations=’run’] See the Pen <a href=’http://codepen.io/simurai/pen/tukwj’></a>
[/codepen_embed]

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا