فحص الرسوم المتحركة وتعديلها باستخدام علامة التبويب الرسوم المتحركة في أدراج "أدوات مطوّري البرامج في Chrome"
نظرة عامة
لالتقاط صور متحركة، افتح لوحة الصور المتحركة. وترصد هذه الميزة تلقائيًا الصور المتحركة وتصنّفها في مجموعات.
تهدف لوحة الصور المتحركة إلى غرضين رئيسيين:
- فحص الصور المتحركة أبطِئ رمز المصدر أو أعِد تشغيله أو افحصه بحثًا عن أي صورة متحركة المجموعة.
- تعديل الصور المتحركة تعديل التوقيت أو التأخير أو المدة أو إزاحة الإطار الرئيسي مجموعة رسوم متحركة. ولا يمكن تعديل الإطارات الرئيسية وبيزيه.
تتيح لوحة الصور المتحركة الصور المتحركة في CSS وعمليات نقل CSS والصور المتحركة على الويب وView Transitions API.
صور requestAnimationFrame المتحركة غير متاحة حتى الآن.
ما هي مجموعة الصور المتحركة؟
مجموعة الصور المتحركة هي مجموعة من الصور المتحركة التي تبدو ذات صلة ببعضها.
في الوقت الحالي، لا تتضمّن الويب مفهومًا حقيقيًا للرسوم المتحرّكة الجماعية، لذا ينشئ مصمّمو الصور المتحركة والمطوّرون الرسوم المتحرّكة الفردية ويحدّدون وقت ظهورها لتبدو كتأثير مرئي متّسق. تتوقع لوحة الصور المتحركة الصور المتحركة ذات الصلة استنادًا إلى وقت البدء (باستثناء حالات التأخير) وتجمعها جنبًا إلى جنب.
بعبارة أخرى، تجمع لوحة الصور المتحركة الصور المتحركة التي يتم تشغيلها في مجموعة النص البرمجي نفسها معًا، ولكن إذا كانت غير متزامنة، تنتهي في مجموعات مختلفة.
افتح لوحة "الصور المتحركة".
هناك طريقتان لفتح لوحة الصور المتحركة:
- اختيار
تخصيص أدوات مطوّري البرامج والتحكّم فيها > مزيد من الأدوات > الصور المتحركة:
افتح قائمة الأوامر بالضغط على أحد الخيارَين التاليَين:
- على نظام التشغيل macOS: Command+Shift+P
- على Windows أو Linux أو ChromeOS: Control+Shift+P
بعد ذلك، ابدأ الكتابة باللغة
Show Animationsواختَر لوحة الدرج المناسبة.
يتم تلقائيًا فتح لوحة الصور المتحركة كعلامة تبويب بجانب درج وحدة التحكّم. يمكنك استخدامها كعلامة تبويب للدرج مع أي لوحة أو نقلها إلى أعلى "أدوات مطوري البرامج".
تلتقط لوحة الصور المتحركة تلقائيًا الصور المتحركة الجارية عند فتحها. إذا تم تشغيل صورة متحركة عند تحميل الصفحة أو توقّفت، أعِد تحميل الصفحة مع فتح اللوحة.
التعرّف على واجهة مستخدم لوحة "الصور المتحركة"
تضم لوحة الصور المتحركة أربعة أقسام رئيسية:
- عناصر التحكّم: من هنا، يمكنك محو جميع مجموعات الصور المتحركة التي تم التقاطها، أو الصور المتحركة إيقافًا مؤقتًا أو استئناف الصور المتحركة، أو تغيير سرعة مجموعة الصور المتحركة المحدّدة.
نظرة عامة: تعرض مجموعات الصور المتحركة التي تم التقاطها من نوعين تم تمييزهما برموز: تمرير و عادية (مستندة إلى الوقت).
اختَر مجموعة صور متحركة هنا لفحصها وتعديلها في لوحة التفاصيل.
المخطط الزمني: استنادًا إلى نوع مجموعة الصور المتحركة، يمكن أن يكون المخطط الزمني:
- بالبكسل للصور المتحركة التي تعتمد على التمرير باستخدام
- يتم استخدامها بالمللي ثانية الصور المتحركة المستندة إلى الوقت.
في المخطط الزمني، يمكنك إعادة تشغيل صورة متحرّكة أو تنقيحها أو الانتقال إليها مباشرةً إلى نقطة معيّنة.
التفاصيل. افحص مجموعة الصور المتحركة المحدّدة وعدِّلها.
لالتقاط صورة متحرّكة، يجب تشغيلها عندما تكون لوحة الصور المتحركة مفتوحة.
فحص الصور المتحركة
بعد تسجيل صورة متحركة، يمكنك إعادة تشغيلها بعدة طرق:
- مرِّر مؤشر الماوس فوق صورتها المصغّرة في لوحة نظرة عامة لمعاينتها.
- اسحب رأس التشغيل (شريط عمودي أحمر) لتصفح الصورة المتحركة لإطار العرض أو انقر في أي مكان على المخطط الزمني لضبط رأس التشغيل على نقطة محددة. يستمر تشغيل الصورة المتحركة إذا كانت قيد التشغيل، وسيتم إيقافها في حال عدم تشغيلها.
- اختَر مجموعة الصور المتحركة من لوحة نظرة عامة (كي يتم عرضها في لوحة التفاصيل)، ثم اضغط على الزر
إعادة التشغيل. تشير رسالة الأشكال البيانية
تتم إعادة تشغيل الحركة في إطار العرض.
انقر على أزرار 
سرعة الحركة في شريط عناصر التحكّم لتغيير سرعة المعاينة لمجموعة الصور المتحركة المختارة.
عرض تفاصيل الصورة المتحركة
بعد تسجيل مجموعة صور متحركة، انقر عليها من لوحة نظرة عامة لعرض تفاصيلها.
في لوحة التفاصيل، يحصل كل رسم متحرّك فردي على صف خاص به. للاطّلاع على الاسم الكامل للعنصر المقابل، عليك تغيير حجم عمود الاسم.
مرِّر مؤشر الماوس فوق صورة متحركة لتمييزها في إطار العرض. انقر على الصورة المتحركة لاختيارها في لوحة العناصر.
تتكرّر بعض الصور المتحركة إلى أجل غير مسمى إذا تم ضبط السمة animation-iteration-count على infinite. تعرِض لوحة الصور المتحركة تعريفاتها وتكرارات استخدامها.
القسم الأغمق من اليسار من الرسوم المتحركة هو تعريفها. تمثل الأقسام على يسار الرسم البياني والتي تظهر بشكلٍ أكثر تميُّزًا عمليات التكرار.
على سبيل المثال، في لقطة الشاشة التالية، يمثل القسمان الثاني والثالث التكرارات للقسم الأول.
إذا تم تطبيق المؤثر المرئي نفسه على عنصرَين، تحدّد لوحة المؤثرات المرئية
اللون نفسه لكلا العنصرَين. واللون نفسه عشوائي وليس له أي دلالة. على سبيل المثال، في لقطة الشاشة أدناه،
يتضمّن العنصران div.eye.left::after وdiv.eye.right::after الصورة المتحركة نفسها (eyes)
المطبَّقة عليهما، كما هو الحال مع العنصرَين div.feet::before وdiv.feet::after.
تعديل الصور المتحركة
هناك ثلاث طرق يمكنك من خلالها تعديل صورة متحركة باستخدام لوحة الرسوم المتحركة:
- مدة عرض الصورة المتحركة
- أوقات عرض الإطارات الرئيسية
- تأخير وقت البدء
في هذا القسم، لنفترض أنّ لقطة الشاشة التالية تمثّل الحركة الأصلية:
لتغيير مدة الرسم المتحرك، اسحب الدائرة الأولى أو الأخيرة.
إذا كان المشهد المتحرّك يحدّد أي قواعد للّقطات الرئيسية، يتم تمثيلها على شكل دوائر داخلية بيضاء. اسحب أحدهما لتغيير توقيت الإطار الرئيسي.
لإضافة مهلة إلى الحركة، انقر على الحركة نفسها، وليس على الدوائر، ثم اسحبها إلى أي مكان.
تعديل @keyframes مباشرةً
عند تعديل @keyframes في الأنماط، يمكنك الاطّلاع على التأثيرات في لوحة الصور المتحركة على الفور.
يمكنك تجربته في صفحة العرض التوضيحي هذه:
- افتح لوحة الصور المتحركة. ويُسجِّل هذا المقياس تلقائيًا الرسم المتحرك المستمر للنبض على الصفحة. اختَر الصورة المتحركة ضمن عناصر التحكّم في شريط الإجراءات.
- في العناصر، افحص العنصر باستخدام
class="pulser"، وفي الأنماط، ابحث عن القسم@keyframes pulse. - جرِّب تعديل الإطارات الرئيسية، على سبيل المثال، تغيير الإطار الرئيسي الثاني من
50%إلى20%. - لاحِظ كيف تؤثر التغييرات التي تجريها في الأنماط على الصورة المتحركة التي تلتقطها لوحة الصور المتحركة.
تعديل العناصر الزائفة ::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)
لتعديل هذه البنية في العناصر > الأنماط:
- افتح أدوات مطوّري البرامج وفحص صفحة استخدمت واجهة برمجة التطبيقات View Transitions API. على سبيل المثال، هذه الصفحة التجريبية.
- في الصور المتحركة، انقر على إيقاف مؤقت.
شغِّل صورة متحركة على الصفحة. تلتقطه لوحة الصور المتحركة وتتوقف مؤقتًا على الفور. يمكنك الآن العثور على بنية
::view-transitionفي DOM أعلى العنصر<head>.
في العناصر > الأنماط، عدِّل ملف CSS للعناصر الصورية
::view-transition.استأنف الصورة المتحركة وأعد تشغيلها لمشاهدة النتيجة.
لمزيد من المعلومات، يُرجى الاطّلاع على عمليات الانتقال السلسة والبسيطة باستخدام View Transitions API.