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

تعرّف على كيفية تخفيف شدة الصور المتحركة وتحديد ترجيحها.

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

ملخّص

• الإرخاء يجعل الصور المتحركة تبدو طبيعية أكثر.
• اختيار رسوم متحركة لتسهيل عناصر واجهة المستخدم.
• تجنب الرسوم المتحركة التي تتسم بالراحة أو التخفيف للداخل ما لم تتمكن من إبقائها قصيرة؛ حيث يميل المستخدمون إلى الشعور بالبطء لدى المستخدمين النهائيين.

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

الكلمات الرئيسية للتخفيف

تتيح لك كل من الانتقالات والصور المتحركة في 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;