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

لكن كيف يمكن للمرء أن ينشئ رسوم متحركة ذات جودة ؟ easing curves هى واحدة من المكونات الأساسية التى تحول الرسوم المتحركة اللائقة وتجعلها رائعة. وتكمن المشكلة هنا فى كيفية عمل منحنيات “easing”..ممكن تكون مربكة بعض الشئ.

منحنى الـeasing هو الذي يحدد نمط التسارع على الرسم البيانى. كما يعرف بأسماء عديدة مثل : منحنيات الحركة “motion” وتوقيت الوظائف “timing function” ومنحنيات بيزر “Bezier ” أو منحنيات فقط. أيضاً الأشكال المختلفة لديه تمتلك كلمات مفتاحية مثل : ease in out ,ease in ,ease out.

كيفية عمل الـ Easing Curves ؟

easing curves تم إنشائها بواسطة (x,y) ويقصد بهما النسبة المئوية بين الرسوم المتحركة (y) والتوقيت (x).

والسؤال الذي يدور فى ذهنك الآن هو، ماذا لو وضعت منحنيات الـeasing فى حيز التنفيذ ؟ هنا تدخل مفاهيم التوقيت والتباعد فى الموضوع.

التوقيت والتباعد “Timing and Spacing”

التوقيت يقصد به مدة الرسوم المتحركة للإنتهاء منذ البداية. بينما يقصد بالتباعد عموماً هو المساحة بين كل إطار “frame” ولكن فى حالتنا هذه يقصد به المساحة بين كل بالمئة فى الرسوم المتحركة. فى الصورة السفلى توضح كيفية ترابط هذا التباعد بمنحنيات الـeasing.

فى العمودى = بسرعة، بينما الأفقى = البطئ.

Linear Ease Spacing (شكل من أشكال منحنيات الـeasing )

فى الـlinear easing, فإن تباعد النقطة يكون تباعد متساوي مع طول الرسوم المتحركة ” View on CodePen  “animation.

Ease In Spacing (وهو شكل من أشكال منحنى الـeasing كما قولنا)

هنا فى الـease in تباعد النقطة يكون بطئ كثيراً عند البدء ثم يُسرع مع إستمرار الرسوم المتحركة. View on CodePen

Ease Out Spacing ( وهو أيضاً من أشكال منحنيات الـeasing )

هذا الشكل عكس الشكل السابق حيث أن نقطة التباعد تبدأ كبيرة ثم تتكثف فى النهاية. View on CodePen

والآن، تصميم منحنى easing

السؤال المشهور فى هذه الجزئية هو “ماهو المنحنى الذي يجب علىّ إستخدامه …ومتى ؟!” والجواب هو – ان المنحنى يعتمد على السيناريو. بمعنى ليس هناك منحنى easing يفعل كل شئ. حيث صياغة هذه المنحنيات هى العنصر الأساسي لتصميم الحركة “motion”. منحنيات الـeasing صُممت عادةً بعد الفيزياء فى العالم الحقيقى ولكن أنصحك ألا تتبع تلك القواعد. العالم الحقيقى هو أفضل مكان للحصول على الإلهام للرسوم المتحركة “inspiration for animation”. على سبيل المثال : لا يوجد مشروع أو كائن يبدأ بسرعة كاملة أو يتوقف مرةً واحدة مثل ما تفعل منحنيات linear easing . المشاريع أو الكائنات لابد أن تبدأ بنوع من التسارع أو التباطؤ  وليست سريعة فجأة أو بطيئة فجأة.

هذا فقط واحد من العديد من المفاهيم، وقد حددت ديزنى 12 مبدأ للرسوم المتحركة…يمكنك مشاهدتها فى الفيديو الآتى :

عند صياغة منحنيات الـeasing لابد أن تضع فى إعتبارك أن الرأسي سريع بينما الأفقى بطئ. والمنحنى الذي تقوم بإنشائه لابد أن يعتمد على  التفاعل فى تصميمك.

بالإضافة لصياغة المنحنى داخل الإطار …. يمكن للشخص كسر الإطار !!

كسر الإطار سوف يتسبب فى خروج الرسوم المتحركة عن القيم بين الإطارات المفتحاية “keyframes”. كذلك، كسر الإطار سوف ينشئ تأثيرات إرتداد “bounce ” أو تاثيرات ترقب “anticipation “. كما هو موضح فى الصورة السفلى.

هناك العديد من الأدوات لإنشاء مكعب بيزير ” cubic bezier’s” على الويب :

• cubic-bezier.com
• Cesear
• Easings.net

منحنيات الـeasing فى التطوير

وهذه المنحنيات يطلق عليها إسم “Timing Functions”  وهي المعادلات الرياضية التي تخلق منحنى بيزير “bezier ” الذي يحدد نمط التسارع على الرسم البياني.

والوظيفة “function” التى يشيع إستخدامها فى التطوير هى cubic-bezier “مربع بيزر”.

 منحنيات الـeasing فى CSS

Global 

ومعنى “Global” هو الإجمالى أو الشامل بمعنى …أن الرسوم المتحركة تنطبق بنفس القدر لكل “keyframe”. مثال : إذا كنت تمتلك ارتداد “bounce” فإن الرسوم المتحركة سوف ترتد فى كل “keyframe”. كما هو موضح فى الصورة السفلى.

.object-class {
animation-name: animation-rocks;
animation-timing-function: cubic-bezier(1,.01,.91,.46);
}

View on CodePen 

Curved Delays

لا ينطبق مفهوم منحنيات الـeasing على الرسوم المتحركة فقط بل ممكن أن ينطبق على التأخير “delays” ! والتي يمكن أن تكون ممتعة حقاً عندما يكون هناك العديد من العناصر على الشاشة المتحركة. والصورة السفلى مثال لذلك، حيث تم خلقها من خلال خلق “Sass loop ”  وإستخدام بوصلة رياضيات “Compass math” للمساعدة فى حساب الـsine.

@for $i from 1 through 7 {
&:nth-child(#{$i}) {
animation-delay: ( #{sin(.4) * ($i)}s );
}

View on CodePen

الخاتمة :

تكلمنا فى هذا المقال عن كيف تعمل منحنيات الـeasing، وكذلك التوقيت والتباعد فى هذه المنحنيات. كما شرحنا تصميم منحنى الـeasing. وتطرق الكلام أيضاً الى منحنيات الـeasing فى التطوير وفى الـCSS.

المصدر