الصور المتحركة: فحص تأثيرات الرسوم المتحركة في CSS وتعديلها

افحص الصور المتحركة وعدِّلها من خلال علامة تبويب درج الصور المتحركة في "أدوات مطوري البرامج في Chrome".

نظرة عامة

لالتقاط صور متحركة، افتح علامة التبويب الصور المتحركة. يكتشف الرسوم المتحركة تلقائيًا ويقوم بفرزها في مجموعات.

تهدف علامة التبويب الصور المتحركة إلى غرضين رئيسيين:

  • افحص الصور المتحركة. قم بإبطاء رمز المصدر أو إعادة تشغيله أو فحصه لمجموعة من الرسوم المتحركة.
  • تعديل الصور المتحركة: عدِّل التوقيت أو التأخير أو المدة أو إزاحة الإطار الرئيسي لمجموعة صور متحركة. ولا يمكن إتاحة تعديل الإطار الرئيسي و"بيزييه".

تتيح علامة التبويب الصور المتحركة استخدام الصور المتحركة في CSS وانتقالات CSS والرسوم المتحركة على الويب وView Transitions API. الصور المتحركة باللغة requestAnimationFrame غير متاحة حتى الآن.

ما هي مجموعة الصور المتحركة؟

مجموعة الصور المتحركة هي مجموعة من الصور المتحركة التي تبدو مرتبطة ببعضها البعض.

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

بمعنى آخر، تجمع علامة التبويب الصور المتحركة معًا الرسوم المتحركة التي يتم تشغيلها في كتلة النصوص البرمجية نفسها، ولكن إذا كانت غير متزامنة، فسينتهي بها الأمر في مجموعات مختلفة.

بدء

هناك طريقتان لفتح علامة التبويب الصور المتحركة:

  • اختَر المزيد تخصيص أدوات مطوّري البرامج والتحكّم فيها > المزيد من الأدوات > الصور المتحركة. الصور المتحركة في القائمة.
  • افتح قائمة الأوامر بالضغط على أحد الخيارات التالية:

    • على نظام التشغيل macOS: Command+Shift+P
    • على نظام التشغيل Windows أو Linux أو ChromeOS: اضغط على Control+Shift+P.

    بعد ذلك، ابدأ بكتابة الرمز Show Animations واختَر لوحة الدرج المناسبة. عرض الصور المتحركة.

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

علامة التبويب "الصور المتحركة" فارغة.

تتضمن علامة التبويب الصور المتحركة أربعة أقسام رئيسية:

أقسام لوحة "الصور المتحركة".

  1. عناصر التحكّم: من هنا، يمكنك حظر محو كل مجموعات الصور المتحركة التي تم التقاطها، أو إيقاف الصور المتحركة مؤقتًا أو play_arrow استئناف الصور المتحركة، أو تغيير سرعة مجموعة الصور المتحركة المحدّدة.
  2. نظرة عامة: اختَر مجموعة صور متحركة هنا لفحصها وتعديلها في جزء التفاصيل.
  3. المخطط الزمني. إعادة تشغيل إعادة تشغيل صورة متحركة أو فركها أو الانتقال إلى نقطة معيّنة.
  4. يمكنك معرفة التفاصيل. فحص وتعديل مجموعة الصور المتحركة المحددة.

لالتقاط صورة متحركة، يمكنك تشغيلها أثناء فتح علامة التبويب الصور المتحركة. إذا تم تشغيل صورة متحركة عند تحميل الصفحة، عليك إعادة تحميلها.

فحص الصور المتحركة

بعد التقاط صورة متحركة، هناك بعض الطرق لإعادة تشغيلها:

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

انقر على أزرار أزرار سرعة الصور المتحركة سرعة الحركة في شريط عناصر التحكم لتغيير سرعة معاينة مجموعة الصور المتحركة المحددة.

عرض تفاصيل الصور المتحركة

بمجرد التقاط مجموعة صور متحركة، انقر عليها من جزء نظرة عامة لعرض تفاصيلها.

في جزء التفاصيل، تحصل كل صورة متحركة فردية على صفها الخاص. لعرض الاسم الكامل للعنصر المقابل، يجب تغيير حجم عمود "الاسم".

جزء التفاصيل.

مرِّر مؤشّر الماوس فوق صورة متحركة لتمييزها في إطار العرض. انقر على الصورة المتحركة لاختيارها في لوحة العناصر.

التمرير فوق صورة متحركة لتمييزها في إطار العرض.

تتكرّر بعض الصور المتحركة إلى أجل غير مسمى في حال ضبط سمة animation-iteration-count على infinite. تعرض علامة التبويب الصور المتحركة تعريفاتها ومرات تكرارها.

تكرارات الصور المتحركة.

الجزء الأغمق من اليسار هو تعريفه. تمثل الأقسام اليمنى الأكثر تلاشيًا التكرارات.

على سبيل المثال، في لقطة الشاشة التالية، يمثل القسمان الثاني والثالث تكرارات للقسم الأول.

رسم تخطيطي للتكرارات المتحركة.

إذا تم تطبيق الحركة نفسها على عنصران، ستحددهما علامة التبويب الصور المتحركة اللون نفسه. اللون نفسه عشوائي وليس له دلالة. على سبيل المثال، في لقطة الشاشة أسفل العنصرَين div.eye.left::after وdiv.eye.right::after، يتم تطبيق الحركة نفسها (eyes) على العنصرَين، تمامًا مثل div.feet::before وdiv.feet::after.

الصور المتحركة المصنَّفة حسب اللون.

تعديل الصور المتحركة

هناك ثلاث طرق يمكنك من خلالها تعديل صورة متحركة من خلال علامة التبويب الصور المتحركة:

  • مدة تشغيل الصور المتحركة
  • توقيتات الإطارات الرئيسية
  • تأخير وقت البدء

في هذا القسم، افترض أن لقطة الشاشة التالية تمثل الحركة الأصلية:

الصورة المتحركة الأصلية قبل التعديل

لتغيير مدة الرسم المتحرك، اسحب الدائرة الأولى أو الأخيرة.

المدة المعدّلة.

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

تم تعديل الإطار الرئيسي.

لإضافة مهلة إلى أحد الرسوم المتحركة، انقر على الحركة نفسها، وليس على الدوائر، ثم اسحبها إلى أي مكان.

تم تأخير التعديل.

تعديل العناصر الزائفة في ::view-transition أثناء الصورة المتحركة

باستخدام View Transitions API، يمكنك تغيير نموذج العناصر في المستند (DOM) في خطوة واحدة، أثناء إنشاء انتقال متحرك بين الحالتين. أثناء إنشاء مؤثر حركي، تنشئ واجهة برمجة التطبيقات شجرة عناصر زائفة بالبنية التالية:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

لتعديل هذه البنية في العناصر > الأنماط:

  1. افتح "أدوات مطوري البرامج" وافحص الصفحة التي استخدمت واجهة برمجة التطبيقات View Transitions API. على سبيل المثال، صفحة العرض التوضيحي هذه.
  2. في الصور المتحركة، انقر على إيقاف مؤقت إيقاف مؤقت.
  3. على الصفحة، شغِّل صورة متحركة. تلتقطه لوحة الصور المتحركة وتتوقف مؤقتًا على الفور. يمكنك الآن العثور على بنية ::view-transition في DOM، أعلى العنصر <head>.

    تعديل CSS لـ ::view-transition pseudo-element.

  4. في العناصر > الأنماط، عدِّل CSS من ::view-transition عنصر زائف.

  5. استأنف الصورة المتحركة وأعد تشغيلها لمشاهدة النتيجة.

للحصول على مزيد من المعلومات، يُرجى الاطّلاع على عمليات نقل سلسة وبسيطة باستخدام واجهة برمجة تطبيقات View Transitions API.