إنشاء منحنيات رسوم متحركة معقدة في 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: الصور المتحركة.

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

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

مقدمة عن "linear()"

دعم المتصفح

• 113
• 113
• 112
• 17.2

هناك طريقة جديدة لتحديد التخفيف في 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().

لقطة شاشة لـ https://linear-easing-generator.netlify.app/ أثناء التنفيذ.

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

في أعلى يسار الشاشة، يمكنك أيضًا اختيار أحد الإعدادات المسبقة: Spring أو Bounce أو Simple مرونة أو "التخفيف المؤكد" (Material Design)

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

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

لقطة شاشة للمحرِّر " line() في "أدوات مطوّري البرامج" في Chrome.

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

صورة التقطها Howie Mapson على Un تتوفر.