مصحح الحركات والانتقالات

Chrome DevTools → More tools → Animations (أو Cmd+Shift+P → "Animations"). تسجل اللوحة انتقالات CSS والرسوم المتحركة أثناء تشغيلها، وتعرضها على مخطط زمني مع عناصر تحكم لتحريك المؤشر وسرعة التشغيل.

توفر لوحة Animations سرعات تشغيل تبلغ 10% و25% و100%. يكشف الإبطاء إلى 10% مشكلات التوقيت ومشكلات منحنيات easing والتقطّع التي لا تظهر بالسرعة الكاملة، وهو أمر أساسي لتصحيح أخطاء تنسيق الحركة المعقدة متعددة العناصر.

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

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

انقر على صف رسم متحرك لتوسيعه. ستظهر الإطارات المفتاحية الفردية على شكل ماسات في المخطط الزمني. انقر على ماسة إطار مفتاحي للانتقال إلى قاعدة @keyframes المقابلة في لوحة الأنماط وتعديلها مع معاينة مباشرة.

تعرض Chrome DevTools منحنيات cubic-bezier لكل جزء من الرسم المتحرك. انقر على رمز المنحنى بجانب دالة توقيت في لوحة الأنماط لفتح محرر cubic-bezier، ثم اسحب نقاط التحكم وشاهد تحديث الرسم المتحرك في الوقت الفعلي.

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

مع تفعيل Rendering → Layer Borders (من DevTools → Rendering)، تظهر على العناصر المتحركة الموجودة في طبقة GPU مستقلة حدود خضراء. لا تعرض الرسوم المتحركة غير المركبة (التي تحرّك width أو top أو color) حدود طبقة، وقد تسبب وميض الطلاء، ويمكن رؤيته عند تفعيل Paint Flashing.

سجّل ملف Performance أثناء تشغيل الرسم المتحرك. ابحث في المخطط اللهبي عن أحداث Paint أو Layout الطويلة المتزامنة مع إطارات الرسم المتحرك. تظهر الرسوم المتحركة التي ينفذها compositor فقط (transform/opacity) على شكل أحداث Composite Layer فقط، ولذلك تكون سريعة ولا تتطلب الطلاء.

تظهر الرسوم المتحركة في JavaScript التي تستخدم rAF في لوحة Performance ضمن قسم Frames. تؤدي استدعاءات rAF الطويلة التي تتجاوز 16ms إلى إسقاط الإطارات. حلّل الاستدعاء للعثور على الحسابات المكلفة، وانقلها إلى خارج الخيط الرئيسي باستخدام Web Workers إن أمكن.

تظهر Web Animations API ‏(element.animate()) والمكتبات المستندة إلى WAAPI في لوحة Animations إلى جانب الرسوم المتحركة في CSS. لا تستطيع اللوحة تمييز المصدر — CSS أم WAAPI — لكن عناصر التحكم في تحريك المؤشر والتشغيل البطيء تعمل مع كليهما.

ماذا يتيح لك تحريك مؤشر التشغيل في لوحة Animations؟

تسجل لوحة Animations في DevTools انتقالات CSS والرسوم المتحركة ضمن مخطط زمني يمكن تحريك المؤشر عليه، مع سرعات تشغيل متغيرة وفحص للإطارات المفتاحية وتحرير لمنحنيات cubic-bezier. وبالاقتران مع تحليل Performance وتصوير الطبقات، توفر أدوات شاملة لتصحيح صحة الرسوم المتحركة في CSS وأدائها.