تعتبر الرسوم المتحركة إضافة قوية إلى CSS، ولكن شكلها النصي قد يجعل التعامل معها أمرًا صعبًا. أدوات DevTools من Chrome للإنقاذ!

يمكن لرسوم CSS المتحركة، إذا تم تنفيذها بشكل صحيح، أن ترفع موقعك إلى مستوى آخر. لكن إنشاء هذه الرسوم المتحركة قد يكون أمرًا صعبًا بدون أدوات توفر تحكمًا دقيقًا فيها. ماذا لو كانت هناك طريقة لمعرفة ما يحدث بالضبط في كل خطوة من خطوات الرسوم المتحركة الخاصة بك؟

تأتي ميزة DevTools في كل من Google Chrome وFirefox مع القدرة على فحص الرسوم المتحركة الخاصة بك. تعرف على كيفية استخدام هذه الميزة لتحسين الرسوم المتحركة الخاصة بك وإجراء هندسة عكسية للرسوم المتحركة المفضلة لديك على الويب.

تعد أدوات DevTools في Chrome طريقة رائعة للقيام بذلك تصحيح جميع جوانب CSS الخاصة بك، وأكثر من ذلك. ابدأ بهذا المثال البسيط لفهم كيف يمكنك استخدامه لفحص الرسوم المتحركة.

الكود الخاص بهذه الأمثلة متاح في مستودع جيثب.

تحديد الرسوم المتحركة باستخدام HTML وCSS

يعرض HTML التالي صفحة تحتوي على عنصرين: أ و أ. تقوم الصفحة أيضًا باستيراد ملف CSS باسم style.css:

html>
<htmllang="en">
<head>
<metacharset="UTF-8">





instagram viewer



<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<linkrel="stylesheet"href="style.css">
head>
<body>
<divid="box">div>
<button>Test Buttonbutton>
body>
html>

لتصميم كلا العنصرين، قم بإنشاء ملف style.css الملف في نفس المجلد مثل HTML وأضف ما يلي:

#box {
background: red;
height: 400px;
width: 400px;
margin-bottom: 1rem;
animation: rotateAndChangeColor 1000msease-in-out;
}
button {
font-size: larger;
background-color: white;
border: 1pxsolidblack;
padding: 0.5em 1em;
color: black;
height: 80px;
width: 300px;
border-radius: 0.5em;
transition: background-color 100msease-in-out, color 100msease-in-out;
cursor: pointer;
}


button:hover {
background-color: black;
color: white;
}


@keyframes rotateAndChangeColor {
 0% {
rotate: 0deg;
background: red;
 }
 10% {
background: green;
 }
 40% {
background: blue;
 }
 70% {
background: yellow;
 }
 100% {
rotate: 360deg;
background: red;
 }
}

تنشئ هذه الأنماط مكونين:

  • مربع بسيط يدور ويتغير لونه عند تحميل الصفحة.
  • زر يغير لون الخلفية عند المرور فوقه.

لاحظ أن المربع الأحمر يتحرك باستخدام توجيه CSS @keyframe، بينما يستخدم الزر انتقالًا. يتيح لك ذلك مقارنة الطريقتين باستخدام أدوات DevTools الخاصة بالمتصفح.

للوصول إلى الرسوم المتحركة علامة التبويب في Chrome DevTools:

  1. انقر بزر الماوس الأيمن على صفحتك لإظهار قائمة السياق.
  2. انقر فحص.
  3. انقر على النقاط الثلاثية في الزاوية اليمنى العليا.
  4. انتقل إلى المزيد من الأدوات> الرسوم المتحركة.

سيؤدي هذا إلى فتح درج الرسوم المتحركة في القسم السفلي.

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

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

تعرض أدوات DevTools جميع الرسوم المتحركة المتعلقة بالعنصر الذي تحدده. نظرًا لوجود رسم متحرك واحد محدد للمربع الأحمر —RotateAndChangeColor—سترى تفاصيله فقط.

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

عند فحص انتقال الزر، ستعرض DevTools الخصائص الفردية للانتقال: اللون ولون الخلفية.

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

أمثلة الرسوم المتحركة المتقدمة

ابدأ باستبدال الترميز داخل HTML الخاص بك العلامة بالعلامة التالية:


class="move-me move-me-1">steps(4, end)</div>
<br />

class="move-me move-me-2">steps(4, start)</div>
<br />

class="move-me move-me-3">no steps</div>

ثم استبدل جميع الأنماط الموجودة في ملفك style.css ملف بهذا:

.move-me {
display: inline-block; 
padding: 20px;
color: white;
position: relative;
margin: 0 0 10px 0;
}
.move-me-1 {
animation: move-in-steps 8ssteps(4, end) infinite;
}


.move-me-2 {
animation: move-in-steps 8ssteps(4, start) infinite;
}


.move-me-3 {
animation: move-in-steps 8sinfinite;
}


body {
padding: 20px;
}


@keyframes move-in-steps {
 0% {
left: 0;
background: blue;
 }
 100% {
left: 100%;
background: red;
 }
}

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

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

إذا قمت بفتح الرسوم المتحركة في DevTools وقم بتحديث الصفحة، ستجد جميع المعلومات المتعلقة بهذه الرسوم المتحركة:

هناك العديد من العناصر التي تتحرك جميعها خلال نفس الفترة. في هذا السيناريو، يتم تحريك لون الخلفية وموضع المربع في نفس الوقت لجميع المربعات الثلاثة.

شيء آخر يجب ملاحظته هو العقد الموجودة في كل سطر من الرسوم المتحركة. عند حدوث رسم متحرك لعدد لا نهائي من المرات، تظهر العقد مكان بدء ونهاية كل تكرار في الرسم المتحرك.

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

وأخيرًا، يمكنك تحرير الرسوم المتحركة باستخدام DevTools، تمامًا كما تفعل مع أي خاصية CSS. ستظهر جميع التغييرات التي تجريها باستخدام واجهة مستخدم الرسوم المتحركة في الأنماط المضمنة ضمن الأنماط علامة التبويب، والعكس بالعكس. يتيح لك ذلك إجراء تغييرات واختبارها ونسخها إلى مشروعك الفعلي.

تعد ميزة DevTools في Google Chrome أداة رائعة لتصحيح أخطاء CSS، بما في ذلك الرسوم المتحركة. فهو يوفر عرضًا تفصيليًا لكل انتقال ورسوم متحركة على صفحتك، حتى تتمكن من رؤية ما يحدث بالضبط في كل خطوة.

كمطور ويب، يجب أن تكون على دراية بوظيفة DevTools في متصفحك، أو ما يعادلها.