CSS Academy · درس

دوال التمهيد: ease وlinear وcubic-bezier

تحكّم في منحنى سرعة الانتقالات باستخدام الكلمات المفتاحية المضمّنة ودوال cubic-bezier()

دوال التمهيد: ease وlinear وcubic-bezier درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ما دالة التسهيل؟

تتحكم دالة التسهيل في منحنى سرعة الانتقال أو الرسم المتحرك، أي في سرعة التسارع أو التباطؤ خلال مدته.

linear

تحافظ linear على سرعة ثابتة طوال الانتقال. وتفيد في أشرطة التحميل ومؤشرات التقدم التي يُتوقع أن تتحرك بثبات.

  <div class="progress-track"><div class="progress"></div></div>

ease (الافتراضية)

تبدأ ease بسرعة، ثم تتباطأ قرب النهاية. وهي القيمة الافتراضية، وتبدو طبيعية في معظم انتقالات واجهة المستخدم.

ease-in

تبدأ ease-in ببطء ثم تتسارع. وتناسب العناصر التي تغادر الشاشة، أي الرسوم المتحركة للخروج.

  <div class="modal">Open</div>
  <div class="modal closing">Closing (faded to invisible)</div>

ease-out

تبدأ ease-out بسرعة ثم تتباطأ تدريجيًا. وهي مناسبة جدًا للعناصر التي تدخل الشاشة؛ إذ تصل بحيوية وتستقر بسلاسة.

  <div class="modal opening">Modal content</div>

ease-in-out

تبدأ ease-in-out وتنتهي ببطء، مع حركة أسرع في المنتصف. وهي الأفضل للرسوم المتحركة المتكررة أو المتحركة ذهابًا وإيابًا.

cubic-bezier()

تعرّف منحنى Bézier تكعيبيًا مخصصًا بأربع نقاط تحكم. وتتيح إنشاء منحنيات تسهيل تشبه النابض ومنحنيات مخصصة.

  <div class="card">Card</div>

قراءة قيم cubic-bezier

تعرّف القيم الأربع نقطتي تحكم: cubic-bezier(x1, y1, x2, y2). وتُنشئ القيم الأكبر من 1 على محور y تأثيرات تجاوز تشبه النابض. استخدم أدوات مثل easings.net لتصور المنحنيات.

دالة steps()

تقسم steps(n, direction) الرسم المتحرك إلى n خطوات متقطعة ومتساوية. وهي مثالية للرسوم المتحركة للصور المتحركة وتأثيرات الكتابة الآلية.

  <div class="sprite"></div>

الكلمات المفتاحية لاتجاه steps()

تتحكم الوسيطة الثانية في موضع حدوث الخطوة:

jump-start: الخطوة الأولى عند الزمن 0
jump-end: الخطوة الأخيرة عند زمن النهاية (الافتراضي)
jump-both: خطوات عند كل من البداية والنهاية
jump-none: لا توجد خطوة عند أي من الطرفين

حديث: استخدام linear() للمنحنيات المعقدة

تتيح الدالة الجديدة linear() تعريف منحنيات تسهيل عشوائية عبر نقاط متعددة، ما يتيح إنشاء تأثيرات النابض والارتداد باستخدام CSS فقط، دون قيود cubic-bezier.

  <div class="spring">Spring easing</div>

تحقق سريع

ما دالة التسهيل التي تحافظ على سرعة ثابتة طوال الانتقال بأكمله؟

مراجعة

تتحكم دوال التسهيل في منحنيات سرعة الرسوم المتحركة. الخيارات المدمجة هي: linear وease وease-in وease-out وease-in-out. تُستخدم cubic-bezier() للمنحنيات المخصصة. وتُستخدم steps() للخطوات المتقطعة. وتتيح الدالة الجديدة linear() إنشاء منحنيات معقدة تشبه النابض.

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

هل درس «دوال التمهيد: ease وlinear وcubic-bezier» مجاني؟

نعم — نص درس «دوال التمهيد: ease وlinear وcubic-bezier» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «دوال التمهيد: ease وlinear وcubic-bezier»؟

تحكّم في منحنى سرعة الانتقالات باستخدام الكلمات المفتاحية المضمّنة ودوال cubic-bezier() تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «دوال التمهيد: ease وlinear وcubic-bezier»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

مدة خاصية الانتقال وتوقيته
دوال التمهيد: ease وlinear وcubic-bezier
إجراء انتقالات لخصائص متعددة
الأداء: الخصائص القابلة للتحويل مقابل خصائص إعادة الرسم

← العودة إلى CSS Academy