عرض مصدر CSS/timing-function

<noinclude>{{DISPLAYTITLE:دوال التوقيت في CSS}}</noinclude>
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Transitions|{{SUBPAGENAME}}]]
[[تصنيف:CSS Data Type|{{SUBPAGENAME}}]]
نوع البيانات <code><timing-function></code> يشير إلى الدوال الرياضية التي تصف سرعة تغيير القيم أحادية البعد في الحركات، وهذا ما يسمح بتغيير سرعة الحركات خلال فترة الحركة.

دوال الحركة السلسة تُنشِئ علاقة نسبية بين الوقت والناتج، وتكون القيمتان رقميتين <code>[[CSS/number|<number>]]</code>، وتُمثِّل القيمة 0.0 الحالة الابتدائية والقيمة 1.0 الحالة النهائية.
[[ملف:Timing-function with output gt than 1.png|بديل=دالة توقيت لها مخرجات أكبر من 1.|بدون|تصغير|دالة توقيت لها مخرجات أكبر من 1.]]
[[ملف:Timing-function with output gt than 1 clipped.png|بديل=دالة توقيت لها مخرجات أكبر 1 لكنها مقصوصة.|بدون|تصغير|دالة توقيت لها مخرجات أكبر 1 لكنها مقصوصة.]]
اعتمادًا على الدالة المُستخدمة، قد يصبح الناتج في بعض الأحيان أكبر من 1.0 أو أصغر من 0.0 أثناء الحركة، مما يؤدي إلى زيادة مدى الحركة إلى أكثر من الحالة النهائية، وفي حال طُبِّق ذلك على خاصيات مثل <code>[[CSS/left|left]]</code> أو <code>[[CSS/right|right]]</code> فسيُنشَأ تأثير يشبه تأثير الارتداد (bouncing).

لكن بعض الخاصيات الأخرى لن تسمح بأن تزيد القيم عن مجالٍ معيّن، فمكوِّنات الألوان لا يجوز أن تتجاوز 255 أو تقل عن 0، وستُقرّب تلك القيم إلى أقرب قيمة مسموحة (أي 255 أو 0 على التوالي).

== دوال التوقيت ==
تدعم CSS نوعين من دوال التوقيت: النوع الأول ينحدر من منحنيات بيزير (Bézier curves)، النوع الثاني هو الدوال الدرجية (step functions). وأغلبية هذه الدوال أُعطيت كلمات محجوزة تسمح بالإشارة إليها بسهولة.

=== منحنيات بيزير ===
الدالة <code>cubic-bezier()‎</code> تُعرِّف [https://ar.wikipedia.org/wiki/%D9%85%D9%86%D8%AD%D9%86%D9%89_%D8%A8%D9%8A%D8%B2%D9%8A%D9%87 منحني بيزير] من الدرجة الثالثة، ولأن هذه المنحنيات مستمرة من البداية حتى النهاية فهي تُستعمَل عادةً لجعل بداية ونهاية الحركة سلسلةً (ولهذا تسمى هذه الدوال باسم easing functions).
[[ملف:Timing-function-cubic-bezier.png|بديل=مثال عن منحني بيزير.|بدون|تصغير|مثال عن منحني بيزير.]]
يُعرَّف منحني بيزير بأربع نقط هي P<sub>0</sub> و P<sub>1</sub> و P<sub>2</sub> و P<sub>3</sub>، والنقطتان P<sub>0</sub> و P<sub>3</sub> هما نقطتان بداية ونهاية المنحني، وستكون هاتان النقطتان ثابتتين في CSS لأنَّ إحداثيات النقط هي نسب مئوية (فمحور السينات x هو الزمن، ومحور العينات y هو مجال المخرجات)؛ أي أنَّ النقطة P<sub>0</sub> هي ‎‎<code>(0, 0)‎</code> دومًا وتُمثِّل الحالة الابتدائية، والنقطة P<sub>3</sub> هي ‎‎‎<code>(1, 1)‎‎</code> دومًا وتُمثِّل الزمن النهائي والحالة النهائية.

لا تكون جميع منحنيات بيزير صالحةً كدوال توقيت لأن بعضها لا يُمثِّل [https://ar.wikipedia.org/wiki/%D8%AF%D8%A7%D9%84%D8%A9 دالةً رياضيةً]، أي أنها تعطي قيمةً واحدةً على المحور y إذا مررنا لها قيمةً على المحور x.

ولمّا كانت النقطتان P<sub>0</sub> و P<sub>3</sub> ثابتتين في CSS، فيمكننا أن نعدّ منحنيات بيزير من الدرجة الثالثة على أنها دالة، وذلك إذا كانت قيمة النقطتين P<sub>1</sub> و P<sub>2</sub> ضمن المجال ‎<code>[0, 1]</code>‎. وإذا كانت إحداثيات النقطة P<sub>1</sub> أو P<sub>2</sub> على المحور y خارج المجال ‎<code>[0, 1]</code>‎ فقد تؤدي إلى توليد تأثير الارتداد (bouncing).

شكل هذه الدالة العام هو:<syntaxhighlight lang="css">
cubic-bezier(x1, y1, x2, y2)
</syntaxhighlight>حيث x1 و y1 و x2 و y2 هي إحداثيات x و y للنقطتين P<sub>1</sub> و P<sub>2</sub> التي تُعرِّف منحني بيزير، ويمكن أن تكون قيمة x1 و x2 ضمن المجال ‎<code>[0, 1]</code>‎. 

أمثلة عن استخدام الدالة <code>cubic-bezier()‎</code> في CSS، لاحظ أنَّ القيم السالبة مسموحة، وكذلك القيم الأكبر من 1 على محور y:<syntaxhighlight lang="css">
cubic-bezier(0.1, 0.7, 1.0, 0.1)   

cubic-bezier(0, 0, 1, 1)           

cubic-bezier(0.1, -0.6, 0.2, 0)    

cubic-bezier(0, 1.1, 0.8, 4)
</syntaxhighlight>هذه أمثلة غير صالحة للدالة <code>cubic-bezier()‎</code>، لاحظ أنَّه لا يجوز استخدم قيمة أكبر من 1 على المحور x، ويجب تعريف كلا النقطتين، ولا يجوز استخدام قيم سالبة على المحور x:<syntaxhighlight lang="css">
cubic-bezier(0.1, red, 1.0, green) 

cubic-bezier(2.45, 0.6, 4, 0.1)    

cubic-bezier(0.3, 2.1)   

cubic-bezier(-1.9, 0.3, -0.2, 2.1)
</syntaxhighlight>

=== الدوال الدرجية ===
الدالة <code>steps()‎</code> تُعرِّف دالةً درجيةً (step function) التي تُقسِّم مجال المخرجات إلى خطوات متساوية.

هنالك تصنيفٌ فرعيٌ للدوال الدرجية باسم الدوال السلّميّة (staircase functions).
[[ملف:Timing-function-steps(2,start).png|بديل=مثال عن استخدام الدالة steps.|بدون|تصغير|الدالة <code>steps(2, start)‎</code>]]
[[ملف:Timing-function-steps(4,end).png|بديل=مثال عن استخدام الدالة steps.|بدون|تصغير|الدالة <code>steps(2, start)‎</code>]]شكل هذه الدالة العام هو:<syntaxhighlight lang="css">
steps(number_of_steps, direction)

</syntaxhighlight>حيث <code>number_of_steps</code> هو عدد صحيح <code>[[CSS/integer|<integer>]]</code> موجب يُمثِّل عدد الخطوات المتساوية التي ستُشكِّلها الدالة الدرجية.

أما <code>direction</code> فهي كلمة محجوزة تُشير إلى أنها [[wikipedia:Continuous_function#Directional_and_semi-continuity|الدالة تستمر]] من اليمين أو من اليسار:
* الكلمة المحجوزة <code>start</code> تُشير إلى أنَّ الدالة مستمرة من اليسار، أي أنَّ الخطوة الأولى ستبدأ عند بدء الحركة.
* الكلمة المحجوزة <code>end</code> تُشير إلى أنَّ الدالة مستمر من اليمين، أي أنَّ الخطوة الأخيرة ستحدث عند نهاية الحركة. وهي القيمة الافتراضية لهذه الدالة.
أمثلة عن استخدام الدالة الدالة <code>steps()‎</code> في CSS، لاحظ أنَّ المعامل الثاني لهذه الدالة اختياريٌ:<syntaxhighlight lang="css">
steps(5, end)

steps(2, start)

steps(2)
</syntaxhighlight>أما الدوال الآتية فهي غير صالحة، إذا يجب أن يكون الوسيط عددًا صحيحًا موجبًا، ويجب أن نُعرِّف خطوةً واحدةً على الأقل:<syntaxhighlight lang="css">
steps(2.0, end)

steps(-3, start)

steps(0, end)
</syntaxhighlight>

=== كلمات محجوزة ===

==== <code>linear</code> ====
ستكون الحركة من البداية حتى النهاية على نفس الوتيرة، وهي تكافئ الدالة <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)‎</code>.
[[ملف:Timing-function-cubic-bezier,linear.png|بديل=الكلمة المحجوزة linear.|بدون|تصغير|الكلمة المحجوزة <code>linear</code>.]]

==== <code>ease</code> ====
ستبدأ الحركة ببطء، ثم تتسارع بحدة، ثم تتباطأ بالتدريج إلى النهاية، وهي تكافئ الدالة <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)‎</code>. هذه الكلمة المحجوزة شبيهة بالكلمة <code>[[#ease-in-out|ease-in-out]]</code> مع أنها تتسارع بحدة في البداية.
[[ملف:Timing-function-cubic-bezier,ease.png|بديل=الكلمة المحجوزة ease.|بدون|تصغير|الكلمة المحجوزة <code>ease</code>.]]

==== <code>ease-in</code> ====
ستبدأ الحركة ببطء، ثم تتسارع بالتدريج النهاية، وهي تكافئ الدالة <code>cubic-bezier(0.42, 0.0, 1.0, 1.0)‎</code>.
[[ملف:Timing-function-cubic-bezier,ease-in.png|بديل=الكلمة المحجوزة ease-in.|بدون|تصغير|الكلمة المحجوزة <code>ease-in</code>.]]

==== <code>ease-in-out</code> ====
ستبدأ الحركة ببطء، ثم تتسارع، ثم ستنتهي ببطء، وهي تكافئ الدالة <code>cubic-bezier(0.42, 0.0, 0.58, 1.0)‎</code>. وستسلك سلوك الكلمة المحجوزة <code>[[#ease-in|ease-in]]</code> في البداية، وستستلك سلوك الكلمة المحجوزة <code>[[#ease-out|ease-out]]</code> في النهاية.
[[ملف:Timing-function-cubic-bezier,ease-in-out.png|بديل=الكلمة المحجوزة ease-in-out.|بدون|تصغير|الكلمة المحجوزة <code>ease-in-out</code>.]]

==== <code>ease-out</code> ====
ستبدأ الحركة بسرعة، ثم ستنتهي ببطء، وهي تكافئ الدالة <code>cubic-bezier(0.0, 0.0, 0.58, 1.0)‎</code>.
[[ملف:Timing-function-cubic-bezer,ease-out.png|بديل=الكلمة المحجوزة ease-out.|بدون|تصغير|الكلمة المحجوزة <code>ease-out</code>.]]
==== <code>step-start</code> ====
ستنتقل الحركة إلى الحالة النهائية مباشرةً حتى نهاية مدة الحركة، وهي تكافئ الدالة <code>steps(1, start)‎</code>.
[[ملف:Timing-function-steps(1,start).png|بديل=الكلمة المحجوزة step-start.|بدون|تصغير|الكلمة المحجوزة <code>step-start</code>.]]

==== <code>step-end</code> ====
سيبقى العنصر في الحالة الابتدائية خلال مدة الحركة ثم سينتقل إلى الحالة النهائية مباشرةً، وهي تكافئ الدالة <code>steps(1, end)‎</code>.
[[ملف:Timing-function-steps(1,end).png|بديل=الكلمة المحجوزة step-end.|بدون|تصغير|الكلمة المحجوزة <code>step-end</code>.]]

== انظر أيضًا ==
* صفحة القيمة <code>[[CSS/number|number]]</code> التي تمثِّل القيم العددية، سواءً كانت أعدادًا صحيحةً (integer) أو أعدادًا عشريةً.

== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-animations/#animation-timing-function CSS Animations].
* مسودة [https://drafts.csswg.org/css-transitions/#transition-timing-function CSS Transitions].
[[تصنيف:CSS Animations|{{SUBPAGENAME}}]]