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

Kayce Basques

Sofia Emelianova

افحص الصور المتحركة وعدِّلها باستخدام علامة تبويب الصور المتحركة في "أدوات مطوري البرامج في 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. التفاصيل. فحص وتعديل مجموعة الصور المتحركة المحدّدة.

لالتقاط صورة متحرّكة، يجب تشغيلها عندما تكون لوحة الصور المتحركة مفتوحة.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تعديل @keyframes مباشرةً

عند تعديل @keyframes في الأنماط، يمكنك الاطّلاع على التأثيرات في لوحة الصور المتحركة على الفور.

يمكنك تجربته في صفحة العرض التوضيحي هذه:

1. افتح لوحة الصور المتحركة. تسجّل هذه الميزة الحركة النبضية المستمرة في الصفحة تلقائيًا. اختَر الصورة المتحركة ضمن عناصر التحكّم في شريط الإجراءات.
2. في Elements، افحص العنصر باستخدام class="pulser"، وفي Elements، ابحث عن القسم @keyframes pulse.
3. جرِّب تعديل الإطارات الرئيسية، على سبيل المثال، غيِّر الإطار الرئيسي الثاني من 50% إلى 20%.
4. لاحِظ كيف تؤثر التغييرات التي تجريها في الأنماط على الصورة المتحركة التي تلتقطها لوحة الصور المتحركة.

تعديل العناصر الزائفة البالغ عددها ::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)

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

1. افتح أدوات مطوّري البرامج وافحص صفحة استخدمت واجهة View Transitions API. على سبيل المثال، هذه الصفحة التجريبية.
2. في قسم الصور المتحركة، انقر على إيقاف مؤقت إيقاف مؤقت.

3. شغِّل صورة متحركة في الصفحة. تلتقطه لوحة الصور المتحركة وتتوقف مؤقتًا على الفور. يمكنك الآن العثور على بنية ::view-transition في DOM أعلى العنصر <head>.

   

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

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

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