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

Rachel Andrew

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

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

صورة متحركة تظهر أثناء تحميل المعالج

عرض الصورة المتحركة الخاصة بتحميل Wizard على CodePen

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

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

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

الملخّص في "أدوات مطوري البرامج"
الملخّص بعد تحليل أداء الحركة في المعالج

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

"لوحة الصور المتحركة" (Animations Panel) التي تعرض الأجزاء المختلفة من الصورة المتحركة
عرض العناصر واختيارها في لوحة "الصور المتحركة" ضمن "أدوات مطوّري البرامج في Chrome"

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

فيديو يعرض كيفية تتبُّع مسار المثلث في "أدوات مطوّري البرامج في Chrome"

مع استمرار تحديد العنصر، انظر إلى لوحة الأنماط. هناك يمكنك رؤية 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"، يمكنك العثور على الإطارات الرئيسية من خلال الانتقال للأسفل في "لوحة الأنماط" (Style Panel). ستجد هناك أنّه تم إنشاء الصورة المتحركة باستخدام 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

أثناء تشغيل الصورة المتحركة، افتح علامة التبويب "الأداء" (Performance) في أدوات مطوّري البرامج في Firefox وسجِّل بضع ثوانٍ من الصورة المتحركة. أوقِف التسجيل، وفي العرض الانحداري لطلبات الشبكة، من المفترض ألا تظهر أي إدخالات لـ إعادة احتساب النمط. أنت تعرف الآن أنّ هذه الحركة لا تؤدي إلى إعادة احتساب الأنماط، وبالتالي لا تؤدي إلى عمليات التنسيق والرسم.

تفاصيل الصورة المتحركة في Firefox Waterfall
العرض الانحداري لطلبات الشبكة في أدوات مطوّري البرامج في 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. سيظهر لك بعد ذلك رسم بياني للصور المتحركة المستخدَمة والخصائص التي يتم تحريكها.

عند اختيار العنصر الزائف ‎ ::before، يمكننا معرفة السمات التي يتم تحريكها.

يتم إنشاء الدائرة البيضاء نفسها وتحريكها باستخدام العنصر الزائف ::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 Sphere على 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" وتسجيل "الأداء" أثناء تشغيلها. بعد التحميل الأولي، لا تؤدي الحركة إلى تشغيل التنسيق أو الرسم، وتعمل بسلاسة.

الخاتمة

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