مولّد Cubic-Bezier: أتقن منحنيات التوقيت في CSS

تعلّم كيف تعمل دالة cubic-bezier() للتوقيت في CSS، ومعنى الأرقام الأربعة، وكيف تصمّم منحنيات transition-timing-function مخصصة بمحرّر بصري مجاني.

الحركة هي ما يفصل بين واجهة تبدو حيّة وأخرى تبدو كشرائح عرض جامدة. والعنصر الأهم في الحركة الجيدة ليس المدة ولا المسافة، بل منحنى التوقيت (Easing). يصف منحنى التوقيت كيف تتسارع القيمة وتتباطأ عبر الزمن. الحركة الخطية تبدو آلية، أما الحركة المُصمّمة جيداً فتبدو فيزيائية ومقصودة وقريبة من الطبيعة. في CSS، أقوى طريقة للتعبير عن التوقيت هي دالة cubic-bezier()، وأسرع طريقة لبنائها هي عبر مولّد منحنيات cubic bezier — أي محرّر منحنيات التوقيت في CSS الذي يتيح لك سحب مقبضين ومشاهدة المنحنى يتحدّث لحظياً.

ما هو منحنى Cubic Bezier؟

يُعرَّف منحنى التوقيت من نوع cubic Bezier بأربعة أرقام: cubic-bezier(x1, y1, x2, y2). يبدأ المنحنى دائماً من النقطة (0، 0) وينتهي عند (1، 1). يمثّل المحور الأفقي الزمن من بداية الحركة إلى نهايتها، ويمثّل المحور الرأسي مقدار التقدّم — أي إلى أي مدى وصلت القيمة المتحركة. الزوجان من الإحداثيات هما نقطتا التحكم اللتان تثنيان الخط بين البداية والنهاية.

قيم x محصورة بين 0 و1 لأنه لا يمكنك التحرك إلى الخلف أو الأمام في الزمن. أما قيم y فيمكن أن تنزل تحت 0 أو ترتفع فوق 1، وهذا ما ينتج تأثيرات التجاوز والترقّب اللطيفة، حيث يقفز العنصر قليلاً متجاوزاً هدفه قبل أن يستقرّ — وهو أساس كل حركة «نطّاطة» رأيتها.

الكلمات المفتاحية الجاهزة في CSS مجرّد منحنيات Bezier

كل كلمة توقيت تعرفها مسبقاً تقابلها قيمة cubic-bezier محددة:

ease = cubic-bezier(0.25, 0.1, 0.25, 1) — الافتراضي في المتصفح
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) — بطء عند الطرفين

الكلمات المفتاحية مريحة لكنها مجموعة صغيرة جداً مما هو ممكن. القوة التعبيرية الحقيقية تأتي من المنحنيات المخصصة، وهنا تماماً يثبت محرّر منحنيات التوقيت البصري جدواه: بدل تخمين أربعة أرقام عشرية وإعادة تحميل الصفحة، تسحب مقبضاً فتستجيب الحركة فوراً.

كيف تستخدم محرّر منحنيات التوقيت Cubic-Bezier

يعمل مولّد cubic bezier لدينا بالكامل داخل متصفحك — لا يُرفع أي شيء، ويعمل دون اتصال بعد تحميله. وإليك طريقة العمل:

ابدأ من قالب جاهز. اختر ease أو ease-in-out أو غيرها للحصول على نقطة انطلاق منطقية.
اسحب المقبضين. يجذب كل منهما المنحنى نحو التسارع أو التباطؤ. اسحب المقبض أسفل الصندوق أو أعلاه لإنشاء تأثير التجاوز.
اضبط بدقة بالأرقام. تتيح لك الحقول الرقمية الأربعة كتابة قيم دقيقة عند الحاجة.
راقب المعاينة. تتحرك نقطة عبر المسار باستخدام منحناك فتشعر بالحركة لا أن تراها رياضياً فقط.
انسخ كود CSS. تُخرج الأداة تصريح transition-timing-function جاهزاً للصق.

أين تذهب المخرجات في كود CSS

تُدرَج القيمة المُولَّدة في خاصيتين. في الانتقالات (transitions):

.button {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

وفي الحركات (animations) عبر animation-timing-function:

.card {
  animation: slide-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

نصائح لاختيار توقيت جيد

استخدم ease-out لما يدخل الشاشة. العناصر الظاهرة يجب أن تتباطأ حتى تستقرّ — بداية سريعة تستقر بلطف تُقرأ كاستجابة واثقة.

استخدم ease-in لما يغادر. عند خروج العنصر يبدو التسارع بعيداً طبيعياً لأن المستخدم لم يعد بحاجة لتتبّعه.

احتفظ بتأثير التجاوز للحظات الشخصية. قليل من النطّ على مفتاح أو نافذة منبثقة لطيف، لكن التأثير نفسه على كل تفاعل صغير يصبح مرهقاً.

اجعل المدد صادقة. معظم حركات الواجهة يجب أن تقع بين 150 و400 مللي ثانية. المنحنى يشكّل الإحساس، والمدة تشكّل الإيقاع.

لماذا أداة المتصفح أفضل من حفظ الأرقام

لا أحد يستطيع أن يتخيّل إحساس cubic-bezier(0.68, -0.55, 0.27, 1.55) بمجرّد قراءته. الحركة شيء تحكم عليه بعينيك لا بحسابك. محرّر منحنيات التوقيت الحيّ يسدّ هذه الفجوة: تشكّل المنحنى، تشاهد المعاينة، وتنسخ النتيجة حين تشعر أنها صحيحة. جرّب محرّر منحنيات التوقيت Cubic-Bezier في المرة القادمة التي يبدو فيها الانتقال غير مريح — فتعديل المنحنى لخمس ثوانٍ غالباً يفعل أكثر من أي تغيير في المدة أو المسافة.