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

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

تغيير السرعة في 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.

إنشاء منحنيات معقدة باستخدام الدالة line()

على الرغم من أنّ الأمثلة أعلاه ليست خطوات تخفيف بسيطة للغاية، يمكنك استخدام 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(). استخدِم أشرطة التمرير للتحكم في عدد مرات التوقّف التي تريدها ومدى دقتها.

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

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

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

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

صورة من تصوير هوي خرائطون على Unsplash