في هذه المشاركة، يمكنك التعرّف على كيفية إنشاء بعض الصور المتحركة الرائجة على CodePen. تستخدم جميع هذه الرسوم المتحركة الأساليب الفنية التي تمت مناقشتها في مقالات أخرى في هذا القسم.
راجِع القسم ما سبب بطء بعض الصور المتحركة؟ للاطّلاع على النظرية الكامنة وراء هذه الاقتراحات، وعلى دليل الصور المتحركة للحصول على نصائح عملية.
صورة متحركة أثناء تحميل المعالج
عرض الصورة المتحركة لمعالج التحميل على CodePen
وقد تم تصميم حركة التحميل هذه بالكامل باستخدام CSS. تم إنشاء الصورة بالإضافة إلى جميع الرسوم المتحركة بتنسيق CSS وHTML، بدون صور أو JavaScript. يمكنك استخدام "أدوات مطوري البرامج في Chrome" لفهم طريقة إنشائها ومستوى أدائها.
فحص الصورة المتحركة باستخدام "أدوات مطوري البرامج في Chrome"
أثناء تشغيل الصورة المتحركة، افتح علامة التبويب "الأداء" في "أدوات مطوري البرامج في Chrome" وسجِّل بضع ثوانٍ من الصورة المتحركة. يُفترض أن ترى في الملخص أن المتصفح لا يجري أي عمليات تصميم أو عرض عند تشغيل هذه الحركة.
لمعرفة كيفية تنفيذ هذه الصورة المتحركة بدون التسبب في استخدام التنسيق والطلاء، أفحص أيًا من العناصر المتحركة في Chrome DevTool. يمكنك استخدام لوحة الصور المتحركة لتحديد موقع العناصر المتحركة المختلفة، وسيؤدي النقر على أي عنصر إلى تمييزه في DOM.
على سبيل المثال، حدد المثلث، وشاهد كيف يتحول مربع العنصر أثناء رحلته إلى الهواء، بينما يدور، ثم يعود إلى موضع البداية.
مع استمرار تحديد العنصر، انظر إلى لوحة الأنماط. هناك يمكنك رؤية CSS التي ترسم شكل المثلث، والرسوم المتحركة المستخدمة.
آلية العمل
يتم إنشاء المثلث باستخدام العنصر الزائف ::after لإضافة محتوى تم إنشاؤه، باستخدام الحدود لإنشاء الشكل.
.triangle {
position: absolute;
bottom: -62px;
left: -10px;
width: 110px;
height: 110px;
border-radius: 50%;
}
.triangle::after {
content: "";
position: absolute;
top: 0;
right: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 28px 48px 28px;
border-color: transparent transparent #89beb3 transparent;
}
تتم إضافة الرسوم المتحركة مع سطر CSS التالي،
animation: path_triangle 10s ease-in-out infinite;
ومع البقاء في "أدوات مطوري البرامج في Chrome"، يمكنك العثور على الإطارات الرئيسية من خلال التمرير لأسفل "لوحة الأنماط".
هناك سوف تجد أنه تم إنشاء الحركة باستخدام transform لتغيير موضع العنصر وتدويره.
السمة transform هي إحدى السمات الموضّحة في دليل الصور المتحركة،
والتي لا تؤدي إلى إجراء المتصفّح لعمليات التنسيق أو العرض (ما يؤدي إلى بطء الصور المتحركة).
@keyframes path_triangle {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-172px) translatex(10px) rotate(-10deg);
}
55% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
58% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
63% {
transform: rotate(-360deg);
}
}
يستخدم كل جزء من الأجزاء المتحركة المختلفة في هذه الرسوم المتحركة أساليب مماثلة. والناتج هو رسم متحرك معقد يعمل بسلاسة.
دائرة نابضة
عرض الدائرة النابضة بالحياة على CodePen
يتم استخدام هذا النوع من الرسوم المتحركة أحيانًا للفت الانتباه إلى شيء ما على الصفحة. لفهم الحركة، يمكنك استخدام "أدوات مطوري البرامج في Firefox".
فحص الصور المتحركة باستخدام "أدوات مطوري البرامج في Firefox"
أثناء تشغيل الصورة المتحركة، افتح علامة التبويب "الأداء" في "أدوات مطوري البرامج في Firefox" وسجِّل بضع ثوانٍ من الصورة المتحركة. أوقف التسجيل، وفي العرض الإعلاني بدون انقطاع يُفترض أن ترى عدم وجود إدخالات لإعادة حساب النمط. أنت تعلم الآن أن هذه الرسوم المتحركة لا تتسبب في إعادة حساب النمط، وبالتالي عمليات التخطيط والطلاء.
عند البقاء في أدوات مطوري البرامج في فايرفوكس، افحص الدائرة لمعرفة طريقة عمل هذه الصورة المتحركة.
يشير <div> مع الفئة pulsating-circle إلى موضع الدائرة، إلا أنّه لا يرسم دائرة بنفسه.
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
يتم الحصول على الدائرة المرئية والرسومات المتحركة باستخدام العنصرين الزائفين ::before و::after.
ينشئ العنصر ::before حلقة مبهمة تمتد خارج الدائرة البيضاء،
باستخدام رسم متحرك يُطلق عليه اسم pulse-ring،
ويؤدّي إلى تحريك transform: scale وopacity.
.pulsating-circle::before {
content: '';
position: relative;
display: block;
width: 300%;
height: 300%;
box-sizing: border-box;
margin-left: -100%;
margin-top: -100%;
border-radius: 45px;
background-color: #01a4e9;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(0.33);
}
80%, 100% {
opacity: 0;
}
}
هناك طريقة أخرى لمعرفة الخصائص التي يتم تحريكها، وهي النقر على لوحة الصور المتحركة في "أدوات مطوري البرامج في Firefox". سترى بعد ذلك تصورًا للرسوم المتحركة المستخدمة، والخصائص التي يتم تحريكها.
يتم إنشاء الدائرة البيضاء نفسها وتحريكها باستخدام العنصر ::after الزائف.
تستخدم الصورة المتحركة pulse-dot السمة transform: scale لزيادة حجم النقطة وتصغيرها أثناء الصورة المتحركة.
.pulsating-circle::after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: white;
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
@keyframes pulse-dot {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
يمكن استخدام رسم متحرك مثل هذا في أماكن مختلفة في تطبيقك، ومن المهم ألا تؤثر هذه اللمسات الصغيرة على الأداء العام لتطبيقك.
صورة بانورامية كروية لـ CSS ثلاثية الأبعاد
عرض Pure CSS 3D حاليًا على CodePen
تبدو هذه الرسوم المتحركة معقدة بشكل لا يصدق، إلا أنها تستخدم تقنيات رأيناها بالفعل في الأمثلة السابقة. يأتي التعقيد من تحريك عدد كبير من العناصر.
افتح "أدوات مطوري البرامج في Chrome" واختَر أحد العناصر التي تتضمّن فئة plane.
تتكون الكرة من مجموعة من الطائرات ومكبرات الصوت الدوّارة.
هذه الطائرات ومكبرات الصوت داخل غلاف <div>،
وهذا العنصر هو الذي يدور باستخدام السمة transform: rotate3d.
.sphere-wrapper {
transform-style: preserve-3d;
width: 300px;
height: 300px;
position: relative;
animation: rotate3d 10s linear infinite;
}
@keyframes rotate3d {
0% {
transform: rotate3d(1, 1, 1, 0deg);
}
25% {
transform: rotate3d(1, 1, 1, 90deg);
}
50% {
transform: rotate3d(1, 1, 1, 180deg);
}
75% {
transform: rotate3d(1, 1, 1, 270deg);
}
100% {
transform: rotate3d(1, 1, 1, 360deg);
}
}
يمكن العثور على النقاط مدمجة داخل العنصرَين plane وspoke، وهي تستخدم رسمًا متحركًا يستخدم عملية تحويل لتغيير حجمها وترجمتها.
ويؤدي ذلك إلى إنشاء التأثير الوامض.
.spoke-15 .dot,
.spoke-21 .dot {
animation: pulsate 0.5s infinite 0.83333333s alternate both;
background-color: #55ffee;
}
@-webkit-keyframes pulsate {
0% {
transform: rotateX(90deg) scale(0.3) translateZ(20px);
}
100% {
transform: rotateX(90deg) scale(1) translateZ(0px);
}
}
العمل المتضمنة في إنشاء هذه الرسوم المتحركة كان هو الحصول على التوقيت الصحيح لخلق تأثير الانعطاف والحيوي. الرسوم المتحركة نفسها واضحة إلى حد كبير، وتستخدم طرقًا تعمل بشكل جيد للغاية.
يمكنك الاطّلاع على أداء هذه الصورة المتحركة من خلال فتح "أدوات مطوري البرامج في Chrome" وتسجيل الأداء أثناء تشغيلها. بعد التحميل الأولي، لا تقوم الرسوم المتحركة بتشغيل Layout أو Paint، وتعمل بسلاسة.
الخلاصة
من هذه الأمثلة، يمكنك معرفة كيف يمكن أن تؤدي الصور المتحركة لبعض الخصائص باستخدام الطرق الأداء إلى إنشاء بعض الرسوم المتحركة الرائعة. باستخدام الإعدادات التلقائية لأساليب الأداء الموضّحة في دليل الصور المتحركة، يمكنك قضاء وقتك في إنشاء التأثير الذي تريده، مع تقليل القلق بشأن بطء الصفحة.