หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

แหล่งที่มา

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

redBus

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

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

การเปลี่ยนภาพแบบเลือนและเลื่อนเข้าเมื่อผู้ใช้คลิกไอคอนเข้าสู่ระบบในหน้าแรกของ redBus

รหัส

การใช้งานนี้ใช้view-transition-nameภาพเคลื่อนไหวแบบกำหนดเอง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 เราได้รับการเปลี่ยนภาพอย่างนุ่มนวลที่ดีขึ้นทันทีเมื่อเทียบกับการติดตั้งใช้งานก่อนหน้านี้โดยไม่มีเอฟเฟกต์ใดๆ 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

เมื่อใช้เอฟเฟกต์การเปลี่ยนมุมมองหลายรายการในหน้าเดียวกัน โปรดตรวจสอบว่าคุณมี view-transition-name ที่แตกต่างกันสำหรับแต่ละเอฟเฟกต์หรือส่วนเพื่อป้องกันไม่ให้เกิดความสับสน

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

แหล่งข้อมูล

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

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