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

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

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

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

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

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

curves-01

 

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

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

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

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

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

curves

 

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

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

curves-2

 

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

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

ease-out

 

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

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

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

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

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

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

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

curves-5

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

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

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

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

 

curves-6

في معظم لغات البرمجة، هناك بعض منحنيات easing (سبق ذكرها) مثل : ease-in ,ease-out ,ease-in-out.
فى الأسفل سرد لمنحنيات الـeasing المعروفة فى CSS
  • (ease-in = cubic-bezier(.42, 0, 1, 1
  •   (ease-out =cubic-bezier(0, 0, .58, 1
  • (ease-in-out  = cubic-bezier(.42, 0, .58, 1

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

Global 

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

 

curves-7

.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.

curves-8

 

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

View on CodePen

 

الخاتمة :

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

المصدر

مقالات ذات صلة

6 تعليقات

  1. ahmed gaafer
    21 يوليو,2015 في 2:43 م - Reply

    بارك الله فيكم ..واصلوا

    • أحمد السالوس
      21 يوليو,2015 في 3:25 م - Reply

      إيانا وإياكم يا فندم … 🙂
      واصل أنت أيضاً متابعتنا 😀

  2. رامي محمد
    15 أكتوبر,2015 في 10:43 م - Reply

    مجهود يستحق الشكر ، شكرا كثيرا ^_^

    • أحمد السالوس
      15 أكتوبر,2015 في 11:07 م - Reply

      ربنا يبارك فيك يا رامي، تعلقيك ده بيشجعنا كتير، أشكرك يا صديقي 🙂

  3. khalid
    29 ديسمبر,2015 في 3:34 م - Reply

    مررت هنا لأحييك على ماتبذله من مواضيع قيمة ، حياك الله

  4. mustafa nassir
    30 مارس,2016 في 8:48 م - Reply

    شكرا لكم تستحق كل الاحترام والتقدير على الموضوع المميز