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

Rachel Andrew

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

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

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

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

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

عرض Pure CSS 3D Daydream على 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، ويعمل بسلاسة.

الخاتمة

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