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

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

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);
}

ฟีเจอร์ 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 คุณจะเห็นรูปภาพค่อยๆ ปรากฏขึ้นขณะเลื่อน

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