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

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

Paul Lewis

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

ملخّص

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

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

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

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

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

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

المصدر: انتقالات CSS،‏ 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;