ดูกรณีศึกษาเกี่ยวกับการเปลี่ยน

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

การเปลี่ยนมุมมองเป็นการเปลี่ยนแบบเคลื่อนไหวที่ราบรื่นระหว่างสถานะต่างๆ ของหน้าเว็บหรือ UI ของแอปพลิเคชัน View Transition API ได้รับการออกแบบมาเพื่อช่วยให้คุณสร้างเอฟเฟกต์เหล่านี้ด้วยวิธีที่เรียบง่ายและมีประสิทธิภาพมากขึ้นกว่าที่เคย API นี้มีประโยชน์มากกว่าแนวทาง JavaScript แบบเดิมหลายประการ เช่น

  • ประสบการณ์ของผู้ใช้ที่ดีขึ้น: การเปลี่ยนอย่างลื่นไหลและสัญลักษณ์ที่แสดงภาพจะนำทางผู้ใช้ผ่านการเปลี่ยนแปลงใน UI ทำให้การนำทางดูเป็นธรรมชาติและน่ารำคาญน้อยลง
  • ความต่อเนื่องของภาพ: การรักษาความรู้สึกต่อเนื่องระหว่างการดูจะช่วยลดภาระทางความคิดและช่วยให้ผู้ใช้มีสมาธิจดจ่ออยู่กับแอปพลิเคชัน
  • ประสิทธิภาพ: API จะพยายามใช้ทรัพยากรเทรดหลักให้น้อยที่สุดเท่าที่จะทำได้ เพื่อสร้างภาพเคลื่อนไหวที่ราบรื่นยิ่งขึ้น
  • สวยงามทันสมัย: การเปลี่ยนที่ดีขึ้นช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่สมบูรณ์และน่าสนใจ

การรองรับเบราว์เซอร์

  • 111
  • 111
  • x
  • 18

แหล่งที่มา

โพสต์นี้เป็นส่วนหนึ่งของซีรีส์ที่จะพูดถึงวิธีที่บริษัทอีคอมเมิร์ซปรับปรุงเว็บไซต์ของตนโดยใช้ฟีเจอร์ใหม่ของ CSS และ UI ในบทความนี้ คุณจะได้ทราบเหตุผลที่บริษัทใช้งาน View Transition API มาประยุกต์ใช้

redBus

RedBus พยายามสร้างความเท่าเทียมให้ประสบการณ์ในการใช้งานแบบเนทีฟและเว็บมากที่สุดเท่าที่จะเป็นไปได้มาโดยตลอด ก่อนที่จะใช้ View Transition API การนำภาพเคลื่อนไหวเหล่านี้มาใช้กับเนื้อหาเว็บนั้นเป็นเรื่องที่ท้าทาย แต่เมื่อใช้ API เราพบว่าการสร้างการเปลี่ยนผ่านในเส้นทางต่างๆ ของผู้ใช้ นั้นใช้งานง่ายมาก เพื่อให้ประสบการณ์การใช้งานบนเว็บคล้ายกับแอปมากขึ้น ทั้งหมดนี้ประกอบกับประโยชน์ด้านประสิทธิภาพต่างๆ ทำให้เป็นฟีเจอร์ที่ต้องมีสำหรับทุกเว็บไซต์ Amit Kumar ผู้จัดการอาวุโสฝ่ายวิศวกรรมของ RedBus

ทีมของเราได้ใช้การเปลี่ยนมุมมองในหลายตำแหน่ง นี่เป็นตัวอย่างของการใช้ภาพเคลื่อนไหวแบบเฟดเข้าและเลื่อนเข้าไว้ด้วยกันในไอคอนการเข้าสู่ระบบในหน้าแรก

การจางลงและเลื่อนในมุมมองจะเปลี่ยนเมื่อผู้ใช้คลิกไอคอนเข้าสู่ระบบในหน้าแรกของ 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;
 }
}

โตโกพีเดีย

ทีมใช้การเปลี่ยนมุมมองเพื่อเพิ่มภาพเคลื่อนไหวที่ค่อยๆ จางลงเมื่อผู้ใช้สลับไปมาระหว่างภาพขนาดย่อของผลิตภัณฑ์

การใช้งานนั้นง่ายมาก แค่ใช้ startViewTransition ก็ปรับการใช้งานได้ราบรื่นขึ้นกว่าแบบจางๆ เมื่อเทียบกับการใช้งานก่อนหน้า โดยไม่มีผลกระทบใดๆAndy Wihalim วิศวกรซอฟต์แวร์ อาวุโสจาก 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 ใช้ View Transition API กับองค์ประกอบเคล็ดลับความช่วยเหลือ เช่น "ทำไมต้องซื้อ" จึงทำให้ดึงดูดสายตาและปรับปรุงการใช้งานฟีเจอร์ดังกล่าว

การรวมการเปลี่ยนผ่านมุมมองช่วยกำจัดโค้ด CSS และ JavaScript ที่ซ้ำกันซึ่งมีหน้าที่จัดการภาพเคลื่อนไหวในหลายๆ สถานะ ช่วยประหยัดเวลาในการพัฒนาและยกระดับประสบการณ์ของผู้ใช้ได้อย่างมาก Aman Soni หัวหน้าฝ่ายเทคโนโลยีของ Policybazaar

ดูภาพเคลื่อนไหวการเปลี่ยนหน้าใน CTA "ทำไมต้องซื้อจาก 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

เมื่อใช้เอฟเฟกต์การเปลี่ยนมุมมองหลายรายการในหน้าเดียวกัน โปรดตรวจสอบว่าคุณมีชื่อการเปลี่ยนมุมมองที่แตกต่างกันสําหรับเอฟเฟกต์หรือส่วนแต่ละรายการเพื่อป้องกันข้อขัดแย้ง

ขณะที่การเปลี่ยนมุมมองทำงานอยู่ (การเปลี่ยน) ระบบจะเพิ่มเลเยอร์ใหม่ที่ด้านบนของ UI ที่เหลือ ดังนั้น โปรดหลีกเลี่ยงการทริกเกอร์การเปลี่ยนเมื่อวางเมาส์เหนือ เนื่องจากเหตุการณ์ mouseLeave จะทริกเกอร์โดยไม่คาดคิด (เมื่อเคอร์เซอร์จริงยังไม่เคลื่อนที่)

แหล่งข้อมูล

อ่านบทความอื่นๆ ในชุดนี้ ซึ่งพูดถึงวิธีที่บริษัทอีคอมเมิร์ซได้รับประโยชน์จากการใช้ฟีเจอร์ใหม่ของ CSS และ UI เช่น ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน ป๊อปอัป การค้นหาคอนเทนเนอร์ และตัวเลือก has()