طريقة الاستخدام
- اسحب نقطة التحكم 1 أو نقطة التحكم 2 على الرسم. انقر النقطة واستعمل مفاتيح الأسهم لخطوات صغيرة، واضغط Shift لخطوات أكبر.
- اكتب القيم الدقيقة في x1 (من 0 إلى 1) وy1 وx2 (من 0 إلى 1) وy2 حين تحتاج إلى منحنى دقيق. ويجب أن تبقى قيم x بين 0 و1.
- اضغط إعداداً مسبقاً مثل ease-in-out، أو اضغط تشغيل تحت معاينة الحركة لترى الكرة تتبع المنحنى.
- انسخ تعريف CSS واستعمله في انتقال أو حركة.
ماذا تعني الأرقام الأربعة
يبدأ منحنى التسارع من نوع Bézier التكعيبي عند (0, 0) وينتهي عند (1, 1). وتحدد نقطتاه للتحكم (x1, y1) و(x2, y2) شكله. وعلى المحور الأفقي تقع نسبة الزمن الذي مضى، وعلى المحور الرأسي نسبة التغير الذي تحقق. وتقصر مواصفة Easing Functions في CSS (باللغة الإنجليزية) قيم x لنقطتي التحكم على المدى من 0 إلى 1، لأن الزمن لا يسير إلى الوراء ولا يتجاوز نهايته.
لقيم y لا يوجد مثل هذا الحد. فقيمة y أكبر من 1 أو أصغر من 0 تجعل المنحنى يتجاوز الهدف، فيتجاوز التغيير نهايته ثم يعود، أو يبدأ بالتحرك في الاتجاه المعاكس.
cubic-bezier(x1, y1, x2, y2)، حيث تقع x1 وx2 بين 0 و1الإعدادات المسبقة والحركة
الكلمة ease هي cubic-bezier(0.25, 0.1, 0.25, 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)، كما تعطيها المواصفة. والتسارع linear خط مستقيم، وهو ما يرسمه المنحنى cubic-bezier(0, 0, 1, 1) أيضاً.
تسير الكرة على المنحنى كتوقيت لحركة، فترى التسارع حركةً. وإذا طلب جهازك تقليل الحركة، تبدأ المعاينة متوقفة، ويبدؤها زر تشغيل.
- استعمل منحنى لطيفاً مثل ease-out لعنصر يظهر في الصفحة، وease-in لعنصر يغادرها.
- اجعل الانتقال قصيراً، ليُحَسّ التسارع ولا يُنتظَر.
مثال محلول: التقدم عند نصف الزمن
منحنى ease-in-out، cubic-bezier(0.42, 0, 0.58, 1)، متماثل حول مركزه، فعند نصف الزمن يكون قد أنجز نصف التغير تماماً، وتعرض القراءة 0.5000.
منحنى ease، cubic-bezier(0.25, 0.1, 0.25, 1)، يكون أبعد من ذلك عند النقطة نفسها. فعند نصف الزمن أنجز 0.8024 من التغير، فيتحرك بسرعة في البداية ويتباطأ في النهاية.
الأسئلة الشائعة
ماذا تُظهر الكرة؟
تتحرك الكرة من الطرف الأيسر للمسار إلى الأيمن، ويتبع موضعها المنحنى: الموضع الأفقي هو نسبة التغيير المنجز حتى الآن. وحين يتجاوز المنحنى 1، تتجاوز الكرة طرف المسار وتُقصّ عنده.
لماذا لا تتجاوز قيم x الحدين 0 و1؟
المحور الأفقي هو الزمن، والمنحنى يغطي الزمن من البداية إلى النهاية. فلا مكان على المنحنى لزمن قبل البداية أو بعد النهاية، لذلك تُبقي المواصفة قيم x لنقطتي التحكم بين 0 و1. أما قيم y فلا حد لها.
ما الفرق بين ease-in وease-out؟
يبدأ ease-in ببطء ويتسارع نحو النهاية، أما ease-out فيبدأ بسرعة ويتباطأ عند النهاية. والمنحنيان صورتان متقابلتان، فيُقرأ التغيير نفسه بالعكس.
هل أستطيع استعمال القيمة في الحركة وفي الانتقال معاً؟
نعم. تعمل القيمة cubic-bezier() نفسها مع animation-timing-function ومع transition-timing-function، فيمكن استعمال التعريف في أي من المكانين.
هل يُحفظ ما أسحبه أو أكتبه أو يُرسل؟
لا. يُرسم المنحنى وتُعرض الحركة داخل متصفحك. لا يُخزَّن شيء ولا يُرسل إلى خادمنا، فانسخ التعريف قبل أن تغادر الصفحة.
المصادر
- W3C: CSS Easing Functions Level 1، دوال Bézier التكعيبية (باللغة الإنجليزية)
- MDN: transition-timing-function (باللغة الإنجليزية)
آخر مراجعة للأرقام والنص: الثلاثاء، 30 جمادى الأولى 1448 بعد الهجرة.