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

Yuriko Hirota

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

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

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

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

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

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

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

API ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนของ CSS เทียบกับ 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);
}

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

ตอนนี้มาดูส่วนที่น่าสนใจกัน สมมติว่าคุณใช้การคำนวณที่ซับซ้อนมากในเว็บไซต์ทั้ง 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 คุณจะเห็นว่ารูปภาพค่อยๆ ปรากฏขึ้นเมื่อคุณเลื่อน

API JavaScript ใหม่สำหรับภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนเทียบกับ 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