في المرة التالية التي تقوم فيها بإنشاء رسوم متحركة عادية مستندة إلى CSS3 ، قد يكون من المفيد بالنسبة لك الانتقال إلى أدوات مطوري Chrome والاستفادة من ميزات التحقق من الرسوم المتحركة والتخصيص. في هذه المقالة القصيرة ، سنخبرك بأدوات الرسوم المتحركة المتوفرة في Chrome ، وكيفية الوصول إليها ، وكيف يمكنها مساعدتك.
إذا كنت ترغب في اختبار الرسوم المتحركة الخاصة بك CSS3 باستخدام هذه الأدوات ، يمكنك استخدام التعليمات البرمجية الجاهزة من دورتنا:
10 مشاريع CSS3: الواجهة والتخطيط .
هنا النسخة الكاملة من الصفحة.فتح علامة التبويب الرسوم المتحركة
في الصفحة التي تعمل فيها الرسوم المتحركة CSS3 ، افتح أولاً "أدوات مطوري Chrome" بالانتقال إلى
عرض> المطور> أدوات المطور. بدلاً من ذلك ، يمكنك استخدام اختصار لوحة المفاتيح:
F12 أو
CTRL + SHIFT + I.عندما تكون أدوات المطور مفتوحة ، انتقل إلى القائمة المشار إليها بثلاث نقاط رأسية في الزاوية اليمنى العليا ، ثم حدد
المزيد من الأدوات> الرسوم المتحركة ، كما هو موضح أدناه:
عندما تفتح علامة تبويب الرسوم المتحركة لأول مرة ، لن ترى أي محتوى مرتبط بالرسوم المتحركة ، بل ترى فقط رسالة
الاستماع للرسوم المتحركة ... والسبب في ذلك هو أن الأداة قد حصلت على علامة التبويب يجب أن تكون مفتوحة بالفعل عند تحميل الصفحة للمرة الأولى.
لكي تقرأ اللوحة معلومات عن الرسوم المتحركة الخاصة بك ، قم بتحديث الصفحة وسترى ما يلي:
الرمز الصغير الملون في الجزء العلوي الأيسر عبارة عن رسم متحرك لعناصر صفحتك. انقر فوق هذا الرمز لفتح أدوات التحقق من الرسوم المتحركة:
مؤشر التشغيل والإطارات الرئيسية
أثناء تشغيل الرسوم المتحركة ، سترى مؤشر تشغيل أحمر يتحرك على طول الخط الزمني. يمكن نقل هذا المؤشر إلى الموقع المطلوب باستخدام الماوس.
يمثل كل سطر من الواجهة عنصرًا منفصلًا للرسوم المتحركة على الصفحة. قد تلاحظ أن كل سطر يحتوي على قسم بلون مشبع أغمق. ويعرض طول الرسم المتحرك ، وتمثل الأجزاء الأخف التي تليها تكرارًا للرسوم المتحركة.
سترى أيضًا العديد من الدوائر الصغيرة على طول كل سطر من الرسوم المتحركة. وهي تتوافق مع الإطارات الرئيسية للرسوم المتحركة. تمثل الدوائر المظلمة بداية الرسوم المتحركة ونهايتها ، وتمثل الدوائر المجوفة إطارات رئيسية وسيطة بينهما.
الإطارات المفتاحية المتوسطة
يمكن سحب الإطارات الأساسية الوسيطة (الإطارات الأساسية بين بداية ونهاية كل دورة رسوم متحركة) في كل سطر إلى مواضع مختلفة ، وعند نقلها ، سترى كيف يتغير وقت الرسوم المتحركة في نافذة المتصفح. هذه أداة جيدة لتجربة النسبة المئوية التي يجب أن تكون لكل إطار رئيسي متوسط.
ومع ذلك ، تكمن الصعوبة في حقيقة أنك لن ترى تحديثات التعليمات البرمجية في علامة التبويب "أنماط" أثناء هذه التجارب. بدلاً من ذلك ، عندما تحصل على الإطارات الرئيسية الوسيطة الخاصة بك عند النقطة الصحيحة ، يمكنك تحديد قيمة النسبة المئوية التي ستستخدمها للإطار الرئيسي يدويًا.
ضع مؤشر التشغيل مباشرة فوق الإطار الرئيسي المعني ، وسترى طابعًا زمنيًا في الزاوية اليسرى العليا من اللوحة يخبرك بمدى الحركة في ثوان. ثم يمكنك معرفة النسبة المئوية هذه المرة هي إجمالي مدة الرسوم المتحركة. في المثال أدناه ، يبلغ مؤشر التشغيل حوالي ثانية واحدة من الرسم المتحرك لمدة ثانيتين ، لذا فنحن نعلم أن هذا الإطار الرئيسي هو 50٪.
تأخير الرسوم المتحركة ومدتها
يمكنك إجراء تغييرات أخرى في علامة التبويب "
الرسوم المتحركة" التي ستحدّث التعليمات البرمجية في علامة التبويب "
أنماط" حتى تتمكن من رؤية القيم التي تريد إجراؤها بالضبط في CSS. الأول هو التأخير قبل بدء تشغيل الرسوم المتحركة ، والثاني هو مدته.
لتطبيق تأخير قبل بدء رسم متحرك ، مرر فوق خطه حتى ترى مؤشرًا على شكل يد ، ثم اسحبه أفقيًا. سترى تحديث قيمة التأخير في علامة التبويب "
الأنماط" :
لتغيير مدة الرسم المتحرك ، مرر مؤشر الماوس فوق آخر إطار رئيسي حتى ترى المؤشر ثنائي الاتجاه ، ثم اسحبه أفقيًا. مرة أخرى ، ستكون القيمة مرئية في علامة التبويب
أنماط .
وظيفة توقيت الرسوم المتحركة
يمكنك أيضًا استخدام أدوات مطوري Chrome لتغيير منحنى السرعة الذي يتحكم في وقت الرسوم المتحركة. ابدأ بالتحقق من العنصر الذي ينطبق عليه الرسم المتحرك. على يمين وظيفة التوقيت المحددة حاليًا ، سترى رمزًا صغيرًا يحتوي على "التلدة". انقر عليه لفتح محرر منحنى البيزير:
تفتح نافذة تُظهر منحنى Bezier ، الذي يعرض وظيفة التوقيت الحالية. هنا يمكنك تحديد إعداد مسبق موجود بالنقر على إحدى الصور المصغرة الموجودة على اليسار ، أو يمكنك سحب علامات الصورة الرئيسية للمنحنى لإنشاء قيمة مخصصة لمنحنيات البيزير ، والتي يمكنك بعد ذلك نسخها إلى CSS:
أثناء التغيير ، سترى كرة أرجوانية صغيرة تتحرك من اليسار إلى اليمين في أعلى المحرر ، تعرض التغييرات الحالية في وظيفة التوقيت الخاصة بك.
تقديم طبقات دوارة
ميزة أخرى مفيدة هي القدرة على تصور الطبقات المستخدمة في الرسوم المتحركة الخاصة بك ، بما في ذلك القدرة على تدوير التصور المحدد وعرضه من وجهات نظر مختلفة من أجل فهم أفضل لكيفية عمل كل شيء.
لفتح لوحة
Layers ، انتقل إلى قائمة أدوات Chrome Dev وحدد
المزيد من الأدوات> الطبقات.
عندما تكون علامة التبويب
الطبقات مفتوحة ، حدد أداة
وضع التدوير في الزاوية اليسرى العليا:
يمكنك الآن استخدام هذه الأداة لتدوير تصور الطبقة إلى أي زاوية تحتاجها لرؤية أفضل لكيفية عمل أجزاء من الرسوم المتحركة الخاصة بك:
إتمام
دعنا نلقي نظرة سريعة على أدوات الرسوم المتحركة في Chrome:
- افتح أدوات الرسوم المتحركة عن طريق فتح أدوات Chrome Dev أولاً ، ثم من قائمة أدوات dev ، حدد المزيد من الأدوات> الرسوم المتحركة.
- يجب أن تكون لوحة الرسوم المتحركة مفتوحة عند تحميل الصفحة لعرض معلومات الرسوم المتحركة - قم بتحديث الصفحة لتحقيق ذلك.
- انقر فوق الصورة المصغرة للرسم البياني الملون الصغير لعرض معلومات الرسوم المتحركة.
- يمثل كل سطر رسمًا متحركًا.
- تمثل الدوائر المعبأة إطارات مفاتيح البداية والنهاية.
- تمثل الدوائر المجوفة إطارات رئيسية وسيطة.
- يمكن نقل الإطارات الرئيسية الوسيطة ، لكنك لن ترى تحديث الرمز المقابل في علامة التبويب " أنماط" ، وبدلاً من ذلك ، احسب النسبة المئوية التي تقع عليها يدويًا.
- قم بتغيير قيمة تأخير الرسوم المتحركة عن طريق تمريرها فوق الخط حتى ترى مؤشر يدك ، ثم اسحبها أفقياً.
- قم بتغيير مدة الرسم المتحرك عن طريق تحريك المؤشر فوق الإطار الرئيسي الأخير حتى ترى مؤشر المؤشر بمخطط مزدوج ، ثم اسحبه أفقيًا.
- في علامة التبويب " أنماط" ، انقر فوق الرمز الموجود على يسار وظيفة التوقيت الموجودة لفتح محرر منحنى البيزير.
- اختر من الإعدادات المسبقة وظيفة الوقت للإعدادات أو أنشئ الإعدادات الخاصة بك عن طريق تغيير صورة المنحنى الرئيسي.
- افتح لوحة الطبقات بالانتقال إلى قائمة أدوات مطوري Chrome واختيار المزيد من الأدوات> الطبقات.
- في هذه اللوحة ، استخدم وضع التدوير لعرض طبقات الرسوم المتحركة من أي زاوية.
في بعض الأحيان ، يمكن أن يكون إنشاء الرسوم المتحركة المثالية عملية دقيقة جدًا ودقيقة. يمكن أن توفر هذه الأدوات المعلومات التي تشتد الحاجة إليها حول الرسوم المتحركة ، بالإضافة إلى التعليقات في الوقت الفعلي لمساعدتك على تحقيق التميز.