محرّر منحنيات cubic-bezier

كيفية استخدام محرّر cubic-bezier

1. اسحب المقبضين على الرسم البياني. تشكّل P1 (نقطة التحكم الأولى) بداية الحركة، وتشكّل P2 نهايتها. يمتد الزمن من اليسار إلى اليمين، والتقدّم من الأسفل إلى الأعلى.
2. أو اكتب قيمة في قيمة cubic-bezier()‎: صيغة كاملة مثل cubic-bezier(0.4, 0, 0.2, 1)، أو أربعة أرقام، أو كلمة مفتاحية مثل ease-in-out. وتعدّل الحقول x1 وy1 وx2 وy2 إحداثيًا واحدًا في كل مرة.
3. ابدأ من قائمة منحنيات جاهزة (كلمات CSS المفتاحية، والعائلات من Sine إلى Back، ومنحنيات Material Design) أو من أزرار الكلمات المفتاحية. وعندما يطابق منحناك منحنًى جاهزًا، يظهر اسمه بجانب الأزرار.
4. راقب معاينة الحركة: تقطع النقطة التي على منحناك والنقطة التي على المسار linear المسافة نفسها في المدة نفسها. استخدم إيقاف مؤقت وتشغيل وإعادة التشغيل للمقارنة بينهما.
5. انسخ النتيجة من دالة التوقيت في CSS، أو انسخ تقريب linear()‎ واختر عدد المقاطع.

لوحة المفاتيح: حدّد مقبضًا واستخدم مفاتيح الأسهم لتحريكه 0.01، أو 0.1 مع Shift.

إذا كان نظامك مضبوطًا على تقليل الحركة، تبدأ المعاينة متوقفة. اضغط تشغيل إذا أردت تشغيلها رغم ذلك.

ما معنى cubic-bezier()‎؟

دالة التسارع (easing) في CSS تربط الزمن المنقضي من الانتقال (من 0 إلى 1) بمقدار تقدّمه (من 0 إلى 1). وتصف cubic-bezier(x1, y1, x2, y2) هذا الربط بمنحنى بيزييه تكعيبي يبدأ من (0, 0) وينتهي عند (1, 1)، وتشدّه نقطتا تحكم هما P1 = (x1, y1) وP2 = (x2, y2).

• قيم x تمثّل الزمن، ويجب أن تبقى بين 0 و1، وإلا لما كانت الدالة منحنى توقيت صالحًا. ويُبقيها المحرّر ضمن هذا النطاق.
• قيم y تمثّل التقدّم، ويمكن أن تنزل تحت 0 أو تتجاوز 1. فقيمة y أكبر من 1 تجعل الحركة تتجاوز هدفها ثم تعود، مثل منحنيات Back، وقيمة أقل من 0 تجعلها تتحرك إلى الخلف أولًا.
• الميل الحاد يعني حركة سريعة، والميل المسطّح يعني حركة بطيئة. تبدأ ease-out سريعة وتنتهي بطيئة، وهذا يبدو طبيعيًا للعناصر التي تدخل الشاشة. أما ease-in فتفعل العكس وتناسب العناصر التي تغادرها.

كلمات CSS المفتاحية اختصارات: ease = cubic-bezier(0.25, 0.1, 0.25, 1)، وease-in = (0.42, 0, 1, 1)، وease-out = (0, 0, 0.58, 1)، وease-in-out = (0.42, 0, 0.58, 1)، وlinear = (0, 0, 1, 1).

تقريب linear()‎

تسرد الدالة الأحدث linear() قيم التقدّم عند أزمنة متباعدة بالتساوي، مثل linear(0, 0.25, 0.5, 0.75, 1)، وتصل بينها بخطوط مستقيمة. تأخذ الأداة عيّنات من منحناك (فتحلّ معادلة بيزييه لكل خطوة زمنية) وتكتب تلك القيم بثلاث منازل عشرية. ومع 20 إلى 40 مقطعًا تكون النتيجة مطابقة بصريًا للمنحنى. الفائدة الحقيقية من linear() هي للمنحنيات التي لا يستطيع بيزييه رسمها، كالارتدادات والنوابض، لكنها تتيح لك أيضًا استخدام صيغة واحدة. وهي تعمل في Chrome وEdge 113 فما فوق، وFirefox 112 فما فوق، وSafari 17.2 فما فوق، لذا احتفظ بقيمة cubic-bezier() بديلًا احتياطيًا.