الاطّلاع على دراسات الحالة حول عمليات النقل

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

redBus

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

نفّذ الفريق عمليات انتقال العرض في مواضع متعددة. في ما يلي مثال على دمج تأثيرَي التلاشي والتحرّك في الرسوم المتحركة لرمز تسجيل الدخول على الصفحة الرئيسية.

الرمز

يستخدم هذا التنفيذ حركات متعدّدةview-transition-nameوحركات مخصّصة (scale-downوscale-up). يؤدي استخدام view-transition-nameمع قيمة فريدة إلى فصل مكوّن تسجيل الدخول عن بقية الصفحة لتحريكه بشكل منفصل. يؤدي إنشاء view-transition-name فريد جديد أيضًا إلى إنشاء ::view-transition-group جديد في شجرة العناصر الزائفة (الموضّحة في الرمز التالي)، ما يسمح بمعالجته بشكل منفصل عن ::view-transition-group(root) التلقائي.

::view-transition
├─::view-transition-group(root)
│ └─…
├─::view-transition-group(signin)
│ └─…
└─::view-transition-group(signinclose)   
└─…

//Code for VT for login
  if (!document.startViewTransition) {
   this.setState(
     {
       closeSigninModal: condition ? true : false
     },
     () => {
       if (closeSigninCb) {
         closeSigninCb();
       }
     }
   );
 } else {
   const transition = document.startViewTransition();
   transition.ready.finally(() => {
     setTimeout(() => {
       this.setState(
         {
           closeSigninModal: condition ? true : false
         },
         () => {
           if (closeSigninCb) {
             closeSigninCb();
           }
         }
       );
     }, 500);
   });
 }

.signin_open {
 view-transition-name: signin;
}

.signin_close  {
 view-transition-name: signinclose;
}

::view-transition-group(signin),
::view-transition-group(signinclose) {
 animation-duration: 0.5s;
}

::view-transition-old(signin) {
 animation-name: -ua-view-transition-fade-out, scale-down;
}
::view-transition-new(signin) {
 animation-name: -ua-view-transition-fade-in, scale-up;
}

::view-transition-new(signinclose) {
 animation-name: -ua-view-transition-fade-out, scale-down;
}

@keyframes scale-down {
 to {
     scale: 0;
 }
}

@keyframes scale-up {
 from {
     scale: 0;
 }
}

Tokopedia

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

كانت عملية التنفيذ سهلة للغاية، فباستخدام startViewTransition، حصلنا على الفور على انتقال أكثر سلاسة مقارنةً بالتنفيذ السابق الذي لم يتضمّن أي تأثيرات. آندي ويحاليم، مهندس برامج أول، Tokopedia

قبل

بعد

الرمز

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

const handleClick =
  ({ url, index }) =>
  () => {
    if ('startViewTransition' in document) { //check if browser supports VT
      document.startViewTransition(() => {
        flushSync(() => {
          setDisplayImage({ url, index });
          setActiveImageIndex(index);
        });
      });
    } else { //if VT is not supported, fall back to default behavior
      setDisplayImage({ url, index });
      setActiveImageIndex(index);
    }
  };

...

<Thumbnail onClick={handleClick({url, index})} />

Policybazaar

استخدم قسم الاستثمار في Policybazaar واجهة برمجة التطبيقات View Transition API على عناصر تلميحات المساعدة، مثل "لماذا يجب الشراء؟"، ما جعلها جذابة بصريًا وحسّن استخدام هذه الميزات.

من خلال دمج View Transitions، تمكّنا من إزالة رموز CSS وJavaScript المتكرّرة المسؤولة عن إدارة الصور المتحركة في مختلف الحالات. وقد وفّر ذلك جهدًا كبيرًا في عملية التطوير وحسّن تجربة المستخدم بشكل ملحوظ.—أمان سوني، قائد الفريق التقني في Policybazaar

الرمز

تشبه التعليمة البرمجية التالية الأمثلة السابقة. من الميزات الجديرة بالذكر إمكانية تجاهل الأنماط والرسوم المتحركة التلقائية في ::view-transition-old(root) و::view-transition-new(root). في هذه الحالة، تم تعديل قيمة animation-duration التلقائية إلى 0.4 ثانية.

togglePBAdvantagePopup(state: boolean) {
  this.showPBAdvantagePopup = state;

  if(!document.startViewTransition) {
    changeState();
    return;
  }

  document.startViewTransition(() => {changeState();});

  function changeState() {
    document.querySelector('.block_section').classList.toggle('hide');
    document.querySelector('.righttoggle_box').classList.toggle('show');
  }
}

.righttoggle_box{
  view-transition-name: advantage-transition;
}

.block_section{
  view-transition-name: advantage-transition;
}

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 0.4s;
}

اعتبارات عند استخدام View Transition API

عند استخدام تأثيرات متعدّدة لانتقال العرض على الصفحة نفسها، احرص على أن يكون لكل تأثير أو قسم اسم view-transition-name مختلف لمنع حدوث تعارضات.

أثناء نشاط انتقال العرض (الانتقال)، ستتم إضافة طبقة جديدة فوق بقية واجهة المستخدم. لذا، تجنَّب بدء الانتقال عند التمرير، لأنّه سيتم بدء حدث mouseLeave بشكل غير متوقّع (عندما لا يزال المؤشر الفعلي ثابتًا).

الموارد

• عمليات انتقال سلسة وبسيطة باستخدام View Transition API
• شرح: عمليات انتقال العرض في "صفحات متعدّدة"
• دراسة حالة: التنقّل السلس أصبح ممكنًا باستخدام View Transitions
• دراسة حالة: ما الذي يمكن أن يفعله الويب؟ | تقديم تجارب تنقّل شبيهة بالتطبيقات
• اقتراح التشغيل التفاعلي: إتاحة View Transitions على جميع المتصفّحات
• هل تريد الإبلاغ عن خطأ أو طلب ميزة جديدة؟ نريد أن نسمع رأيك بشأن تطبيقات الصفحة الواحدة وتطبيقات الصفحات المتعددة.

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

• لماذا تُعدّ إمكانات واجهة مستخدم الويب مهمة لموقعك الإلكتروني للتجارة الإلكترونية؟
• دراسات حالة حول الصور المتحركة المستندة إلى التمرير
• دراسات حالة حول Popover API
• دراسات حالة حول Container Queries
• دراسات حالة حول أداة الاختيار ‎:has()‎