دراسة حالة حول أداء الرسوم المتحركة المعتمدة على التمرير

Yuriko Hirota

ما هي الميزات الجديدة في الصور المتحركة المستندة إلى الانتقال؟

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

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

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

وهذا يجعل إنشاء صور متحركة مستندة إلى الانتقال وتحقّق أداءً جيدًا ومتزامنة مع التمرير أمرًا مستحيلاً أو صعبًا للغاية.

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

تقارن هذه المقالة بين الأسلوب الجديد وتقنية JavaScript التقليدية لتوضيح مدى سهولة وسلاسة الرسوم المتحركة المستندة إلى التمرير باستخدام واجهة برمجة التطبيقات الجديدة.

واجهة برمجة التطبيقات CSS الخاصة بالصور المتحركة المستندة إلى الانتقال مقارنةً بلغة JavaScript الكلاسيكية

تم إنشاء شريط التقدم التالي باستخدام تقنيات JavaScript الخاصة بالفئات.

يستجيب المستند في كل مرة يحدث فيها الحدث scroll لاحتساب النسبة المئوية التي انتقل إليها المستخدم في scrollHeight.

document.addEventListener("scroll&q>uot;, () = {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

يعرض العرض التوضيحي التالي شريط التقدّم نفسه باستخدام واجهة برمجة التطبيقات الجديدة مع CSS.

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

تعمل ميزة animation-timeline الجديدة في CSS على تحويل موضع في نطاق التمرير إلى نسبة مئوية من مستوى التقدّم تلقائيًا، وبالتالي تتولّى جميع العمليات المعقّدة.

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

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

كما هو متوقّع، يصبح إصدار JavaScript الكلاسيكي بطيئًا وغير سلس بسبب تقاطع موارد سلسلة التعليمات الرئيسية. من ناحية أخرى، لا يتأثر إصدار CSS على الإطلاق بعمل JavaScript المكثّف ويمكنه الاستجابة لتفاعلات المستخدم المتعلقة بالتمرير.

يختلف استخدام وحدة المعالجة المركزية تمامًا في "أدوات مطوّري البرامج"، كما هو موضّح في لقطات الشاشة التالية.

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

واجهة برمجة التطبيقات الجديدة المستندة إلى JavaScript للصور المتحركة التي يتم تشغيلها عند التمرير مقارنةً بلغة JavaScript الكلاسيكية

لا تقتصر مزايا واجهة برمجة التطبيقات الجديدة على CSS فقط. يمكنك أيضًا إنشاء رسوم متحركة سلسة جدًا مستندة إلى التمرير باستخدام JavaScript. اطّلِع على المثال التالي:

const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

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

تعمل واجهة برمجة التطبيقات الجديدة هذه أيضًا بالتزامن مع Web Animations API (WAAPI) وCSS Animations API الحالية لتفعيل الرسوم المتحركة المستندة إلى التمرير بشكل تصريحي.

المزيد من العروض التوضيحية والمراجع

يمكنك الاطّلاع على طرق التنفيذ المختلفة للرسوم المتحركة المستندة إلى التمرير من خلال هذا الموقع التجريبي، حيث يمكنك مقارنة العروض التوضيحية باستخدام واجهات برمجة التطبيقات الجديدة هذه من CSS وJavaScript.

إذا كنت مهتمًا بمعرفة المزيد عن الرسوم المتحركة الجديدة المستندة إلى التمرير، يمكنك الاطّلاع على هذه المقالة وجلسة I/O 2023.