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

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

ทีนี้มาลองดูส่วนที่น่าสนใจกัน สมมติว่าคุณใช้การคํานวณที่หนักมากในเว็บไซต์ทั้ง 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