فحص الرسوم المتحركة وتعديلها باستخدام علامة التبويب الرسوم المتحركة في أدراج "أدوات مطوّري البرامج في Chrome"
نظرة عامة
لالتقاط صور متحركة، افتح لوحة الصور المتحركة. وترصد هذه الميزة تلقائيًا الصور المتحركة وتصنّفها في مجموعات.
تهدف لوحة الصور المتحركة إلى غرضين رئيسيين:
- فحص الصور المتحركة يمكنك إبطاء أو إعادة تشغيل أو فحص رمز المصدر لمجموعة متحركة.
- تعديل الصور المتحركة عدِّل التوقيت أو التأخير أو المدة أو إزاحة الإطا��ات الرئيسية لمجموعة صور متحركة. لا تتوفّر ميزة تعديل اللقطات الرئيسية وتعديل منحنيات بيزيير.
تتيح لوحة الحركات استخدام حركات CSS وعمليات انتقال CSS وحركات الويب وواجهة برمجة التطبيقات View Transitions API.
لا يمكن استخدام الصور المتحركة requestAnimationFrame حتى الآن.
ما هي مجموعة الصور المتحركة؟
مجموعة الصور المتحركة هي مجموعة من الصور المتحركة التي تبدو مرتبطة ببعضها.
في الوقت الحالي، لا تتضمّن الويب مفهومًا حقيقيًا للرسوم المتحرّكة الجماعية، لذا ينشئ مصمّمو الصور المتحركة والمطوّرون الرسوم المتحرّكة الفردية ويحدّدون وقت ظهورها لتبدو كتأثير مرئي متّسق. تتوقّع لوحة الصور المتحركة الصور المتحركة ذات الصلة استنادًا إلى وقت البدء (باستثناء التأخيرات) وتجميعها جنبًا إلى جنب.
بعبارة أخرى، تجمع لوحة الحركات الحركات التي يتم تشغيلها في مجموعة النصوص البرمجية نفسها، ولكن إذا كانت غير متزامنة، تنتهي في مجموعات مختلفة.
افتح لوحة "الصور المتحركة".
هناك طريقتان لفتح لوحة الصور المتحركة:
- اختَر
تخصيص أدوات مطوّري البرامج والتحكّم فيها > مزيد من الأدوات > الصور المتحركة.
افتح قائمة الأوامر بالضغط على أحد الخيارَين التاليَين:
- على نظام التشغيل macOS: Command+Shift+P
- على نظام التشغيل Windows أو Linux أو ChromeOS: Control+Shift+P
بعد ذل��، ابدأ كتابة
Show Animationsواختَر لوحة "الدرج" المقابلة.
يتم تلقائيًا فتح لوحة الصور المتحركة كعلامة تبويب بجانب درج وحدة التحكّم. يمكنك استخدامها كعلامة تبويب في الدرج مع أي لوحة أو نقلها إلى أعلى "أدوات مطوّري البرامج في Chrome".
تلتقط لوحة الصور المتحركة تلقائيًا الصور المتحركة الجارية عند فتحها. إذا تم تشغيل صورة متحركة عند تحميل الصفحة أو توقّفت، أعِد تحميل الصفحة مع فتح اللوحة.
التعرّف على واجهة مستخدم لوحة "الصور المتحركة"
تضم لوحة الصور المتحركة أربعة أقسام رئيسية:
- عناصر التحكّم: من هنا، يمكنك محو كل مجموعات الرسوم المتحرّكة التي تم تسجيلها أو إيقاف مؤقت أو استئناف الرسوم المتحرّكة أو تغيير سرعة مجموعة الرسوم المتحرّكة المحدّدة.
نظرة عامة: تعرِض هذه السمة مجموعتَي صور متحركة تم التقاطهما من نوعَين تم وضع رمزَين عليهما: و العادي (استنادًا إلى الوقت).
اختَر مجموعة صور متحركة هنا لفحصها وتعديلها في لوحة التفاصيل.
المخطط الزمني: استنادًا إلى نوع مجموعة الصور المتحركة، يمكن أن يكون المخطط الزمني:
- يتم استخدام هذه الوحدات لتحديد سرعة الصور المتحركة التي يتم تشغيلها باستخدام .
- يتم استخدامها بالمللي ثانية الصور المتحركة المستندة إلى الوقت.
في المخطط الزمني، يمكنك إعادة تشغيل صورة متحرّكة أو تنقيحها أو الانتقال مباشرةً إلى نقطة معيّنة.
التفاصيل. فحص مجموعة الرسوم المتحرّكة المحدّدة وتعديلها
لالتقاط صورة متحركة، شغ��ّلها عندما تكون لوحة الصور المتحركة مفتوحة.
فحص الصور المتحركة
بعد تسجيل صورة متحركة، يمكنك إعادة تشغيلها بعدة طرق:
- مرِّر مؤشر الماوس فوق صورته المصغّرة في الجزء نظرة عامة لعرض معاينة لها.
- اسحب رأس التشغيل (شريط عمودي أحمر) لتصفح الصورة المتحركة لإطار العرض أو انقر في أي مكان على المخطط الزمني لضبط رأس التشغيل على نقطة محددة. يستمر تشغيل الصورة المتحركة إذا كان يتم تشغيلها من قبل، ويتوقف في حال أخرى.
- اختَر مجموعة الصور المتحركة من الجزء نظرة عامة (بحيث يتم عرضها في لوحة التفاصيل) واضغط على الزر
إعادة التشغيل. تتم إعادة تشغيل المؤثر
المتحرك في إطار العرض.
انقر على الزرَّين 
سرعة الصور المتحركة في شريط عناصر التحكّم لتغيير سرعة معاينة مجموعة الصور المتحركة المحدّدة.
عرض تفاصيل الصور المتحركة
بعد تسجيل مجموعة صور متحركة، انقر عليها من لوحة نظرة عامة لعرض تفاصيلها.
في لوحة التفاصيل، يتمّ تخصيص صفّ لكلّ صورة متحركة فردية. للاطّلاع على الاسم الكامل للعنصر المقابل، عليك تغيير حجم عمود "الاسم".
مرِّر مؤشر الماوس فوق صورة متحركة لتمييزها في إطار العرض. انقر على الحركة لتحديدها في لوحة العناصر.
تتكرّر بعض الصور المتحركة إلى أجل غير مسمى إذا تم ضبط السمة 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.