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

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
• شرح: عرض عمليات النقل في "الإعلانات المتجاوبة على شبكة البحث"
• دراسة حالة: إتاحة التنقّل السلس باستخدام "عمليات انتقال العرض"
• دراسة حالة: ما الذي يمكن أن يفعله الويب؟ | توفير تنقّلات شبيهة بالتطبيقات
• اقتراح بشأن التشغيل التفاعلي: إتاحة "عمليات انتقال العرض" على جميع المتصفّحات
• هل تريد الإبلاغ عن خطأ أو طلب ميزة جديدة؟ يهمّنا معرفة رأيك بشأن SPA والإعلانات المتجاوبة على شبكة البحث.

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

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