مولّد cubic-bezier لـ CSS

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

مولّد cubic-bezier لـ CSS هو محرّر مرئي مجاني لدوال التخفيف التي تستخدمها انتقالات CSS وحركاته، مصمَّم لمطوّري الواجهة الأمامية ومصممي الحركة. في وضع cubic-bezier تسحب نقطتي تحكم (أو تكتبهما) لتشكيل منحنى: تبقى قيم x ضمن النطاق القانوني 0–1، بينما يمكن أن تتجاوز قيم y الرقم 1 أو تنزل تحت 0 لإنشاء التجاوز (overshoot) والتمهيد (anticipation). ويغطّي وضع steps() التوقيت المتدرّج بعدد خطوات قابل للضبط ومصطلح قفزة — jump-start أو jump-end أو jump-none أو jump-both، حيث يعادل step-start و step-end القيمة steps(1, …). تعرض المعاينة الحيّة للحركة التخفيف الحالي على مربّع يتحرك ويتغيّر حجمه خلال مدة تحددها، ويمكنك تركيب أي إعداد مسبق كمنحنى شبح للمقارنة واستيراد سلسلة cubic-bezier() أو steps() موجودة. انسخ التصريح الدقيق لـ transition-timing-function أو animation-timing-function.

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

1. اختر من الأعلى وضع cubic-bezier() أو steps()، أو افتح الإعدادات للبدء من إعداد مسبق مثل ease أو ease-in-out أو linear.
2. في وضع cubic-bezier، اسحب المقبضين على الرسم أو اكتب قيمًا دقيقة لـ x1 و y1 و x2 و y2؛ وادفع y فوق 1 للحصول على تجاوز.
3. في وضع steps()، حدّد عدد الخطوات واختر مصطلح قفزة (jump-start أو jump-end أو jump-none أو jump-both) لرسم السُلّم.
4. اضغط تشغيل لتشغيل الحركة الحيّة على المربّع المتحرك المتغيّر الحجم، واضبط المدة بالثواني لتشعر بالإيقاع.
5. اختر منحنى مقارنة في الإعدادات لتركيب إعداد مسبق كشبح على الرسم نفسه، أو الصق قيمة في الاستيراد وطبّقها.
6. انسخ قيمة cubic-bezier() أو steps() المُولَّدة إلى 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.34, y1 1.56, x2 0.64, y2 1

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

وضع steps، N 4، jump-end

steps(4, jump-end)

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

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

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

ما فائدة وضع steps()؟

يقفز steps() بين عدد ثابت من القيم بدلًا من الاستيفاء السلس — مفيد لحركات السبرايت والعدّادات النقّارة والتأثيرات إطارًا بإطار. حدّد عدد الخطوات ومصطلح قفزة: jump-start أو jump-end أو jump-none أو jump-both. يعادل step-start القيمة steps(1, jump-start) ويعادل step-end القيمة steps(1, jump-end).

كيف تعمل معاينة الحركة الحيّة؟

اضغط تشغيل فيتحرك المربّع عبر المسار ويتغيّر حجمه باستخدام تخفيفك الحالي، مكررًا ذهابًا وإيابًا. غيّر المدة بالثواني لإبطائه أو تسريعه؛ يستخدم حركة CSS خالصة مع قيمة cubic-bezier() أو steps() كدالة توقيت.

هل يمكنني استيراد قيمة تخفيف موجودة؟

نعم. الصق قيمة cubic-bezier(...) أو steps(...) — أو كلمة مفتاحية مثل ease-in-out أو step-start أو step-end — في حقل الاستيراد وطبّقها؛ يحلّلها المحرّر من جديد إلى نقاط التحكم أو إعدادات الخطوات.

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

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