أساسيات التخفيف

تعرَّف على كيفية إضفاء لمسة ناعمة على الصور المتحركة وإبرازها.

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

ملخّص

• يؤدي تغيير السرعة إلى جعل الصور المتحركة تبدو طبيعية أكثر.
• اختَر صورًا متحركة ذات انتقال سلس لعناصر واجهة المستخدم.
• تجنَّب استخدام الرسوم المتحركة التي تعتمد على تقنية "التخفيف التدريجي" أو "التخفيف التدريجي للدخول والخروج" ما لم يكن بإمكانك إبقاؤها قصيرة، لأنّها تبدو بطيئة للمستخدمين النهائيين.

في الرسوم المتحركة الكلاسيكية، مصطلح الحركة التي تبدأ ببطء وتتسارع هي "بطيئة"، ومصطلح الحركة التي تبدأ بسرعة وتتباطأ هو "البطء". إنّ المصطلحات الأكثر استخدامًا على الويب لهذه التأثيرات هي "الانتقال التدريجي للظهور" و"الانتقال التدريجي للاختفاء"، على التوالي. وفي بعض الأحيان، يتم دمج الاثنين، ما يُعرف باسم "التدرّج في الظهور والاختفاء". وبالتالي، فإنّ التخفيف هو عملية جعل الرسوم المتحركة أقل حدة أو وضوحًا.

تسهيل الكلمات الرئيسية

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

في ما يلي بعض الكلمات الرئيسية التي يمكنك استخدامها في CSS:

• linear
• ease-in
• ease-out
• ease-in-out

المصدر: CSS Transitions, W3C

يمكنك أيضًا استخدام كلمة رئيسية steps تسمح لك بإنشاء انتقالات بخطوات منفصلة، إلا أنّ الكلمات الرئيسية الواردة أعلاه هي الأكثر فائدة لإنشاء صور متحركة تبدو طبيعية.

الصور المتحركة الخطية

تُعرف الرسومات المتحركة التي لا تتضمّن أي نوع من التخفيف باسم رسومات متحركة خطية. يظهر الرسم البياني لعملية انتقال خطية على النحو التالي:

ومع مرور الوقت، تزداد القيمة بكميات متساوية. مع الحركة الخطية، تبدو الأشياء آلية وغير طبيعية، وهذا أمر يجده المستخدمون مزعجًا. بشكل عام، يجب تجنب الحركة الخطية.

سواء كنت تعمل على ترميز الصور المتحركة باستخدام CSS أو JavaScript، ستجد دائمًا خيارًا للحركة الخطية.

عرض صورة متحركة خطية

لتحقيق التأثير أعلاه باستخدام CSS، ستبدو الرمز على النحو التالي:

transition: transform 500ms linear;

الصور المتحركة ذات السرعة المتزايدة

يتسبب الإرخاء في بدء الرسوم المتحركة بسرعة أكبر من الرسوم الخطية، كما أن لها أيضًا تباطؤ في النهاية.

عادةً ما يكون الانتقال التدريجي هو الخيار الأفضل لواجهة المستخدم، لأنّ البدء السريع يمنح الصور المتحركة شعورًا بالاستجابة، مع السماح بتباطؤ طبيعي في النهاية.

مشاهدة صورة متحركة بسيطة

هناك العديد من الطرق للوصول إلى النتائج بسهولة، ولكن أبسطها هو الكلمة الرئيسية ease-out في CSS:

transition: transform 500ms ease-out;

الصور المتحركة التي تظهر تدريجيًا

تبدأ الصور المتحركة التي تستخدم ميزة "التخفيف التدريجي" ببطء وتنتهي بسرعة، وهو عكس الصور المتحركة التي تستخدم ميزة "التخفيف التدريجي للخارج".

يشبه هذا النوع من الصور المتحركة سقوط حجر ثقيل، حيث يبدأ ببطء ويضرب الأرض بسرعة مع صوت عالٍ.

من وجهة نظر التفاعل، قد تبدو عمليات التخفيف غير مألوفة بعض الشيء بسبب نهايتها المفاجئة، فالأشياء التي تتحرك في العالم الحقيقي تميل إلى التباطؤ بدلاً من التوقف فجأة. تؤدي أيضًا عمليات التخفيف إلى الشعور بالبطء عند البدء، ما يؤثر سلبًا في سرعة استجابة موقعك الإلكتروني أو تطبيقك.

الاطّلاع على صورة متحركة ذات تأثير خفيف

لاستخدام صورة متحركة تتزايد سرعتها تدريجيًا، يمكنك استخدام الكلمة الرئيسية الخاصة بها، تمامًا مثل الصور المتحركة التي تتزايد سرعتها تدريجيًا والصور المتحركة الخطية:

transition: transform 500ms ease-in;

تكبير الصور المتحركة وإفلاتها

إنّ التخفيف من سرعة الزيادة والنقصان يشبه تسارع السيارة وتباطؤها، ويمكن أن يُحدث تأثيرًا أكبر من مجرد التخفيف من سرعة النقصان إذا تم استخدامه بحكمة.

لا تستخدِم مدة طويلة جدًا للتأثير، لأنّ بدء التأثير ببطء يُشعر المستخدم بالبطء. وعادةً ما يكون الوقت المناسب في حدود 300 إلى 500 ملي ثانية، ولكن يعتمد العدد الدقيق بشكل كبير على شعور مشروعك. ومع ذلك، بسبب البداية البطيئة وسرعة المنتصف وبطء النهاية، هناك تباين متزايد في الرسوم المتحركة، وهو ما قد يكون مُرضيًا تمامًا للمستخدمين.

الاطّلاع على صورة متحركة تتزايد سرعتها ثم تتناقص

للحصول على حركة متزايدة أو متناقصة، يمكنك استخدام الكلمة الرئيسية ease-in-out في CSS:

transition: transform 500ms ease-in-out;