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

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 في عناصر نصائح المساعدة، مثل "أسباب الشراء"، مما جعلها جذابة من الناحية المرئية وساهم في تحسين استخدام هذه الميزات.

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

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

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

الموارد

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

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

• ما أهمية إمكانات واجهة المستخدم على الويب لموقعك الإلكتروني للتجارة الإلكترونية؟
• دراسات حالة عن الصور المتحركة المستندة إلى الانتقال للأعلى أو للأسفل
• دراسات حالة حول واجهة برمجة التطبيقات Popup API
• دراسات حالة طلبات الحِزم
• دراسات حالة عن أداة الاختيار ‎:has()‎