كيف أنشئ منحنى تسارع cubic-bezier مخصصاً لـ CSS؟

اسحب مقبضي نقطتي التحكم على الرسم البياني، أو اكتب قيم x1, y1, x2, y2 بالضبط، أو اختر إعداداً مسبقاً. ثم اختر CSS ضمن "تنسيق الإخراج" واضغط "نسخ" لتحصل على قيمة cubic-bezier() لخاصية transition-timing-function.

كيف أصنع تأثير ارتداد أو تجاوز باستخدام cubic-bezier؟

اسحب مقبضاً فوق أو تحت الصندوق بحيث تتجاوز قيمة Y النطاق 0-1. يمكن لـ Y تجاوز هذا النطاق، بينما تبقى X بين 0 و 1. الإعدادان المسبقان back-out و anticipate هما نقطتا بداية جاهزتان للتجاوز.

هل يمكنني الحصول على التسارع لـ Tailwind أو Framer Motion أو anime.js؟

نعم. تبويبات تنسيق الإخراج هي CSS و Tailwind و Framer Motion و anime.js. جميعها تُنسق الأرقام الأربعة نفسها، لذا اختر تبويباً واضغط "نسخ" لوضع المقتطف في حافظتك.

كيف أحمل قيمة cubic-bezier موجودة لتعديلها؟

الصق قيمة مثل cubic-bezier(.17, .67, .83, .67) في مربع الاستيراد وانقر على Load. إذا تعذّرت قراءة أربعة أرقام تظهر رسالة خطأ. كما يُخزَّن المنحنى في عنوان URL للصفحة بعد علامة #، فيمكن مشاركته.

لماذا تبدو المعاينة أبطأ من انتقالاتي الحقيقية؟

تستخدم "معاينة الحركة" إعداداً للمدة يمكنك تغييره، والافتراضيات أبطأ لتتمكن من دراسة المنحنى. اختصر المدة، ثم استخدم "إعادة" لرؤية الحركة بالسرعة التي تنوي استخدامها.

هل هو مجاني فعلًا؟

نعم. كل أداة مجانية الاستخدام، بدون حساب وبدون بطاقة ائتمان. العمل يجري على جهازك بدلاً من خوادمنا، وهذا ما يبقيها مجانية التشغيل.

هل يعمل على الجوال؟

نعم. يعمل في متصفحات الجوال الحديثة على iOS وأندرويد دون تثبيت أي شيء.

📈

مولّد منحنيات التسارع CSS Cubic-Bezier مجانًا

صمّم منحنيات التسارع في CSS بسحب نقاط التحكم، وعاين الحركة مباشرة، وانسخ قيمة cubic-bezier(). يتضمن إعدادات مسبقة للتجاوز/الارتداد.

يعمل في المتصفح الخاص بكبلا اشتراك، بلا نوافذ منبثقةلا يلزم تسجيل الدخولمجاني للأبد

يعمل دون اتصال بعد التحميل

اسحب المقبضين الفيروزي والوردي لتشكيل المنحنى

نقاط التحكم

x1y1x2y2

معاينة الحركة

المدة1.6 ث

انتقال العرض

قيمة CSS

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

الإعدادات المسبقة

يمكن للمقابض الوردي والفيروزي السحب للأعلى أو الأسفل خارج الصندوق (Y خارج النطاق 0-1) لإنشاء تأثيرات 'تجاوز' / ارتداد مثل back-out وanticipate. يبقى X ضمن 0-1 (لا يمكن عكس الزمن).

الاستخدامات الشائعة

إبطاء انتقال CSS مخصصتصميم إبطاء بالشعور الطبيعي لتأثيرات الحوم والقوائم والانتقالات UI.
الرسوم المتحركة الارتداد والإفراطقم بإنشاء حركة الينابيع / الارتداد المرحة عن طريق سحب نقاط التحكم في الصندوق.
إبطاء رسوم @keyframesاختر وظيفة animation-timing الصحيحة لرسوم CSS keyframe.
قيم Easing لمكتبات رسوم JSاحصل على قيم cubic-bezier لـ GSAP و Framer Motion و anime.js والمزيد.
افهم كيف يعمل الإبطاءانظر العلاقة بين منحنى بيزير والحركة التي تنتجها.

كيف يعمل

بُني المحرر بالكامل في المتصفح باستخدام حالة React وSVG — لا مكتبة تتولى حسابات المنحنى. تحدد نقطتا تحكم قابلتان للسحب مسار Bezier تكعيبيًا بـ SVG، ويشغّل محرك حركة CSS في المتصفح معاينة الحركة بحقن قيمة cubic-bezier() الناتجة مباشرة في قاعدة @keyframes.

1
اسحب نقاط التحكم أو اكتبها
يوجد مقبضان (P1 بالأخضر المزرق، وP2 بالوردي) على لوحة SVG. يستخدم السحب Pointer Events API مع setPointerCapture فيتبع المقبض إصبعك أو المؤشر حتى خارج حدود SVG. ويمكنك أيضًا تحريك المقابض بمفاتيح الأسهم أو كتابة قيم دقيقة في حقول x1/y1/x2/y2 الرقمية.
2
SVG يرسم المنحنى في الوقت الفعلي
المنحنى عنصر SVG <path> واحد يُعاد حساب أمره C (Bezier تكعيبي) من إحداثيات نقاط التحكم الأربع عند كل تحديث للحالة. لا canvas ولا مكتبة خارجية — يرسم مُعرِض SVG في المتصفح المسار مباشرة.
3
محرك CSS في المتصفح يعاين التسهيل
تعمل ثلاث حركات مباشرة (نقطة منزلقة، وانتقال في العرض، وتحجيم) بـ CSS @keyframes مع حقن قيمة cubic-bezier() مضمّنة. يفسّر محرك الحركة في المتصفح المنحنى نفسه، فما تراه هو بالضبط ما سينتجه CSS في بيئة الإنتاج.
4
انسخ المقتطف بصياغة إطار عملك
تنسّق التبويبات الأرقام الأربعة نفسها كـ CSS transition-timing-function، أو صنف Tailwind ذي قيمة اعتباطية، أو مصفوفة ease في Framer Motion، أو سلسلة easing في anime.js. يُكتب المقتطف إلى الحافظة بـ navigator.clipboard. كما يُرمَّز المنحنى في جزء الرابط (#b=x1,y1,x2,y2) لتتمكن من مشاركته أو حفظه.