Pro

مفتش الرسوم المتحركة

يمنحك مفتش الرسوم المتحركة تحكمًا كاملاً في كل رسم متحرك وانتقال CSS يعمل على أي صفحة ويب. يمكنك إيقاف جميع الرسوم المتحركة مؤقتًا في وقت واحد، أو إبطاؤها لفحص كل إطار على حدة، أو تسريعها لاختبار الأداء، أو التمرير عبر المخطط الزمني يدويًا — كل ذلك من لوحة عائمة واحدة دون الحاجة إلى أدوات مطوري المتصفح.

إضافة إلى Chrome أضف إلى Edge إضافة إلى FireFox

يمكن أن يكون تصحيح أخطاء رسوم CSS المتحركة صعبًا للغاية. فهي تحدث بسرعة، وتتداخل، وتجبرك أدوات مطوري المتصفح على البحث في الأنماط المحسوبة للعثور على خصائص الرسوم المتحركة. يحل مفتش الرسوم المتحركة هذه المشكلة عن طريق اكتشاف كل رسم متحرك @keyframes وانتقال CSS على الصفحة تلقائيًا، وسردها مع تكوينها الكامل (المدة، وتخفيف السرعة، والتأخير، وعدد التكرار)، ومنحك عناصر تحكم في التشغيل تعمل بشكل عام أو لكل رسم متحرك. سواء كنت تقوم بتصحيح تأثير تمرير مهتز، أو ضبط توقيت تسلسل دخول الصفحة، أو محاولة فهم كيفية عمل مكتبة رسوم متحركة معقدة تحت الغطاء، فهذه الأداة تضعك في موقع التحكم.

معاينة مباشرة

example.com/animated-landing Animation Inspector: ON

▶

⏸

0.25x 0.5x 1x 2x 4x

4 detected

Animations on page

fadeInUp

.hero-title · @keyframes

0.6s ease-out

delay: 0s · 1 iteration

running
slideIn

.sidebar-nav · @keyframes

0.4s ease

delay: 0.2s · 1 iteration

running
pulse

.notification-badge · @keyframes

2s ease-in-out

delay: 0s · infinite

paused
background-color

.cta-button · transition

0.2s ease

transition property

active

Timeline — fadeInUp 0.24s / 0.60s

0.0s 0.15s 0.30s 0.45s 0.60s

Animation Details

fadeInUp on .hero-title

@keyframes

0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}

Properties

duration0.6s

easingease-out

delay0s

iterations1

directionnormal

fill-modeforwards

Current State (40%)

opacity0.4

translateY12px

الميزات الرئيسية

إيقاف مؤقت / تشغيل كل الرسوم المتحركة

قم بتجميد كل رسم متحرك على الصفحة على الفور بنقرة واحدة. تتوقف جميع الرسوم المتحركة مؤقتًا في موقعها الحالي — دون إعادة تعيينها إلى البداية. انقر فوق تشغيل للاستئناف من حيث توقفت بالضبط. ضروري لفحص حالات منتصف الرسوم المتحركة التي يستحيل التقاطها بالعين المجردة.

تحكم متغير في السرعة

اضبط سرعة تشغيل جميع الرسوم المتحركة في وقت واحد. اختر من 0.25x (ربع السرعة)، أو 0.5x، أو 1x (عادي)، أو 2x، أو 4x. التشغيل بسرعة 0.25x يجعل حتى أسرع الانتقالات (200 مللي ثانية) سهلة الملاحظة والتصحيح.

قائمة الرسوم المتحركة الكاملة

يتم اكتشاف كل رسم متحرك وانتقال CSS على الصفحة تلقائيًا وعرضه في قائمة قابلة للتمرير. يُظهر كل إدخال اسم الرسم المتحرك (أو خاصية الانتقال)، والمدة، ووظيفة التوقيت (ease، linear، cubic-bezier)، والتأخير، وعدد التكرار، وحالة التشغيل الحالية.

التمرير في المخطط الزمني

اسحب شريط التمرير الزمني للتنقل يدويًا عبر الرسم المتحرك إطارًا تلو الآخر. شاهد بالضبط ما يحدث عند نسبة 25%، أو 50%، أو في أي نقطة من دورة الرسم المتحرك. يتم تحديث الصفحة في الوقت الفعلي أثناء السحب.

تحكم لكل رسم متحرك

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

تفاصيل خصائص الرسم المتحرك

انقر فوق أي رسم متحرك في القائمة لرؤية إعلانه الكامل في CSS — تعريف @keyframes، وتفصيل اختصار الرسم المتحرك، وحالات البداية والنهاية المحسوبة، والعناصر التي تم تطبيقها عليها.

ما يمكنك فحصه

مفتش الرسوم المتحركة covers the following, organized by category:

خصائص الرسوم المتحركة

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

خصائص الانتقال

transition-property
transition-duration
transition-timing-function
transition-delay

وظائف التوقيت

ease
ease-in
ease-out
ease-in-out
linear
cubic-bezier()
steps()

خصائص التحويل

transform
transform-origin
translate
rotate
scale
skew

حالات الاستخدام الشائعة

تصحيح أخطاء الرسوم المتحركة المهتزة أو المتقطعة

قم بإبطاء رسم متحرك إلى 0.25x لتحديد الموقع الدقيق للتلعثم أو التقطع. تحقق مما إذا كانت المشكلة ناتجة عن التغيير المتكرر في التخطيط (تحريك العرض/الارتفاع بدلاً من التحويل)، التخفيف غير الصحيح، أو الرسوم المتحركة المتعارضة على نفس العنصر.

ضبط منحنيات التوقيت والتخفيف

استخدم التمرير الزمني لترى كيف يبدو منحنى تخفيف cubic-bezier الخاص بك في الممارسة العملية. قارن سلوك ease-in مقابل ease-out عند نسب مئوية محددة. اضبط القيم وقم بالتشغيل حتى تبدو الحركة صحيحة.

فهم مكتبات الرسوم المتحركة

قم بزيارة موقع ويب يحتوي على رسوم متحركة مبهرة (صفحات هبوط، مواقع المعارض) وافحص كيفية بنائها بالضبط. اطلع على تعريفات @keyframes وقيم التوقيت واستهداف العناصر التي تجعل التسلسلات المعقدة تعمل.

اختبار ضمان الجودة (QA) للتفاعلات المتحركة

تحقق من أن تأثيرات التمرير، ودوارات التحميل، وشاشات الهيكل العظمي، وانتقالات الصفحة تعمل جميعها بشكل صحيح. توقف مؤقتًا في الحالات المتوسطة للتحقق من الأخطاء المرئية مثل تداخل العناصر، أو z-index غير الصحيح أثناء الرسم المتحرك، أو إعادة تدفق المحتوى.

مراجعة إمكانية الوصول للحركة

حدد الرسوم المتحركة التي قد تسبب مشاكل للمستخدمين الذين يعانون من اضطرابات دهليزية. تحقق مما إذا كان يتم احترام prefers-reduced-motion بشكل صحيح عن طريق إيقاف جميع الرسوم المتحركة مؤقتًا ورؤية ما إذا كانت الصفحة تظل تعمل بكامل طاقتها.

كيفية الاستخدام

تفعيل مفتش الرسوم المتحركة

افتح لوحة DevSuite Pro العائمة وانقر على أيقونة مفتش الرسوم المتحركة. تقوم الأداة فورًا بفحص الصفحة وتكتشف جميع رسوم CSS المتحركة والانتقالات قيد التشغيل.

مراجعة الرسوم المتحركة المكتشفة

تظهر لوحة عائمة تسرد كل رسم متحرك موجود على الصفحة. يُظهر كل إدخال اسم الرسم المتحرك، والمدة، ووظيفة التخفيف، وما إذا كان قيد التشغيل حاليًا أو متوقفًا مؤقتًا. توضح شارة العدد إجمالي عدد الرسوم المتحركة المكتشفة.

إيقاف مؤقت وفحص

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

تعديل السرعة

استخدم محدد السرعة لإبطاء الرسوم المتحركة إلى 0.25x للملاحظة التفصيلية، أو تسريعها إلى 4x للتنقل سريعًا عبر الرسوم المتحركة الطويلة. يتم تطبيق تغييرات السرعة فورًا دون إعادة التشغيل.

التمرير عبر المخطط الزمني

اسحب شريط المخطط الزمني لليسار واليمين للتنقل يدويًا عبر الرسم المتحرك. يتم تحديث الصفحة في الوقت الفعلي، مما يوضح لك تمامًا كيف يبدو كل إطار. مثالي لاكتشاف الخلل أو التحقق من منحنيات تخفيف السرعة.