مولد CSS Cubic Bezier

مكعب Bezier الوثائق

ما هو منحنى Bezier المكعب؟

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

جملة CSS

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

الاستخدام

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

التيسير الشائعة

Ease (default)

تبدأ ببطء ، وتتسارع بسرعة ، ثم تتباطأ مرة أخرى.

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)

تلميحات لإنشاء منحنيات مخصصة يمكن

أن تتسبب القيم الموجودةخارج هذا النطاق في حدوث سلوك غير متوقع.
تصور المنحنى:استخدم الرسم البياني التفاعلي لفهم كيفية تأثير التغييرات على الرسوم المتحركة.
اختبر باستخدام عناصر حقيقية:قم دائما بمعاينة المنحنى الخاص بك باستخدام مكونات واجهة المستخدم الفعلية للتأكد من أنه يبدو صحيحا.
حفظ الإعدادات المسبقة:ضع إشارة مرجعية على المنحنيات المفيدة للمشاريع المستقبلية.