مولّد cubic-bezier لـ CSS

ما هي مولّد cubic-bezier لـ CSS؟

مولّد cubic-bezier لـ CSS هو محرّر مرئي مجاني لدالة التوقيت cubic-bezier() التي تستخدمها انتقالات CSS وحركاته، مصمَّم لمطوّري الواجهة الأمامية ومصممي الحركة. اختر إعدادًا مسبقًا مثل ease أو linear أو ease-in أو ease-out أو ease-in-out، أو اضبط نقطتي التحكم بنفسك بدقة: تُقيَّد قيم x ضمن النطاق القانوني 0–1 بينما يمكن أن تتجاوز قيم y الرقم 1 أو تنزل تحت 0 لإنشاء التجاوز (overshoot) والتمهيد (anticipation). تَرسم المعاينة المنحنى على مربع وحدة لتقرأ التسارع والتباطؤ بلمحة واحدة، ويُنتَج التصريح الدقيق cubic-bezier(x1, y1, x2, y2) لتنسخه. استخدمه كلما بدت كلمة مفتاحية مدمجة عامة أكثر من اللازم وأردت حركة أكثر حيوية أو مرونة أو تأنّيًا.

كيفية استخدام مولّد cubic-bezier لـ CSS

1. افتح الإعدادات واختر إعدادًا مسبقًا للبداية — ease أو linear أو ease-in أو ease-out أو ease-in-out — لتهيئة نقاط التحكم.
2. اسحب المقبضين المستديرين على معاينة المنحنى لإعادة تشكيل التخفيف، أو اكتب قيمًا دقيقة في حقول x1 و y1 و x2 و y2.
3. أبقِ x1 و x2 بين 0 و 1؛ وادفع y1 أو y2 فوق 1 أو تحت 0 لإضافة تجاوز أو تمهيد إلى الحركة.
4. اقرأ المنحنى مقابل خط الأساس الخطي المنقّط لتقدير كيف يتسارع التخفيف ويتباطأ.
5. انسخ قيمة cubic-bezier() المُولَّدة والصقها في transition-timing-function أو animation-timing-function.

أمثلة

x1 0.25, y1 0.1, x2 0.25, y2 1

cubic-bezier(0.25, 0.1, 0.25, 1)

x1 0, y1 0, x2 0.58, y2 1

cubic-bezier(0, 0, 0.58, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

الأسئلة الشائعة

ماذا تعني أرقام cubic-bezier الأربعة؟

إنها إحداثيات نقطتي التحكم: x1 و y1 للنقطة الأولى و x2 و y2 للنقطة الثانية. يبدأ المنحنى دائمًا عند (0,0) وينتهي عند (1,1)؛ وتقوم نقاط التحكم بثنيه بينهما، وهو ما يتحكم في كيفية تسارع الخاصية المتحركة وتباطئها بمرور الوقت.

لماذا لا أستطيع تعيين x1 أو x2 فوق 1؟

تتطلب مواصفة CSS أن تبقى إحداثيات x (الزمن) لكلتا نقطتي التحكم بين 0 و 1، حتى تظل دالة التوقيت تطابقًا صالحًا من التقدّم إلى المُخرَج. تُقيّد هذه الأداة حقول x ومقابض السحب ضمن هذا النطاق تلقائيًا. أما قيم y فيمكن أن تتجاوز 1 أو تنزل تحت 0 لإنشاء تجاوز أو تمهيد.

كيف أصنع تخفيفًا نطّاطًا أو مرنًا؟

ادفع إحدى قيم y فوق 1 (لتجاوز في النهاية) أو تحت 0 (لتمهيد في البداية). على سبيل المثال، يتجاوز cubic-bezier(0.34, 1.56, 0.64, 1) الهدف قبل أن يستقر، مانحًا إحساسًا زنبركيًا دون أي JavaScript.

أين أستخدم القيمة المُولَّدة؟

الصقها كقيمة لـ transition-timing-function أو animation-timing-function — مثلًا transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). تحل محل كلمات مفتاحية مثل ease أو ease-in-out بمنحناك المخصص.

هل تُرسَل بياناتي إلى خادم؟

لا. يعمل المحرّر بالكامل في متصفحك عبر JavaScript — تُحسب نقاط التحكم والمنحنى محليًا ولا تُرفع أبدًا، لذا يعمل بخصوصية وحتى دون اتصال بمجرد تحميل الصفحة.