تتحكم دوال التوقيت في متصفحات الويب بطريقة توزيع سرعة العناصر أثناء الانتقالات والحركات الفيزيائية. تتيح أداة "CSS مولد بيزير مكعب" تصميم هذه المنحنيات بصرياً وتوليد الكود المصدري اللازم لتطبيقها مباشرة في مشاريع تصميم وتطوير المواقع.
آلية عمل منحنيات بيزير المكعبة في CSS
يمتد منحنى بيزير المكعب في واجهة الأداة من الزاوية اليسرى السفلية التي تمثل نقطة البداية، إلى الزاوية اليمنى العلوية التي تمثل نقطة النهاية. يمثل المحور الأفقي عامل الزمن الذي يتقدم من اليسار إلى اليمين، بينما يمثل المحور الرأسي نسبة تقدم الحركة والتي ترتفع من الأسفل إلى الأعلى.
يتم تشكيل المنحنى بواسطة نقطتي تحكم رئيسيتين:
- نقطة التحكم الأولى: تحدد إحداثياتها مسار الجزء الأول من الحركة.
- نقطة التحكم الثانية: تحدد إحداثياتها مسار الجزء الأخير من الحركة.
تتخذ الدالة الرياضية الصيغة cubic-bezier(x1, y1, x2, y2)، حيث تمثل القيمتان الأولى والثانية إحداثيات نقطة التحكم الأولى، بينما تمثل القيمتان الثالثة والرابعة إحداثيات نقطة التحكم الثانية.
مدخلات الأداة وقواعد التحكم في النقاط
تتيح الأداة ضبط المنحنى عبر طريقتين أساسيتين: السحب المباشر للمقابض في مساحة الرسم، أو إدخال القيم الرقمية في الحقول المخصصة. تخضع هذه المدخلات لمجموعة من القواعد الرياضية والبرمجية الصارمة لضمان توافقها مع معايير CSS:
- القيم الخاصة بالمحور الأفقي (X): تقتصر قيم الإحداثي X لنقطتي التحكم الأولى والثانية على نطاق محدد بين
0و1. لا يمكن للزمن أن يعود إلى الوراء أو يتجاوز المدة الإجمالية للحركة. - القيم الخاصة بالمحور الرأسي (Y): يمكن لقيم الإحداثي Y لنقطتي التحكم الأولى والثانية أن تتجاوز النطاق الافتراضي، حيث يسمح النظام بإدخال قيم تتراوح بين
-0.70و1.70. يتيح هذا التجاوز صعوداً أو هبوطاً إنشاء تأثيرات الارتداد والتراجع.
تتعامل الأداة مع الأخطاء وإدخال القيم غير الصالحة وفق القواعد التالية:
- إذا تم إدخال قيمة خارج النطاق المسموح به للمحور الأفقي (مثل كتابة الرقم
9في حقل الإحداثي X لنقطة التحكم الأولى) ثم فقد الحقل التركيز، فإن القيمة تتحول تلقائياً إلى الحد الأقصى وهو1. - عند مسح الحقل الرقمي بالكامل وفقدان التركيز، تعيد الأداة تلقائياً القيمة الصالحة السابقة التي كانت مستخدمة.
- تنتظر الحقول الفارغة أو المدخلات غير الرقمية كتابة قيمة رقمية كاملة وصحيحة قبل تطبيقها.
- يمكن تعديل موضع المقابض بدقة باستخدام لوحة المفاتيح؛ حيث يؤدي الضغط على مفتاح السهم الأيسر أثناء التركيز على مقبض التحكم إلى تقليل قيمته بدقة (لتصبح
0.99على سبيل المثال).
مخرجات الأداة ومعاينة الحركة
تقدم الأداة نظام معاينة تفاعلياً فورياً يوضح تأثير المنحنى المصمم مقارنة بالحركة الافتراضية:
- المنحنى الخاص بك: تمثيل بصري تفاعلي يوضح شكل منحنى التسارع الحالي.
- نقاط المعاينة: تتحرك نقطة على طول المنحنى المصمم لتوضيح تأثير التسارع والتباطؤ، وبجوارها تماماً تتحرك نقطة أخرى بسرعة ثابتة (خطية) للمقارنة البصرية.
- قيمة cubic-bezier(x1, y1, x2, y2): الكود البرمجي الجاهز للاستخدام في ملفات الأنماط.
- حالة النسخ: عند نسخ الكود، تظهر عبارة تأكيد تشير إلى إتمام العملية بنجاح دون وجود رسائل رفض أو فشل.
توفر الأداة أيضاً مجموعة من الإعدادات المسبقة الجاهزة التي تمثل الكلمات المفتاحية القياسية في CSS مثل "ease" و"ease-in" و"ease-out" و"ease-in-out"، بالإضافة إلى تأثيرات متقدمة مثل "العودة للداخل" و"التراجع" و"العودة إلى الداخل". على سبيل المثال، يؤدي اختيار الإعداد المسبق "التراجع" إلى ضبط المنحنى تلقائياً على القيمة cubic-bezier(0.34, 1.56, 0.64, 1).
معالجة البيانات والخصوصية
تتم جميع العمليات الحسابية ورسم المنحنيات وتحديث المعاينة مباشرة داخل متصفح الويب الخاص بالمستخدم. لا يتم إرسال أو تحميل أي بيانات أو قيم يتم تعيينها داخل الأداة إلى خوادم BroBroGo، مما يضمن بقاء العمل محلياً بالكامل على جهازك.
الأسئلة الشائعة
ماذا يعني المقبضان والأرقام الأربعة؟
يمتد المنحنى من أسفل اليسار (البداية) إلى أعلى اليمين (النهاية)، ويتقدم الزمن من اليسار إلى اليمين بينما يرتفع التقدم إلى أعلى. المقبضان هما نقطتا التحكم اللتان تثنيان المنحنى — ولكل منهما X وY، فتكون الصيغة معًا cubic-bezier(x1, y1, x2, y2). تبقى X بين 0 و1، بينما يمكن أن تتجاوز Y الحد العلوي أو السفلي لجعل الحركة تتخطى الهدف أو تتراجع قبل أن تستقر.
كيف يمكنني استخدام القيمة في CSS الخاص بي؟
انسخ الدالة cubic-bezier() وضعها في أي موضع يقبل دالة توقيت، مثل transition-timing-function أو animation-timing-function أو الصيغة المختصرة؛ مثال: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). الكلمات المفتاحية ease وease-in وease-out وease-in-out ليست سوى منحنيات cubic-bezier ثابتة، لذا يعرض اختيار أحد هذه الإعدادات المسبقة القيمة الدقيقة المقابلة للكلمة المفتاحية.
هل يمكن أن يحدث تأثيرًا مرتدًا أو مرنًا؟
ليس بمفرده. يمكن لمنحنى cubic-bezier واحد أن يهيئ للحركة ويتجاوز الهدف — إذ تسحب إعدادات «الرجوع» المسبقة أحد المقبضين خارج الصندوق لهذا الغرض — لكنه لا يستطيع سوى التحرك في اتجاه واحد ثم الاستقرار. أما تأثيرا الارتداد والمرونة فيعكسان الاتجاه عدة مرات، وهو ما لا يستطيع منحنى cubic-bezier واحد التعبير عنه؛ بل يتطلبان إطارات CSS مفتاحية أو الدالة linear() ذات نقاط التوقف المتعددة.