مولّد Cubic Bezier

كتابة cubic-bezier(x1, y1, x2, y2) يدويًا وإعادة تحميل الصفحة للتحقق من الإحساس هي طريقة بطيئة لضبط حركة. هذا المولّد يغلق تلك الحلقة: اسحب أيًا من مقابض نقطة التحكم على المنحنى، أو اكتب أرقامًا دقيقة في حقول x1/y1/x2/y2، وسيتحدّث المنحنى وسلسلة CSS القابلة للنسخ ومعاينة الحركة الحية مع كل تغيير — دون خطوة بناء، دون إعادة تحميل.

المحوران يعملان بشكل مختلف عن قصد. x1 وx2 يبقيان محصورين بين 0 و1، لأن هذا ما تطلبه مواصفات CSS فعليًا من دالة التوقيت cubic-bezier() — قيمة خارج هذا النطاق ببساطة غير صالحة. y1 وy2 ليس عليهما حد مماثل: اسحب مقبضًا فوق قمة الصندوق أو تحت قاعه، وسيتجاوز المنحنى بدايته أو نهايته، وهذه هي بالضبط طريقة بناء تأثيرات النابض والارتداد من منحنى تخفيف واحد.

رؤية رقم ليست مثل رؤية الحركة، لذا تشغّل المعاينة كرتين متطابقتين جنبًا إلى جنب في حلقة تكرارية: واحدة تتحرك باستخدام منحناك المخصص، والأخرى تتحرك بوتيرة خطية ثابتة بسيطة. مشاهدتهما تتسابقان هي أسرع طريقة لمعرفة ما إذا كان منحنى التخفيف ينتج الإحساس الذي تريده فعلًا، قبل أن يصل إلى أي ورقة أنماط. صفحات المسبقات — الأرقام الحقيقية وراء كلمة ease-in-out في CSS نفسها، وتقريب تجاوز صريح يسميه البعض ارتدادًا، ومنحنى Material Design القياسي المنشور من Google — هي نقاط بداية جاهزة يمكنك السحب منها بدلًا من نقاط تحكم فارغة.

كل شيء يعمل محليًا في متصفحك: لا رفع، لا حساب، لا رحلة ذهاب وإياب للخادم، ويستمر المولد في العمل دون اتصال بالإنترنت بعد تحميل الصفحة.