النقاط الرئيسية
- 01اسحب مقابض نقطتي التحكم لنحت منحنى التسهيل بصرياً بدلاً من تخمين القيم الرقمية.
- 02حركة كرة مباشرة تشغل الوقت حتى تتمكن من الشعور بالحركة قبل الالتزام بها.
- 03جميع presets CSS الخمسة المدمجة (ease و linear و ease-in و ease-out و ease-in-out) متاحة كنقاط انطلاق.
- 04قيمة cubic-bezier() تحدّث مباشرة بدقة عشرية واحدة، جاهزة للصق في أي خاصية CSS.
لماذا منحنيات التسهيل المخصصة مهمة لحركة الواجهة
وظائف توقيت CSS المدمجة — ease و ease-in-out و linear — تغطي الكثير من الأرضية، لكن كل واجهة لها لحظات حيث يبدو الافتراضي خاطئاً قليلاً. تلميح يظهر بسرعة كبيرة، وشكل مرئي يطير على الفتح، وشريط تقدم يبدو ميكانيكياً. منحنيات Cubic-bezier تسمح لك بضبط الحركة لتبدو طبيعية بدلاً من الميكانيكية، لكن الأرقام الأربعة في cubic-bezier(0.4, 0, 0.2, 1) يستحيل تقريباً فهمها مباشرة.
محرر cubic-bezier من Handytool يحول هذه الأرقام إلى منحنى مرئي بمقابض قابلة للسحب. حرك مقبض وحركة الكرة تشغل مباشرة، حتى تتمكن من التكرار بالشعور حتى تطابق الحركة نيتك. ثم انسخ القيمة والصقها في CSS — تم.
كيفية تصميم منحنى تسهيل CSS
- 01
ابدأ من preset
اختر ease أو linear أو ease-in أو ease-out أو ease-in-out كخط أساسي. تنقر المقابض إلى المواضع الصحيحة لكل preset.
- 02
اسحب مقابض نقطة التحكم
كل مقبض يتحكم في طرف واحد من المنحنى — مقبض البداية يشكل التسارع الأولي، مقبض النهاية يشكل التباطؤ النهائي. تحريك مقبض يبدل الإعدادات المسبقة إلى 'مخصص' تلقائياً.
- 03
شاهد حركة الكرة
كرة تتحرك من اليسار إلى اليمين باستخدام المنحنى الخاص بك. اضبط منزلق المدة لمعاينة انتقالات بطيئة مقابل سريعة.
- 04
جرب الإفراط في الإطلاق
اسحب مقبض Y-axis فوق 1 أو تحت 0 لإنشاء إفراط في الإطلاق والنقص — التأثير 'الكرة المرتدة' الذي يجعل القائمة تنفتح بقوة.
- 05
انسخ قيمة CSS
انقر على النسخ للحصول على سلسلة cubic-bezier() والصقها في transition-timing-function أو animation-timing-function في ورقة النمط.
يعمل بالكامل في متصفحك
المحرر هو أداة متصفح تحتوية على نفسها — لا خطوط ولا نصوص برمجية ولا بيانات تُحمل بعد فتح الصفحة. سحب المقابض ومعاينة الحركات يعمل بدون اتصال. صيغة cubic-bezier المستخدمة لكرة المعاينة هي نفس الصيغة المستخدمة من قبل المتصفحات لانتقالات CSS، حتى ما تراه في المحرر بالضبط ما ستنتجه ورقة النمط الخاصة بك.
لا يوجد شيء للتثبيت ولا شيء للتسجيل. المخرجات قيمة CSS واحدة — الصقها وانتهيت.
الأسئلة الشائعة حول محرر Cubic-Bezier
ما هو منحنى تسهيل cubic-bezier؟
إنه منحنى رياضي معرّف بنقطتي تحكم يحدد كيف يتسارع انتقال أو حركة CSS عبر الوقت. الأرقام الأربعة في cubic-bezier(x1, y1, x2, y2) تعيين مواضع تلك النقاط.
لماذا يمكن لقيم Y أن تتجاوز 1 أو تنخفض عن 0؟
قيم Y خارج 0–1 تنتج إفراط في الإطلاق والنقص — المنحنى يذهب بعد نقطة النهاية قبل الاستقرار. هذا يخلق منحنيات تسهيل 'مرتدة'. قيم X يجب أن تبقى في 0–1.
كيف أستخدم المخرجات؟
انسخ سلسلة cubic-bezier(...) والصقها في أي قيمة transition-timing-function أو animation-timing-function CSS. يعمل في كل متصفح حديث.
ماذا يعني ease-in-out بالفعل؟
Ease-in-out يبدأ ببطء، يتسارع في المنتصف، ويبطئ في النهاية — cubic-bezier(0.42, 0, 0.58, 1). إنه يعكس كيف يتسارع الأشياء الحقيقية ويتباطأ وهو الخيار الافتراضي لمعظم حركة الواجهة المصقولة.
هل معاينة حركة الكرة دقيقة إلى CSS؟
نعم — المعاينة تستخدم نفس صيغة cubic bezier التي تطبقها المتصفحات على انتقالات CSS. منزلق المدة يتيح لك الشعور بمنحنيات بطيئة مقابل سريعة قبل الالتزام.