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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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

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

ومع ذلك، كجزء من الميزات الجديدة في CSS وواجهة المستخدم في المتصفحات، يمكنك الآن إنشاء صور متحركة تعريفية تعتمد على الانتقال للأسفل. من خلال "المخططات الزمنية للتمرير" و"المخططات الزمنية للعرض"، يمكنك الآن استخدام مفاهيم جديدة تتكامل مع Web Animations API (WAAPI) وCSS Animations API الحاليين، في دراسة الحالة هذه، اكتشِف كيف تستفيد حاليًا Tokopedia وredBus و Policybazaar من هذه الميزة الجديدة.

التوافق مع المتصفح

  • 115
  • 115
  • x

المصدر

توكوبيديا

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

ونجحنا في خفض ما يصل إلى% 80 من سطور الرمز البرمجي مقارنةً باستخدام أحداث التمرير التقليدية في JavaScript ولاحظنا أنّ متوسط استخدام وحدة المعالجة المركزية (CPU) قد انخفض من 50% إلى 2% أثناء التمرير. آندي ويهاليم، مهندس برامج أول في Tokopedia

إمكانية تغيير مستوى رؤية الشريط اللاصق العلوي بشكل متحرك بناءً على موضع تمرير المستخدم.

الرمز

تستخدم عملية التنفيذ التالية الدالة scroll() لضبط مخطط زمني مجهول المصدر لتقدم عملية الانتقال للتحكم في مستوى تقدّم الصورة المتحركة في CSS. تتغيّر إمكانية رؤية الشريط اللاصق العلوي بناءً على موضع الانتقال ضمن animationRange المحدّد.

const toggleBar = keyframes({
  to: { height: 48 },
});

export const cssWrapper = css({
  position: 'fixed',
  left: 0,
  width: '100vw',
  pointerEvents: 'none',
  marginTop: 120,
  height: 0,
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-end',
  animation: `${toggleBar} linear both`,
  animationTimeline: 'scroll()',
  animationRange: '20px 70px',
});

redBus

لدى RedBus رسوم متحركة مختلفة للأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي في الصفحة المقصودة لمهام المهام، والتي تظهر في وقت مبكر من مسار الإحالة الناجحة لجميع المستخدمين. وباستخدام الرسوم المتحركة التي تعتمد على التمرير، تمكنوا من استبدال عمليات تنفيذ JavaScript المخصصة هذه بـ CSS لتحقيق نفس التأثير.

حالات الاستخدام

معرض الصور مع عرض الصور (للأجهزة الجوّالة) ومسار الغلاف (لأجهزة الكمبيوتر المكتبي)

تكشف الصورة المتحركة التي تعتمد على التمرير للأسفل تأثير تحميل الصور في RedBus "Things To Do" معرض الصور.

الرمز (الأجهزة الجوّالة)

في المثال السابق، استخدمت Tokopedia المخطط الزمني لتقدم عملية الانتقال المجهول. في الرمز التالي، يستخدم redBus المخطط الزمني المسمّى لتقدم المشاهدة. تعمل الحركة على تغيير opacity وclip-path للعنصر <img> ضمن animation-range المحدّد داخل أقرب شريط تمرير أصل للعنصر، وهو شريط تمرير معرض الصور في هذه الحالة.

const reveal = keyframes`
   from {
       opacity: 0;
       clip-path: inset(45% 20% 45% 20%);
   }
   to {
       opacity: 1;
       clip-path: inset(0% 0% 0% 0%);
   }`

const CardImage = styled.div`
   width: 100%;
   height: 100%;
   img {
       border-top-left-radius: 0.75rem;
       border-top-right-radius: 0.75rem;
       height: 100%;
       width: 100%;
       object-fit: cover;
       view-timeline-name: --revealing-image;
       view-timeline-axis: block;
  
       /* Attach animation, linked to the  View Timeline */
       animation: linear ${reveal} both;
       animation-timeline: --revealing-image;
  
       /* Tweak range when effect should run*/
       animation-range: entry 25% cover 50%;
   }
`;

يسرّنا جدًا أن نرى هذه الميزة تقدّم مزيجًا مثاليًا من الأداء مع تجربة أفضل، وتعزّز إشارات تجربة الصفحة الخاصة بنا لتحسين محركات البحث. علاوة على ذلك، فإن الحد الأدنى من منحنى التعلم يجعله ضروريًا لكل موقع ويب للتجارة الإلكترونية. كما تلقّينا أيضًا ملاحظات ودعمًا إيجابيًا من فِرق أخرى للاستفادة من خدمة SDA في المزيد من تجارب المستخدمين.— أميت كومار، المدير الهندسي الأول في شركة redBus.

بازار السياسات

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

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

رسم متحرك مستند إلى التمرير animate-timeline في جدول المقارنة بين الاستثمار والحياة النشاط التجاري

الرمز

على غرار المثال السابق من Tokopedia، يستخدم تطبيق Policybazaar الدالة scroll() لضبط مخطط زمني مجهول الهوية لتقدم عملية الانتقال من أجل التحكّم في مدى تقدّم الصور المتحركة في CSS. في هذه الحالة، يتم تقليل حجم الخط وتلاشي العنوان بناءً على موضع التمرير ضمن علامة animation-range المحدّدة.

@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}

@keyframes move-and-fade-header {
  to {
    translate: 0% -5%;
    top:103px;
}
}

@keyframes shrink-name {
  to {
    font-size: 1.5rem;
  }
}

الرسوم المتحركة التي تعتمد على التمرير كنمط شائع عبر رحلة المستخدم

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

@keyframes animate-in {
 0% { opacity: 0; transform: translateY(10%); }
 100% { opacity: 1; transform: translateY(0); }
}

@keyframes animate-out {
 0% { opacity: 1; transform: translateY(0); }
 100% { opacity: 0; transform: translateY(-10%); }
}

.flyin_animate {
   animation: animate-in linear forwards;
   animation-timeline: view();
   animation-range: entry;
}

RedBus (الصفحة الرئيسية)

تأثير الانتقال السريع والتحرك بالتمرير لتحميل بطاقات المنتجات على الصفحة المقصودة "Things To Do" لموقع RedBus.

Policybazaar (صفحة بيانات المنتجات)

ظهور تأثيرات متحركة مع الانتقال للأسفل وانتهاء صلاحية بطاقات المنتجات في قسمَي "الاستثمار والحياة" (خط النشاط التجاري).

Tokopedia (صفحة تفاصيل المنتج)

صورة متحركة "التلاشي" و"الاختفاء التدريجي" أثناء تصفُّح المنتجات المدرَجة.

أمور يجب مراعاتها عند استخدام واجهة برمجة التطبيقات Animations API المستندة إلى التمرير

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

من CSS، يمكنك استخدام @supports لاختبار إمكانية عرض المخطط الزمني للصور المتحركة قبل استخدام الصور المتحركة التي تعتمد على التمرير. مثال:

@supports (animation-timeline: scroll()) {

}

المراجع

اطّلِع على المقالات الأخرى في هذه السلسلة التي تتحدث عن كيفية استفادة شركات التجارة الإلكترونية من استخدام الميزات الجديدة CSS وواجهة المستخدم، مثل "عرض الانتقالات" و"نافذة منبثقة" و"طلبات بحث الحاوية" وأداة اختيار has().