مولّد منحنى Cubic Bezier للحركة
مولّد منحنى Cubic Bezier يتيح لك سحب نقطتي التحكم لتصميم منحنى تسارع مخصص للحركة (Easing) مع معاينة حية لكرة متحركة تُظهر تأثير المنحنى فعليًا، بالإضافة إلى قوالب جاهزة شائعة (Ease, Ease In, Ease Out, Material Standard)، ثم نسخ كود cubic-bezier الجاهز.
تتم كل المعالجة داخل جهازك ولا يُرسل أي شيء لأي خادم.
اسحب النقطتين لتعديل منحنى الحركة
قوالب جاهزة
كود CSS
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
ما الذي تفعله هذه الأداة
تبني منحنى تسارع للحركات في CSS بسحب نقطتي التحكم، مع إعدادات جاهزة للمنحنيات الشائعة، وتعطيك شيفرة جاهزة.
متى تستخدمها
- حركة في واجهة تبدو آلية وتريدها أكثر طبيعية.
- تطابق إحساس الحركة مع نظام تصميم معيّن.
- تفهم أثر منحنى التسارع على الحركة عمليًا.
- تضبط حركة دخول وخروج بإحساسين مختلفين.
طريقة الاستخدام
- اختر من «الإعدادات الجاهزة» كنقطة بداية.
- اسحب أيًّا من النقطتين لتشكيل منحنى التسارع.
- انسخ «شيفرة CSS».
مثال عملي
المُدخَل
منحنى يبدأ بطيئًا وينتهي سريعًا.
الناتج
شيفرة cubic-bezier تعطي الحركة إحساس التسارع التدريجي بدل السرعة الثابتة.
حدود الأداة
- منحنى التسارع يؤثر على إحساس الحركة لا على مدتها؛ المدة تُضبط منفصلة.
- المنحنيات المبالغ فيها تُنتج حركة تبدو مضطربة؛ الإعدادات الجاهزة نقطة انطلاق آمنة.
- بعض المنحنيات تتجاوز حدود القيمتين فتُنتج ارتدادًا، وهو مقصود أحيانًا وغير مرغوب أحيانًا أخرى.
الخصوصية والمعالجة
المنحنى يُحسب على جهازك ولا يُرسل شيء.
ملاحظات تقنية
- السحب المباشر على المنحنى هو الفارق العملي: قيم cubic-bezier الأربع يصعب تخيّل أثرها دون رؤيتها مرسومة.
الأسئلة الشائعة
لا، هذا الإصدار يقتصر على النطاق 0-1 لكلا المحورين لتبسيط أداة السحب، وهذا يغطي أغلب منحنيات التسارع الشائعة (Ease In/Out وMaterial Design)، لكنه لا يدعم تأثيرات الارتداد أو التجاوز (Bounce/Overshoot).