<timing-function>

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

فرض کنید می خواهید شیئی را از نقطه A به نقطه B انتقال دهید, این عمل می تواند در طول مدت دو ثانیه با یک سرعت ثابت و خطی انجام شود و یا این انتقال در ثانیه اول با یک سرعت زیاد انجام شود و در ثانیه دوم سرعت به مرور کم شود تا شی به نقطه B برسد.

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

 

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

• ()steps
• ()cubic-bezier
• کلمات کلیدی

 

()steps

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

نشانه گر را بر روی مثال زیر قرار دهید تا تغییرات را ببینید:

 

See the Pen steps() by Mojtaba Seyedi (@seyedi) on CodePen.

 

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

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

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

از دیدگاه دیگر قرار است که مربع زمانی که در حالت hover: قرار می گیرد 600 پیکسل به سمت راست حرکت کند با شکستن ترنیزشن به 6 قدم پس در هر قدم مربع 100 پیکسل تغییر مکان خواهد داشت.

مثال زیر از شخصی به نام Simurai انگیزه استفاده از اینگونه توابع را بیشتر می کند:

 

See the Pen Steps Animation by Mojtaba Seyedi (@seyedi) on CodePen.

 

می توانید دموی اصلی این کار را در این آدرس مشاهده کنید و با تغییر مدت زمان انیمیشن و نمایش تصویر اصلی, بررسی دقیقتری داشته باشید.

 

()cubic-bezier

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

این نوع منحنی با استفاده از چهار نقطه کنترلی (p0….p3) ساخته می شود.

 

 

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

 

 

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

 

cubic-bezier(x1, y1, x2, y2)

 

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

• cubic-bezier
• CSS cubic-bezier Builder
• Ceaser
• easings.net

در مثال زیر مختصات محور Y برای یکی از نقاط کمکی بیشتر از 1 در نظر گرفته شده است که در نتیجه تقریبا افکت bouncing خواهیم داشت.

 

See the Pen cubic-bezier() by Mojtaba Seyedi (@seyedi) on CodePen.

 

 

کلمات کلیدی

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

transition-timing-function: ease;

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

transition-timing-function: linear;

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

 

transition-timing-function: ease-in;

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

 

transition-timing-function: ease-out;

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

 

transition-timing-function: ease-in-out;

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

 

transition-timing-function: step-start;

تابع step-start معادل تابع steps(1, start) می باشد. این تابع باعث می شود تا ترنزیشن یا انیمیشن ناگهان به حالت آخر پرش داشته باشد و تا آخر زمان انیمیشن یا ترنزیشن در همان حالت بماند.

 

transition-timing-function: step-end;

تابع step-end معادل تابع steps(1, end) می باشد. این تابع باعث می شود تا ترنزیشن یا انیمیشن در حالت اولیه بماند تا زمان ترنزیشن یا انیمیشن به اتمام برسد و در آخر این زمان ناگهان به حالت آخر پرش می کند.

دموی زیر چند نمونه از این توابع را به نمایش گذاشته است با تغییر آنها به بررسی بیشتر این مطلب بپردازید:

 

See the Pen easing functions by Mojtaba Seyedi (@seyedi) on CodePen.

 

 

پشتیبانی مرورگرها

کروم +4, فایرفاکس +4, +IE 10, اپرا +10.5 و سافاری +3.1 و برای سیستم عامل اندروید +4 و +iOS 2

پشتیبانی تابع ()cubic-bezier با مقادیر خارج از محدوده 1 و 0 به صورت زیر است:

کروم +16, فایرفاکس +4, +IE 10, اپرا +12.5 و سافاری فقط ورژن Nightly و سیستم عامل اندروید +4 و iOS پشتیبانی نمی کند.

پشتیبانی تابع ()steps به صورت زیر است:

کروم +8, فایرفاکس +4, +IE 10, اپرا +12.1 و سافاری +5.1 و سیستم عامل اندروید +4 و +5 iOS.