กรณีศึกษาเกี่ยวกับประสิทธิภาพของภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน

Yuriko Hirota

มีอะไรใหม่เกี่ยวกับภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน

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

ในอดีต วิธีเดียวในการสร้างภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนคือการตอบสนองต่อเหตุการณ์การเลื่อนในเทรดหลัก ซึ่งทำให้เกิดปัญหาใหญ่ 2 ประการ ดังนี้

• การเลื่อนจะดำเนินการในเธรดแยกต่างหาก จึงทำให้เหตุการณ์การเลื่อนทำงานแบบไม่พร้อมกัน
• ภาพเคลื่อนไหวในเทรดหลักอาจเกิดอาการกระตุก

ซึ่งทำให้การสร้างภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนที่มีประสิทธิภาพและซิงค์กับการเลื่อนเป็นไปไม่ได้หรือทำได้ยากมาก

ตอนนี้เราขอแนะนำชุด API ใหม่เพื่อรองรับภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน ซึ่งคุณใช้ได้จาก CSS หรือ JavaScript API พยายามใช้ทรัพยากรของเทรดหลักให้น้อยที่สุดเท่าที่จะทำได้ ซึ่งจะช่วยให้การติดตั้งใช้งานภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนง่ายขึ้นมากและราบรื่นยิ่งขึ้นด้วย ปัจจุบัน API ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนได้รับการรองรับในเบราว์เซอร์ต่อไปนี้

บทความนี้จะเปรียบเทียบแนวทางใหม่กับเทคนิค JavaScript แบบคลาสสิกเพื่อแสดงให้เห็นว่าภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนนั้นง่ายและราบรื่นเพียงใดเมื่อใช้ API ใหม่

CSS API ของภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนเทียบกับ JavaScript แบบคลาสสิก

แถบความคืบหน้าตัวอย่างต่อไปนี้สร้างขึ้นโดยใช้เทคนิค JavaScript ของคลาส

เอกสารจะตอบสนองทุกครั้งที่เกิดเหตุการณ์ scroll เพื่อคำนวณเปอร์เซ็นต์ของ scrollHeight ที่ผู้ใช้เลื่อน

document.addEventListener("scroll", () => {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

การสาธิตต่อไปนี้แสดงแถบความคืบหน้าเดียวกันโดยใช้ API ใหม่กับ CSS

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

ฟีเจอร์ CSS animation-timeline ใหม่จะแปลงตำแหน่งในช่วงการเลื่อนเป็นเปอร์เซ็นต์ความคืบหน้าโดยอัตโนมัติ จึงช่วยลดภาระงานหนักทั้งหมด

ทีนี้มาถึงส่วนที่น่าสนใจกันบ้าง สมมติว่าคุณใช้การคำนวณที่ซับซ้อนมากในเว็บไซต์ทั้ง 2 เวอร์ชัน ซึ่งจะใช้ทรัพยากรของเทรดหลักส่วนใหญ่

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

ดังที่คาดไว้ เวอร์ชัน JavaScript แบบคลาสสิกจะทำงานช้าและกระตุกเนื่องจากจุดเชื่อมต่อทรัพยากรของชุดข้อความหลัก ในทางกลับกัน เวอร์ชัน CSS จะไม่ได้รับผลกระทบจากงาน JavaScript ที่หนักหน่วงและสามารถตอบสนองต่อการโต้ตอบการเลื่อนของผู้ใช้ได้

การใช้งาน CPU ในเครื่องมือสำหรับนักพัฒนาเว็บจะแตกต่างกันโดยสิ้นเชิง ดังที่แสดงในภาพหน้าจอต่อไปนี้

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

JavaScript API สำหรับภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนแบบใหม่เทียบกับ JavaScript แบบคลาสสิก

ประโยชน์ของ API ใหม่ไม่ได้จำกัดอยู่แค่ CSS คุณยังสร้างภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนได้อย่างราบรื่นโดยใช้ JavaScript ด้วย ดูตัวอย่างต่อไปนี้

const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

ซึ่งจะช่วยให้คุณสร้างภาพเคลื่อนไหวแถบความคืบหน้าแบบเดียวกับที่แสดงในเดโม CSS ก่อนหน้าได้โดยใช้ JavaScript เพียงอย่างเดียว เทคโนโลยีพื้นฐานจะเหมือนกับเวอร์ชัน CSS API พยายามใช้ทรัพยากรของเทรดหลักให้น้อยที่สุดเท่าที่จะเป็นไปได้ ซึ่งจะทำให้ภาพเคลื่อนไหวราบรื่นขึ้นมากเมื่อเทียบกับแนวทาง JavaScript แบบคลาสสิก

นอกจากนี้ API ใหม่นี้ยังทำงานร่วมกับ Web Animations API (WAAPI) และ CSS Animations API ที่มีอยู่เพื่อเปิดใช้ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนแบบประกาศ

การสาธิตและแหล่งข้อมูลเพิ่มเติม

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

หากสนใจดูข้อมูลเพิ่มเติมเกี่ยวกับภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนแบบใหม่ โปรดอ่านบทความนี้และการพูดคุยใน I/O 2023