إنشاء منحنيات رسوم متحركة معقدة في CSS باستخدام دالة الإيقاع Line()

نقدّم لك linear()، وهي دالة تباطؤ وتسرّع في CSS تعمل على الاستيفاء خطيًا بين نقاطها، ما يتيح لك إعادة إنشاء تأثيرات الارتداد والنابض.

Bramus

التحكّم في سرعة الحركة في CSS

عند تحريك العناصر أو نقلها في CSS، يمكنك التحكّم في معدّل تغيّر القيمة باستخدام دالة التباطؤ والتسارع من خلال السمتَين animation-timing-function وtransition-timing-function.

تتوفّر عدة كلمات رئيسية كإعدادات مسبقة في CSS، وهي linear وease وease-in وease-out وease-in-out. لإنشاء منحنيات تغيير السرعة الخاصة بك، استخدِم الدالة cubic-bezier()، أو اتّبِع نهجًا مستندًا إلى الخطوات باستخدام دالة تغيير السرعة steps().

عند استخدامها بشكل مناسب، تمنح منحنيات التباطؤ والتسارع عنصرًا متحركًا إحساسًا بالوزن أثناء اكتسابه للزخم.

لا يمكن إنشاء منحنيات معقّدة، مثل تأثيرات الارتداد أو النوابض، في CSS، ولكن بفضل linear()، يمكنك الآن تقريبها بشكل مذهل.

مقدمة عن linear()

يمكنك تحديد التباطؤ والتسارع في CSS بطريقة جديدة باستخدام linear(). تقبل هذه الدالة عددًا من المحطات مفصولة بفواصل. كل توقّف هو رقم واحد يتراوح بين 0 و1. بين كل نقطة توقّف، يتم إجراء الاستيفاء بطريقة خطية، ما يفسّر اسم الدالة.

animation-timing-function: linear(0, 0.25, 1);

يتم توزيع هذه المحطات تلقائيًا على مسافات متساوية. في المقتطف السابق، يعني ذلك أنّه سيتم استخدام قيمة الناتج 0.25 عند علامة% 50.

عند عرضها، يبدو الرسم البياني الخاص بـ linear(0, 0.25, 1) على النحو التالي:

إذا كنت لا تريد أن تكون المحطات موزّعة على مسافات متساوية، يمكنك اختياريًا إدخال طول المحطة. عند تمرير قيمة واحدة كطول توقّف، يمكنك تحديد نقطة البداية على النحو التالي:

animation-timing-function: linear(0, 0.25 75%, 1);

في هذا المثال، لن يتم استخدام قيمة الناتج 0.25 عند العلامة 50%، ولكن سيتم استخدامها عند العلامة 75%.

عند تحديد قيمتَين كطول توقّف، عليك تحديد نقطتَي البداية والنهاية:

animation-timing-function: linear(0, 0.25 25% 75%, 1);

سيتم استخدام قيمة إخراج تبلغ 0.25 من% 25 إلى% 75 من الوقت.

إنشاء منحنيات معقّدة

على الرغم من أنّ الأمثلة السابقة هي عمليات تغيير سرعة أبسط، يمكنك استخدام linear() لإعادة إنشاء دوال تغيير سرعة معقّدة إذا كنت على استعداد للتنازل عن بعض الدقة.

إليك منحنى تغيير سرعة الارتداد هذا، وهو نوع من تغيير السرعة لا يمكن التعبير عنه مباشرةً في CSS، ويتم تحديده باستخدام JavaScript:

function easing(pos) {
  const t = 7.5625;
  const e = 2.75;
  return pos < 1 / e
    ? t * pos * pos
    : pos < 2 / e
    ? t * (pos -= 1.5 / e) * pos + 0.75
    : pos < 2.5 / e
    ? t * (pos -= 2.25 / e) * pos + 0.9375
    : t * (pos -= 2.625 / e) * pos + 0.984375;
}

قد لا يقدّم لك الرمز البرمجي الكثير من المعلومات، ولكن قد يقدّم لك التصوّر معلومات مفيدة. في ما يلي الناتج، ويظهر على شكل منحنى أزرق:

يمكن تبسيط المنحنى عن طريق إضافة عدد من المحطات إليه. تشير كل نقطة خضراء هنا إلى محطة توقّف:

عند تمريرها إلى linear()، تكون النتيجة منحنى يشبه المنحنى الأصلي إلى حد ما، ولكنّه يكون أكثر خشونة عند الحواف.

قارِن بين المربع الأخضر المتحرّك والمربع الأزرق، ستلاحظ أنّ المربع الأخضر ليس سلسًا.

ولكن إذا أضفت عددًا كافيًا من المحطات، يمكنك تقريب المنحنى الأصلي بشكل جيد. إليك نسخة معدَّلة:

بمجرد مضاعفة عدد المحطات، ستحصل على نتيجة سلسة.

يبدو الرمز المستخدَم لإنشاء الرسوم المتحركة على النحو التالي:

animation-timing-function: linear(
  /* Start to 1st bounce */
  0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
  /* 1st to 2nd bounce */
  0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
  /* 2nd to 3rd bounce */
  0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
  /* 3rd bounce to end */
  0.988, 0.984, 0.988, 1
);

أداة للمساعدة

سيكون إنشاء قائمة المحطات هذه يدويًا أمرًا شاقًا للغاية. لحسن الحظ، أنشأ جيك وآدم أداة لمساعدتك في تحويل منحنى تغيير السرعة إلى نظيره linear().

تتلقّى الأداة دالة تسهيل JavaScript أو منحنى رسومات موجّهة يمكن تغيير حجمها (SVG) كمدخل، وتعرض المنحنى المبسّط باستخدام linear(). استخدِم أشرطة التمرير للتحكّم في عدد نقاط التوقف التي تريدها ومدى دقتها.

في أعلى يسار الشاشة، يمكنك أيضًا اختيار أحد الإعدادات المُسبقة: يتم تضمين "النابض" أو "الارتداد" أو "المرونة البسيطة" أو "التصميم المتعدد الأبعاد".

الدعم في "أدوات مطوّري البرامج"

تتوفّر في "أدوات مطوّري البرامج" إمكانية عرض نتيجة linear() وتعديلها. انقر على الرمز لعرض تلميح تفاعلي يتيح لك سحب المحطات.

تتوفّر ميزة "أدوات مطوّري البرامج" هذه في "أدوات مطوّري البرامج" بدءًا من الإصدار 114 من Chrome.