مولد بيزير مكعب

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

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

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

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