الموشن والفيديو

مبادئ الأنيميشن الاثنا عشر

مبادئ الأنيميشن الاثنا عشر قائمة جمعها رسّاما أنيميشن في ديزني، فرانك توماس وأولي جونستون، في كتابهما الصادر عام ١٩٨١ بعنوان Disney Animation: The Illusion of Life. وللموشن غرافيك تؤدي خمسة منها العمل كله تقريباً: التوقيت والتباعد، والتباطؤ عند الطرفين، والتمهيد، والاستمرار، والإخراج.

  • الدرس 2 من 10
  • مبتدئ
  • مجاني، دون تسجيل

المبادئ الخمسة التي تؤدي أكثر العمل في الموشن غرافيك

هذا ترتيب التعلم لا ترتيب الأهمية. والمحطات متساوية التباعد لأنه لا جدول زمني هنا.

حركة خطيةحركة تُقرأ
  1. الأساس

    التوقيت والتباعد

    كم إطاراً تستغرق، وأين يقع الجسم في كل إطار. أمران مختلفان.

  2. المنحنى

    التباطؤ عند الطرفين

    المبدأ الوحيد الذي حُوّل إلى أرقام. وقيمه الأربع في متن الدرس مع المصدر.

  3. قبل

    التمهيد

    بضعة إطارات في الاتجاه المعاكس، كي تستعد العين.

  4. بعد

    الاستمرار والتداخل

    أجزاء الشيء لا تتوقف معاً. فالنص يستقر بعد البطاقة.

  5. النظر

    الإخراج

    شيء واحد يتحرك في كل لحظة. فالحركة أقوى أداة لجذب الانتباه.

اختيرت هذه الخمسة من قائمة الاثني عشر في كتاب ١٩٨١، والسبعة الأخرى مسرودة في متن الدرس. والاختيار اختيارنا، ولا يقيم الكتاب هذا الفصل.

آخر مراجعة: تُراجع الحقائق وأسماء الأدوات في هذا الدرس مقابل مصادرها في هذا التاريخ.

من أين جاءت هذه القائمة ولماذا ما زالت صالحة

مبادئ الأنيميشن تأتي من كتاب صدر عام ١٩٨١: Disney Animation: The Illusion of Life، لفرانك توماس وأولي جونستون، وهما من رسّامي ديزني القدامى. وقد كُتب ذلك الكتاب لأنيميشن الشخصيات المرسوم يدوياً، أي لزمن كان أحدهم يرسم فيه كل إطار وعليه أن يجعل كائناً يبدو حياً.

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

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

مبادئ الأنيميشن الاثنا عشر: الخمسة التي تحتاجها

التوقيت والتباعد، وهو أول ما ينبغي ضبطه

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

ومثال محسوب يجعل الأمر ملموساً. لنفترض أن معدل الإطارات ٢٤ وأن شكلاً عليه أن ينتقل من اليسار إلى اليمين في اثني عشر إطاراً، أي نصف ثانية. فإن تقدّم في كل إطار بمقدار جزء من اثني عشر من المسافة، كان التباعد منتظماً وكانت النتيجة تلك الحركة الخطية المصطنعة. وإن قطع نصف المسافة في الإطارات الأربعة الأولى والنصف الآخر في الثمانية الباقية، صارت الإطارات الاثنا عشر نفسها حركة تكتسب سرعة ثم تستقر. لم يتغير التوقيت، بل تغيّر التباعد وحده. وهذه الأرقام مثال لا قاعدة؛ فليس في هذا الدرس جدول لـ«المدة الصحيحة»، لأن المدة الصحيحة تعتمد على حجم الحركة وعلى موضع عرضها.

والعادة العملية: كلما بدت حركة سيئة فانظر إلى التباعد قبل المدة. فالمبتدئون يبطّئون الحركة عادةً، وهذا هو الإصلاح الخطأ؛ إذ الحركة البطيئة بتباعد منتظم ليست إلا حركة مصطنعة بطيئة.

لماذا تبدو الحركة الخطية مصطنعة

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

ومسودة W3C المسماة CSS Easing Functions Level 1 تعرّف كلمات المتصفح الأربع بمنحنيات بيزييه بالضبط: ease تساوي cubic-bezier(0.25, 0.1, 0.25, 1)، وease-in تساوي cubic-bezier(0.42, 0, 1, 1)، وease-out تساوي cubic-bezier(0, 0, 0.58, 1)، وease-in-out تساوي cubic-bezier(0.42, 0, 0.58, 1). وهذه الأربعة نفسها صالحة في أي برنامج موشن غرافيك، لأن منحنى بيزييه شيء واحد في كل مكان. فإن كنت تسحب مقابض المنحنى بالعين حتى الآن، صار بإمكانك كتابة الأرقام.

وموقف عملي نادراً ما تتخذه الدروس: لما يدخل الكادر، تقرأ ease-out أفضل من ease-in-out عادةً. والسبب أن المشاهد يريد أن يرى أين يستقر الشيء لا من أين انطلق؛ والحركة التي تبدأ سريعة وتقف بنعومة تعطي ذلك بالضبط. أما العكس فلما يغادر الكادر.

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

الحركة الخطية والحركة المتسارعة، لكل منهما موضعها

خطية: حركة بلا بداية ولا نهاية

  • دوران مستمر ومؤشر انتظار
  • شريط نص متحرك وسير ناقل
  • خلفية تنجرف ببطء ولا تتوقف
  • والتسارع هنا يجعل الحركة نابضة ومزعجة

متسارعة: حركة تنتقل من موضع إلى موضع

  • دخول أي عنصر إلى الكادر أو خروجه منه
  • فتح قائمة أو بطاقة أو لوحة وإغلاقها
  • التكبير والتصغير والانتقال وتغيّر الشفافية
  • ease-out للدخول وease-in للخروج

لا واحدة أفضل من الأخرى. والخطأ أن تضع الحركة الخطية حيث يبدأ شيء وينتهي.

تشريح حركة واحدة: التمهيد، والتنفيذ، والاستمرار، والاستقرار

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

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

وعلى صفحات تمارين mrgym، وهي مشروعنا، كُتب هذا في CSS: رسم بياني شريطي يرتفع عبر مفتاح حركة اسمه mgx-grow خلال تسعة أعشار الثانية، والرقم الذي يجلس فوق الشريط يصل عبر mgx-rise بتأخير اثنتين وأربعين من مئة الثانية بعد الشريط نفسه. فالرقم ينتظر الشريط حتى يكاد ينتهي. وهذا مبدأ الاستمرار بعينه، مكتوباً بصياغة CSS بدل برنامج أنيميشن.

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

حركة واحدة، أربع مراحل

المرحلة الثانية هي التي يبنيها الجميع. والثلاث الأخرى هي ما يجعل العمل يبدو احترافياً.

  1. التمهيد

    بضعة إطارات في الاتجاه المعاكس. أقصر المراحل وأول ما يُحذف.

    1

  2. التنفيذ

    الحركة نفسها بتباعد غير منتظم. وأكثر الإطارات هنا.

    2

  3. الاستمرار

    تجاوز صغير للهدف ثم عودة. وهنا تفترق الأجزاء.

    3

  4. الاستقرار

    سكون كي تسجّل العين ما رأته. ويلزمه مكان في توقيتك.

    4

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

الإخراج: لماذا لا ينبغي أن يتحرك كل شيء معاً

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

والحركة أقوى أداة لجذب الانتباه، أقوى من اللون ومن الحجم. ولهذا حين تدخل خمسة عناصر معاً لا يُرى أي منها. والقاعدة العملية بسيطة: ليتحرك عنصر واحد في كل لحظة وليبقَ الباقي ساكناً. وإن وجب دخول عدة عناصر فعلاً، فأدخلها بتأخيرات متدرجة لا معاً.

والنقطة الثانية، وهي أقل ذكراً، هي التزامن العارض. فحركتان متكررتان بالمدة نفسها تتقافلان بعد ثوانٍ وتقرأهما العين شيئاً واحداً. وفي صفحة تمارين mrgym نفسها، تنبض العضلة المستهدفة بدورة ثانية وتسعة أعشار، والعضلة المساندة بدورة ثانيتين وأربعة أعشار: رقمان متقاربان غير متساويين كي لا يتوافقا في الطور أبداً. ولو حمل الرقمان القيمة نفسها لبدت العضلتان شيئاً واحداً ولضاع مقصد العرض كله.

المبادئ السبعة الباقية وأيها لا ينفع هنا

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

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

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

كيف تفحص عملك بنفسك

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

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

وقاعدة خارج القائمة لكنها بالأهمية نفسها: إن كان العمل يُعرض على موقع فيلزمه وضع يبسّطه أو يوقفه عند إعداد prefers-reduced-motion. فذلك الإعداد موجود لمن تسوء حالهم مع الحركة الكثيفة، وتجاهله يعني أن جزءاً من جمهورك يغلق الصفحة. ودرس إتاحة الوصول فيه التفصيل.

قبل التسليم، افحص هذه بالمشاهدة

العمود الأيمن يضم العادات التي تبلغ نتيجة أسرع وتفسد العمل في الطريق.

ورقة مراجعة الحركةبالسرعة الحقيقية

افحص هذه

  • شاهد مرة بالسرعة الحقيقية وقل أين كانت عينك في كل لحظة
  • أوقف عند أي لحظة وعُدّ كم شيئاً يتحرك
  • أغلق الصوت وانظر هل ما زلت تفهم ما يجري
  • هل تتوقف أجزاء كل مجموعة معاً أم متفرقة
  • على الجهاز الذي سيُعرض عليه فعلاً لا على شاشتك وحدها

لا تفعل هذه

  • الحكم على الحركة بسحب مؤشر التشغيل ذهاباً وإياباً
  • إبطاء حركة تبدو خطأً بدل إصلاح تباعدها
  • إعطاء حركتين متكررتين متجاورتين المدة نفسها
  • إدخال عدة عناصر معاً لأنه أسرع
  • النشر على الويب بلا حالة prefers-reduced-motion

هذه القائمة تفحص الحركة وحدها. أما صواب الرسالة فيُحسم في مكان آخر، ولا تجيب عنه أي قائمة فحص.

المسار السريع مع الذكاء الاصطناعي

هذا الدرس ليس تطبيقياً، لكن له مساراً سريعاً يستحق التدوين: تحويل «هذه الحركة فيها شيء» إلى أرقام قبل فتح البرنامج. فنموذج متقدم يستطيع أن يأخذ وصفاً بسيطاً لحركة مع معدل الإطارات وطولها ويعيد جدول مفاتيح حركة: رقم الإطار، والقيمة، ومنحنى التسارع لكل مدى. وما تتعلمه من التمرين هو حساب التمهيد والاستقرار، وهو ما لا يكاد أي درس يكتبه، وبعد بضع مرات لن تحتاجه. واختيارنا الحالي مدرج في <a class="text-link" href="/ar/ai/">قسم الذكاء الاصطناعي في هذا الموقع</a>.

  1. حدّد معدل الإطارات والطول الكلي لحركة واحدة. فكل رقم آخر يتفرع من هذين، وبدونهما يكون أي جدول تستلمه مختلقاً.
  2. صف الحركة في جملة واحدة: ماذا، ومن أين، وإلى أين، وبأي إحساس. ولا تضف جملة ثانية؛ فالوصف الطويل يجعل المخرَج أكثر غموضاً لا أكثر دقة.
  3. شغّل الوصفة أدناه. ينبغي أن يكون المخرَج جدولاً لا شرحاً، وأن يساوي مجموع إطارات المراحل الأربع الطول الكلي بالضبط. وإن لم يكن كذلك فارمِ الجدول واطلبه من جديد.
  4. أدخل الأرقام، وشغّل، وغيّر رقماً واحداً في كل مرة. فتغيير شيئين معاً يقضي على التعلم لأنك لن تعرف أيهما نفع.
  5. المرور البشري: شاهدها مرة بالسرعة الحقيقية على الجهاز الذي ستُعرض عليه. فالنموذج لم يرَ تركيبك ولا يعرف كيف تُقرأ هذه الحركة إلى جانب بقية العناصر.

وصفة جاهزة للنسخ

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

المدخلات:
- معدل الإطارات: {معدل الإطارات}
- الطول الكلي للحركة بالإطارات: {الطول}
- الحركة: {الوصف}
- الخصائص المتغيرة: {الخصائص}

أعطِ المخرَج جدولاً، سطر لكل مفتاح حركة:
١. رقم الإطار، ابتداءً من صفر
٢. اسم الخاصية
٣. القيمة
٤. منحنى التسارع حتى المفتاح التالي، على شكل cubic-bezier بأربعة أرقام
٥. إلى أي مرحلة ينتمي هذا المفتاح: التمهيد أم التنفيذ أم الاستمرار أم الاستقرار

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

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

الذكاء الاصطناعي في هذا العمل

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

أدوات تساعد فعلا

  • Claude لجدول مفاتيح الحركة ولدور الناقد، لأنه يكتب تعليله والتعليل قابل للرد. وإيران ليست في قائمة الدول المدعومة لدى أنثروبيك، فلا دفع رسمي من إيران.
  • Gemini العمل نفسه، ولمراجعة عدة حركات في مشروع واحد معاً. وصفحة غوغل نفسها تقول إن تطبيق Gemini على الويب يعمل في أكثر من ٢٣٠ دولة وإقليماً، وإيران ليست في تلك القائمة.
  • Seedance 2.5 مذكور هنا كمثال مضاد لا كأداة عمل: فالمقطع الذي يولّده بلا مفاتيح حركة، ولذلك لا يمكن تطبيق أي من المبادئ الخمسة في هذا الدرس عليه. صالح للقطة خلفية لا لتعلّم الحركة.
  • RGB طبقة الوصول والدفع لإيران، منفصلة عن الأدوات نفسها.

اين ينقلب ضدك

الخطر الأساسي هنا لا يأخذ الشكل المعتاد لخطر الذكاء الاصطناعي: فالنموذج لا يجيب بأنه لا يعرف، بل يسلّمك أربعة أرقام بيزييه صحيحة تنتج حركة سيئة. الأرقام تبدو صحيحة لأنها صحيحة رياضياً، والسبيل الوحيد للاكتشاف هو المشاهدة. والخطر الثاني أن أي نصيحة يعطيها النموذج عن زيادة الحركة، إن نُفّذت بلا حالة prefers-reduced-motion، بنت صفحة تطرد جزءاً من جمهورك من الموقع؛ والنموذج لا يضيف ذلك من تلقائه ما لم تسأل. والخطر الثالث في مكان آخر: إن ولّدت مقطعاً بدل أن تبني الحركة، فلا منحنى لديك لتصحيحه، ويتحول «أبطأ قليلاً» إلى إعادة توليد تغيّر كل شيء آخر. وأرقام سقوف تلك النماذج مكتوبة في مرجع الفيديو عندنا.

المصادر: W3C: CSS Easing Functions Level 1 Anthropic: supported countries Google: where Gemini apps are available

حدود هذه النصيحة

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

من عملنا نحن

موقعان من مواقعنا اتخذا قرارين متعاكسين وكلاهما متعمد. فقالب الموقع الذي تقرؤه فيه ٥٧ ملف CSS، وفيها جميعاً حركة واحدة فقط، وهي مؤشر انتظار، تُحسب مرتين لأن main.css له توأم مصغَّر. وعدد إعلانات transition في القالب كله صفر، ولا مفتاح حركة في أي من ملفات PHP. أي أن الموقع الذي نبيع فيه الموشن غرافيك لا يتحرك بنفسه، لأننا فضّلنا السرعة على التأثير. والطرف الآخر هو mrgym.ir، وهو مشروعنا أيضاً: ملف واحد، هو themes/aihub-child/single-exercise.php، يحمل ستة مفاتيح حركة وتسعة إعلانات animation وثلاثة وعشرين إعلان transition. وهناك تُرى المبادئ أرقاماً: شريط الرسم البياني يرتفع بـcubic-bezier(.16, 1, .3, 1) خلال تسعة أعشار الثانية ويستقر رقمه بعد الشريط باثنتين وأربعين من مئة الثانية، وهذا استمرار؛ والعضلة المستهدفة تنبض بدورة ثانية وتسعة أعشار والمساندة بدورة ثانيتين وأربعة أعشار كي لا يتوافقا في الطور، وهذا إخراج؛ وكلاهما داخل حارس prefers-reduced-motion. موقع بلا حركة وموقع مملوء بها، ولا واحد منهما صدفة.

اسئلة متابعة حقيقية

هل يلزمني تعلم المبادئ الاثني عشر كلها؟

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

هل تنطبق المبادئ نفسها على الحركة في موقع؟

نعم، وبصورة أشد مباشرةً: فمنحنيات التسارع في CSS هي مبدأ التباطؤ عند الطرفين، وقيمها الدقيقة مكتوبة في معيار W3C. وثمة فرق مهم واحد وهو ليس تقنياً: على الويب عليك أن تبني أيضاً حالة prefers-reduced-motion، وهي غير موجودة أصلاً في فيديو مصدَّر. ودرس CSS هو نقطة البدء لكتابتها.

بأي معدل إطارات أعمل؟

معدل الإطارات يحدده موضع العرض لا هذه المبادئ؛ فالمبادئ تعمل بأي معدل لأنها عن النسب بين الإطارات لا عن عددها. وما يستحق القول أن المعدل الأعلى ليس أفضل دائماً: فأحد ملفاتنا على mrgym لوب صامت مدته ست عشرة ثانية ونصف مخزّن بـ٥٩.٩٤ إطاراً في الثانية ووزنه ١٩٨٠١٨٢ بايت، ولعرض حركة رياضية واحدة يفوق هذا المعدل ما يحتاجه العمل.

واصل التعلم