أمثلة على الصور المتحركة العالية الأداء في CSS

Rachel Andrew

في هذه المشاركة، يمكنك التعرّف على كيفية إنشاء بعض الصور المتحركة الرائجة المتوفّرة على CodePen. تستخدم جميع هذه الصور المتحركة الأساليب العالية الأداء التي تمت مناقشتها في مقالات أخرى ضمن هذا القسم.

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

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

عرض الصورة المتحركة لتحميل المعالج على CodePen

تم إنشاء هذه الصورة المتحركة الخاصة بالتحميل بالكامل باستخدام CSS. تم إنشاء الصورة بالإضافة إلى كل الصور المتحركة باستخدام CSS وHTML، بدون استخدام صور أو JavaScript. لفهم كيفية إنشائه ومستوى أدائه، يمكنك استخدام "أدوات مطوّري البرامج في Chrome".

فحص الصور المتحركة باستخدام "أدوات مطوري البرامج في Chrome"

مع تشغيل الصورة المتحركة، افتح علامة التبويب "الأداء" في "أدوات مطوّري البرامج في Chrome" وسجِّل بضع ثوانٍ من الصورة المتحركة. من المفترض أن يظهر في "الملخّص" أنّ المتصفّح لا يُجري أي عمليات تنسيق أو رسم عند تشغيل هذه الصورة المتحركة.

لمعرفة كيفية تحقيق هذه الحركة بدون الحاجة إلى التنسيق والطلاء، افحص أيًا من العناصر المتحركة في "أدوات مطوري البرامج في Chrome". يمكنك استخدام لوحة الرسوم المتحرّكة لتحديد موضع العناصر المتحرّكة المختلفة، وسيؤدي النقر على أي عنصر إلى تمييزه في نموذج 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 DevTools، يمكنك العثور على اللقطات الرئيسية من خلال الانتقال إلى أسفل لوحة "الأنماط". ستلاحظ أنّه تم إنشاء الصورة المتحركة باستخدام 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" وسجِّل بضع ثوانٍ من الصورة المتحركة. أوقِف التسجيل، ومن المفترض ألا تظهر لك أي إدخالات في الرسم البياني للعرض بدون انقطاع لميزة إعادة احتساب النمط. أنت تعلم الآن أن هذه الرسوم المتحركة لا تتسبب في إعادة حساب الأنماط، وبالتالي عمليات التخطيط والطلاء.

في Firefox DevTools، يمكنك فحص الدائرة لمعرفة آلية عمل هذه الصورة المتحركة. يشير <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

عرض كرة ثلاثية الأبعاد باستخدام CSS على 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، ويُشغّل بسلاسة.

الخاتمة

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