منحنى تخفيف CSS على غرار الارتداد
صمم دالة توقيت CSS cube-bezier() مخصصة عن طريق سحب نقطتي تحكم، ومعاينتها مباشرة مقابل مرجع خطي، ثم انسخ القيمة الجاهزة.
النتيجة
تفتح هذه الصفحة المولد مع x1=0.68، y1=-0.55، x2=0.265، y2=1.55 الذي تم تحميله بالفعل - منحنى التجاوز الذي تسميه بعض مكتبات التخفيف easyOutBack. إن y1 السالب و y2 أعلاه 1 هما بالضبط سبب تراجع معاينة الرسوم المتحركة أدناه إلى ما بعد بدايتها ونهايتها قبل الاستقرار؛ اسحب مقبض الأرقام أو قم بتحريرها لجعل التأثير أقوى أو ألطف.
لكي نكون صادقين بشأن ما هو هذا: يحتوي منحنى cube-bezier() الفردي على نقطتي تحكم فقط، لذا يمكنه تقريب حركة تجاوز وتسوية واحدة، وليس ارتدادًا ماديًا حقيقيًا متعدد الارتداد مع العديد من القفزات المتناقصة. للحصول على تأثير ارتداد الكرة بشكل حرفي، ستحتاج إلى إطارات مفتاحية متعددة أو مقاطع من الخطوات () متسلسلة معًا - هذا المنحنى هو أقرب ما يمكن أن تحصل عليه وظيفة توقيت الانتقال البسيطة في سطر واحد.
لا يزال هذا التجاوز الفردي هو بالضبط ما تريده معظم واجهة المستخدم النطاطة: زر ينبثق قليلاً بعد حجمه الخامل، وهو شكل مشروط يتجاوز الحد قبل أن يستقر، وبطاقة تستقر في مكانها. انسخ القيمة كما هي للحصول على هذا الشعور السريع، أو قم بتخفيف y1 نحو 0 وy2 نحو 1 لطلب التجاوز مرة أخرى.