شرح دالة cubic-bezier فيcss

دالة cubic-bezier هي أداة تُستخدم في CSS لتحديد وظيفة التوقيت (timing function) للانتقالات (Transitions) والحركات (Animations). تُستخدم هذه الدالة لإنشاء تأثيرات حركية أكثر دقة وسلاسة عن طريق التحكم في سرعة التغيير بمرور الوقت.

تُعرف cubic-bezier بواسطة أربع نقاط تحكم (نقاط على منحنى بيزير)، مما يسمح لك بإنشاء منحنيات توقيت مخصصة بدلاً من استخدام القيم المحددة مسبقًا مثل ease، linear، أو ease-in-out.

صيغة الدالة:

cubic-bezier(x1, y1, x2, y2)

• x1, y1: إحداثيات نقطة التحكم الأولى.
• x2, y2: إحداثيات نقطة التحكم الثانية.
• النطاق المسموح: يجب أن تكون قيم x1 و x2 بين 0 و 1، بينما يمكن أن تكون y1 و y2 خارج هذا النطاق.

كيف تعمل؟

• تمثل cubic-bezier منحنى بيزير الذي يحدد كيفية تقدم الحركة أو الانتقال بمرور الوقت.
• المحور الأفقي (X) يمثل الوقت (من 0 إلى 1).
• المحور الرأسي (Y) يمثل التقدم في الحركة (من 0 إلى 1).

أمثلة على القيم المحددة مسبقًا:

يمكن تحقيق بعض القيم الشائعة باستخدام cubic-bezier:

linear:

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

الحركة تكون بسرعة ثابتة.

ease:

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

الحركة تبدأ ببطء، تتسارع في المنتصف، ثم تتباطأ في النهاية.

ease-in:

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

الحركة تبدأ ببطء ثم تتسارع.

ease-out:

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

الحركة تبدأ بسرعة ثم تتباطأ.

ease-in-out:

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

الحركة تبدأ ببطء، تتسارع في المنتصف، ثم تتباطأ في النهاية.

مثال عملي:

لنفترض أنك تريد إنشاء انتقال سلس مع تسارع مخصص:

.element {
    transition: all 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

في هذا المثال:

• 0.68, -0.55: نقطة التحكم الأولى.
• 0.27, 1.55: نقطة التحكم الثانية.
• هذا يخلق تأثير "مرن" أو "زائد عن الحد" (bounce effect).

أدوات لإنشاء cubic-bezier:

لإنشاء منحنيات بيزير مخصصة، يمكنك استخدام أدوات مثل:

• cubic-bezier.com: أداة تفاعلية لإنشاء وتعديل منحنيات بيزير.
• أدوات مطوري المتصفح (DevTools): تسمح لك بتعديل cubic-bezier بشكل مرئي.

استخدامات cubic-bezier:

• تحسين الانتقالات: لجعل التغييرات بين الحالات أكثر سلاسة.
• إنشاء حركات طبيعية: مثل تأثيرات الارتداد أو التسارع.
• تحسين تجربة المستخدم: لجعل الواجهات أكثر تفاعلية وجذابة.

ملاحظات:

• إذا كانت قيم y1 أو y2 خارج النطاق [0, 1]، يمكن أن ينتج عنها تأثيرات "مرنة" أو "زائدة عن الحد".
• يمكن أن يؤدي استخدام cubic-bezier بشكل غير صحيح إلى حركات غير طبيعية أو غير مرغوب فيها.

الخلاصـــة:

دالة cubic-bezier هي أداة قوية تتيح لك التحكم الدقيق في سرعة وتقدم الانتقالات والحركات، مما يساعدك على إنشاء تجارب مستخدم أكثر ديناميكية وسلاسة.