Worklet แอนิเมชันของ Houdini

Surma

เพิ่มประสิทธิภาพภาพเคลื่อนไหวของเว็บแอป

สรุป: เวิร์กเลตภาพเคลื่อนไหวช่วยให้คุณเขียนภาพเคลื่อนไหวแบบบังคับซึ่งทำงานในอัตราเฟรมเดิมของอุปกรณ์เพื่อให้ราบรื่นยิ่งขึ้นและไม่มีกระตุก™ ทําให้ภาพเคลื่อนไหวมีความยืดหยุ่นมากขึ้นเมื่อเกิดข้อบกพร่องในเธรดหลัก และสามารถลิงก์กับการเลื่อนแทนเวลา เวิร์กเลตภาพเคลื่อนไหวมีอยู่ใน Chrome Canary (อยู่หลัง Flag "ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลอง") และเรากำลังวางแผนช่วงทดลองใช้จากต้นทางสำหรับ Chrome 71 คุณเริ่มใช้ฟีเจอร์นี้เป็นการปรับปรุงแบบค่อยเป็นค่อยไปได้ตั้งแต่วันนี้

มี Animation API อื่นอีกไหม

ไม่ได้ ฟีเจอร์นี้เป็นส่วนขยายของฟีเจอร์ที่เรามีอยู่แล้ว และเรามีเหตุผลที่ดี มาเริ่มกันตั้งแต่แรกเลยค่ะ หากต้องการให้องค์ประกอบ DOM บนเว็บเคลื่อนไหวในปัจจุบัน คุณมี 2 1⁄2 ตัวเลือก ได้แก่ การเปลี่ยนของ CSS สำหรับการเปลี่ยนจาก A ไป B แบบง่าย, ภาพเคลื่อนไหวของ CSS สำหรับภาพเคลื่อนไหวที่อิงตามเวลาแบบวนซ้ำและซับซ้อน และ Web Animations API (WAAPI) สำหรับภาพเคลื่อนไหวที่ซับซ้อนโดยไม่มีกฎเกณฑ์ตายตัว ตารางการสนับสนุนของ WAAPI ดูเหมือนจะไม่ค่อยดีนัก แต่เรากำลังพยายามปรับปรุงให้ดีขึ้น ในระหว่างนี้ เรามี polyfill

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

แล้วสถานะล่ะ ลองนึกถึงแถบที่อยู่ของ Chrome บน Android เป็นต้น หากเลื่อนลง ไอคอนจะเลื่อนออกไปนอกมุมมอง แต่ทันทีที่คุณเลื่อนขึ้น โฆษณาจะกลับมาปรากฏขึ้นอีกครั้ง แม้ว่าคุณจะเลื่อนหน้านั้นไปครึ่งทางแล้วก็ตาม ภาพเคลื่อนไหวไม่เพียงขึ้นอยู่กับตำแหน่งการเลื่อน แต่ยังขึ้นอยู่กับทิศทางการเลื่อนก่อนหน้าด้วย ข้อมูลมีสถานะ

อีกปัญหาหนึ่งคือการจัดสไตล์แถบเลื่อน เป็นที่ทราบกันดีว่าไม่สามารถจัดรูปแบบได้ หรืออย่างน้อยก็มีสไตล์ไม่ได้มากพอ ฉันต้องทำอย่างไรหากต้องการใช้ Nyan Cat เป็นแถบเลื่อน ไม่ว่าคุณจะเลือกเทคนิคใดก็ตาม การสร้างแถบเลื่อนที่กําหนดเองจะทํางานได้ไม่ดีและไม่ง่าย

ประเด็นคือสิ่งเหล่านี้ทั้งหมดใช้ยากและแทบเป็นไปไม่ได้ที่จะติดตั้งใช้งานอย่างมีประสิทธิภาพ ส่วนใหญ่แล้วจะใช้เหตุการณ์และ/หรือ requestAnimationFrame ซึ่งอาจคงความละเอียดไว้ที่ 60 FPS แม้ว่าหน้าจอของคุณจะทำงานที่ 90fps หรือ 120fps ขึ้นไปได้ และใช้งบประมาณเฟรมเทรดหลักที่มีค่าเป็นเศษส่วน

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

ข้อมูลเบื้องต้นเกี่ยวกับภาพเคลื่อนไหวและไทม์ไลน์

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

เอกสารแต่ละรายการมี document.timeline ค่าเริ่มต้นที่ 0 เมื่อสร้างเอกสารและนับมิลลิวินาทีนับตั้งแต่ที่เอกสารเริ่มมีอยู่ ภาพเคลื่อนไหวทั้งหมดของเอกสารจะทำงานตามไทม์ไลน์นี้

มาดูตัวอย่างข้อมูลโค้ด WAAPI นี้เพื่อให้เข้าใจมากขึ้น

const animation = new Animation(
  new KeyframeEffect(
    document.querySelector('#a'),
    [
      {
        transform: 'translateX(0)',
      },
      {
        transform: 'translateX(500px)',
      },
      {
        transform: 'translateY(500px)',
      },
    ],
    {
      delay: 3000,
      duration: 2000,
      iterations: 3,
    }
  ),
  document.timeline
);

animation.play();

เมื่อเราเรียก animation.play() ภาพเคลื่อนไหวจะใช้ currentTime ของไทม์ไลน์เป็นเวลาเริ่มต้น ภาพเคลื่อนไหวของเรามีความล่าช้า 3000ms ซึ่งหมายความว่าภาพเคลื่อนไหวจะเริ่ม (หรือ "ทำงาน") เมื่อไทม์ไลน์ถึง `startTime

  • 3000. After that time, the animation engine will animate the given element from the first keyframe (translateX(0)), through all intermediate keyframes (translateX(500px)) all the way to the last keyframe (translateY(500px)) in exactly 2000ms, as prescribed by thedurationoptions. Since we have a duration of 2000ms, we will reach the middle keyframe when the timeline'scurrentTimeisstartTime + 3000 + 1000and the last keyframe atstartTime + 3000 + 2000` ประเด็นคือไทม์ไลน์จะควบคุมตำแหน่งของเราในแอนิเมชัน

เมื่อภาพเคลื่อนไหวไปถึงคีย์เฟรมสุดท้ายแล้ว ระบบจะข้ามกลับไปที่คีย์เฟรมแรกและเริ่มภาพเคลื่อนไหวซ้ำรอบถัดไป กระบวนการนี้จะทําซ้ำทั้งหมด 3 ครั้งนับตั้งแต่ที่เราตั้งค่า iterations: 3 หากต้องการให้ภาพเคลื่อนไหวเล่นไปเรื่อยๆ เราจะเขียน iterations: Number.POSITIVE_INFINITY นี่คือผลลัพธ์ของโค้ดด้านบน

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

การเขียนเวิร์กเลตภาพเคลื่อนไหว

เมื่อเราเข้าใจเรื่องลำดับเวลาแล้ว เราจะมาเริ่มดู Animation Worklet และดูว่า Analytics จะช่วยให้คุณทำงานกับไทม์ไลน์ได้อย่างไร! Animation Worklet API ไม่ได้มีพื้นฐานมาจาก WAAPI เท่านั้น แต่ยังเป็นไปตามลักษณะของ Extensible Web โดยเป็นพื้นฐานระดับล่างที่อธิบายวิธีการทำงานของ WAAPI ไวยากรณ์ของทั้ง 2 รายการมีความคล้ายคลึงกันมาก

Worklet ภาพเคลื่อนไหว WAAPI 
new WorkletAnimation(
  'passthrough',
  new KeyframeEffect(
    document.querySelector('#a'),
    [
      {
        transform: 'translateX(0)'
      },
      {
        transform: 'translateX(500px)'
      }
    ],
    {
      duration: 2000,
      iterations: Number.POSITIVE_INFINITY
    }
  ),
  document.timeline
).play();
      
        new Animation(

        new KeyframeEffect(
        document.querySelector('#a'),
        [
        {
        transform: 'translateX(0)'
        },
        {
        transform: 'translateX(500px)'
        }
        ],
        {
        duration: 2000,
        iterations: Number.POSITIVE_INFINITY
        }
        ),
        document.timeline
        ).play();

ความแตกต่างอยู่ที่พารามิเตอร์แรก ซึ่งเป็นชื่อของ Worklet ที่ขับเคลื่อนภาพเคลื่อนไหวนี้

การตรวจหาองค์ประกอบ

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

if ('animationWorklet' in CSS) {
  // AnimationWorklet is supported!
}

กำลังโหลดชิ้นงาน

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

เราต้องตรวจสอบว่าได้โหลดเวิร์กเลตชื่อ "passthrough" แล้วก่อนที่จะประกาศภาพเคลื่อนไหว

// index.html
await CSS.animationWorklet.addModule('passthrough-aw.js');
// ... WorkletAnimation initialization from above ...

// passthrough-aw.js
registerAnimator(
  'passthrough',
  class {
    animate(currentTime, effect) {
      effect.localTime = currentTime;
    }
  }
);

ข้อมูลเกี่ยวกับที่นี่ เรากําลังลงทะเบียนคลาสเป็นภาพเคลื่อนไหวโดยใช้การเรียก registerAnimator() ของ AnimationWorklet โดยตั้งชื่อเป็น "passthrough" ซึ่งเป็นชื่อเดียวกับที่เราใช้ในคอนสตรคเตอร์ WorkletAnimation() ด้านบน เมื่อการลงทะเบียนเสร็จสมบูรณ์ สัญญาที่ให้ไว้โดย addModule() จะได้รับการแก้ไขและเราจะเริ่มสร้างภาพเคลื่อนไหวโดยใช้ Worklet ดังกล่าวได้

ระบบจะเรียกใช้เมธอด animate() ของอินสแตนซ์สำหรับทุกเฟรมที่เบราว์เซอร์ต้องการแสดงผล โดยผ่าน currentTime ของไทม์ไลน์ของภาพเคลื่อนไหว รวมถึงเอฟเฟกต์ที่ประมวลผลอยู่ เรามีเอฟเฟกต์เพียงรายการเดียวคือ KeyframeEffect และใช้ currentTime เพื่อตั้งค่า localTime ของเอฟเฟกต์ ด้วยเหตุนี้ โปรแกรมแสดงภาพเคลื่อนไหวนี้จึงเรียกว่า "พาสทรู" เมื่อใช้โค้ดสำหรับ Worklet WAAPI และ AnimationWorklet ด้านบนนี้จะทำงานเหมือนกันทุกประการกับที่คุณเห็นในการสาธิต

เวลา

พารามิเตอร์ currentTime ของเมธอด animate() คือ currentTime ของไทม์ไลน์ที่เราส่งไปยังคอนสตรัคเตอร์ WorkletAnimation() ในตัวอย่างก่อนหน้านี้ เราเพิ่งส่งเวลานั้นไปยังเอฟเฟกต์ แต่เนื่องจากนี่คือโค้ด JavaScript และเราสามารถบิดเบือนเวลา 💫

function remap(minIn, maxIn, minOut, maxOut, v) {
  return ((v - minIn) / (maxIn - minIn)) * (maxOut - minOut) + minOut;
}
registerAnimator(
  'sin',
  class {
    animate(currentTime, effect) {
      effect.localTime = remap(
        -1,
        1,
        0,
        2000,
        Math.sin((currentTime * 2 * Math.PI) / 2000)
      );
    }
  }
);

เราจะนํา Math.sin() ของ currentTime มาแมปค่านั้นใหม่เป็นช่วง [0; 2000] ซึ่งเป็นช่วงเวลาที่กําหนดเอฟเฟกต์ ตอนนี้ภาพเคลื่อนไหวดูแตกต่างมากโดยไม่ต้องเปลี่ยนคีย์เฟรมหรือตัวเลือกสำหรับภาพเคลื่อนไหว โค้ดเวิร์กเล็ตอาจมีความซับซ้อนโดยไม่มีกฎเกณฑ์ และช่วยให้คุณกำหนดได้โดยอัตโนมัติว่าเอฟเฟกต์ใดจะเล่นตามลำดับใดและในขอบเขตใด

ตัวเลือกเหนือตัวเลือก

คุณอาจต้องการใช้เวิร์กเล็ตซ้ำและเปลี่ยนตัวเลข ด้วยเหตุนี้ ตัวสร้าง WorkletAnimation จึงอนุญาตให้คุณส่งออบเจ็กต์ตัวเลือกไปยังเวิร์กเลตได้ ดังนี้

registerAnimator(
  'factor',
  class {
    constructor(options = {}) {
      this.factor = options.factor || 1;
    }
    animate(currentTime, effect) {
      effect.localTime = currentTime * this.factor;
    }
  }
);

new WorkletAnimation(
  'factor',
  new KeyframeEffect(
    document.querySelector('#b'),
    [
      /* ... same keyframes as before ... */
    ],
    {
      duration: 2000,
      iterations: Number.POSITIVE_INFINITY,
    }
  ),
  document.timeline,
  {factor: 0.5}
).play();

ในตัวอย่างนี้ ภาพเคลื่อนไหวทั้ง 2 รายการได้รับการสร้างด้วยโค้ดเดียวกัน แต่มีตัวเลือกต่างกัน

ขอทราบชื่อรัฐในท้องถิ่นของคุณ!

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

registerAnimator(
  'randomspin',
  class {
    constructor(options = {}, state = {}) {
      this.direction = state.direction || (Math.random() > 0.5 ? 1 : -1);
    }
    animate(currentTime, effect) {
      // Some math to make sure that `localTime` is always > 0.
      effect.localTime = 2000 + this.direction * (currentTime % 2000);
    }
    destroy() {
      return {
        direction: this.direction,
      };
    }
  }
);

ทุกครั้งที่คุณรีเฟรชการสาธิตนี้ คุณจะมีสิทธิ์ 50/50 ว่าสี่เหลี่ยมจัตุรัสจะหมุนไปทางใด หากเบราว์เซอร์จะรื้อถอน Worklet และย้ายไปยังเธรดอื่น ก็จะมีการเรียกใช้ Math.random() อีกครั้งเมื่อสร้าง ซึ่งอาจทําให้ทิศทางเปลี่ยนแปลงอย่างฉับพลัน เพื่อป้องกันไม่ให้เกิดเหตุการณ์ดังกล่าว เราจะแสดงผลลัพธ์เป็นสถานะของภาพเคลื่อนไหวซึ่งเลือกแบบสุ่ม และนำไปใช้ในคอนสตรัคเตอร์ (หากมี)

สัมผัสความต่อเนื่องของกาลเวลาในอวกาศ: ScrollTimeline

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

ScrollTimeline เปิดโอกาสใหม่ๆ และให้คุณควบคุมภาพเคลื่อนไหวด้วยการเลื่อนแทนเวลา เราจะนําชิ้นงาน "การส่งต่อ" แรกสุดของเรามาใช้ซ้ำในการสาธิตนี้

new WorkletAnimation(
  'passthrough',
  new KeyframeEffect(
    document.querySelector('#a'),
    [
      {
        transform: 'translateX(0)',
      },
      {
        transform: 'translateX(500px)',
      },
    ],
    {
      duration: 2000,
      fill: 'both',
    }
  ),
  new ScrollTimeline({
    scrollSource: document.querySelector('main'),
    orientation: 'vertical', // "horizontal" or "vertical".
    timeRange: 2000,
  })
).play();

เราจะสร้าง ScrollTimeline ใหม่แทนการส่ง document.timeline คุณอาจเดาได้ว่า ScrollTimeline ไม่ได้ใช้เวลา แต่ใช้ตําแหน่งการเลื่อนของ scrollSource เพื่อตั้งค่า currentTime ในเวิร์กเลต การเลื่อนขึ้นสุด (หรือซ้ายสุด) หมายถึง currentTime = 0 ส่วนการเลื่อนลงสุด (หรือขวาสุด) จะตั้งค่า currentTime เป็น timeRange หากเลื่อนกล่องในการสาธิตนี้ คุณจะควบคุมตำแหน่งของกล่องสีแดงได้

หากคุณสร้าง ScrollTimeline ที่มีองค์ประกอบที่ไม่เลื่อน currentTime ของไทม์ไลน์จะเป็น NaN ดังนั้น คุณควรเตรียมพร้อมให้ NaN เป็น currentTime ของคุณเสมอ โดยเฉพาะเมื่อใช้การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ โดยทั่วไปแล้ว การตั้งค่าเริ่มต้นเป็นค่า 0 มักเป็นทางเลือกที่เหมาะสม

การลิงก์ภาพเคลื่อนไหวกับตำแหน่งการเลื่อนเป็นสิ่งที่เราพยายามทำมาอย่างยาวนาน แต่ก็ไม่เคยบรรลุเป้าหมายในระดับความถูกต้องนี้ (นอกเหนือจากการแก้ปัญหาด้วย CSS3D แบบหยาบๆ) Worklet Animation Worklet ทำให้สามารถนำเอฟเฟกต์เหล่านี้ไปใช้ได้อย่างตรงไปตรงมาในขณะที่ยังมีประสิทธิภาพการทำงานสูง ตัวอย่างเช่น การสาธิตเอฟเฟกต์ภาพ Parallax ในการเลื่อนหน้าจอนี้แสดงให้เห็นว่าตอนนี้คุณกำหนดภาพเคลื่อนไหวที่ทำงานจากการเลื่อนหน้าจอได้เพียงไม่กี่บรรทัด

กลไกภายใน

Worklet

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

คอมโพสิต NSync

คุณอาจทราบว่าคุณสมบัติ CSS บางอย่างสร้างภาพเคลื่อนไหวได้รวดเร็ว แต่คุณสมบัติอื่นๆ กลับไม่เคลื่อนไหว พร็อพเพอร์ตี้บางรายการต้องดำเนินการบางอย่างกับ GPU เพื่อให้เคลื่อนไหวได้ ส่วนพร็อพเพอร์ตี้อื่นๆ จะบังคับให้เบราว์เซอร์จัดวางเอกสารทั้งฉบับใหม่

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

ตบข้อมือ

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

ในกรณีนี้ Worklet จะได้รับอนุญาต (ตามข้อกำหนด) เป็น "Slip" เฟรมดังกล่าวจะล้าหลังโปรแกรมคอมโพสิต และโปรแกรมคอมโพสิตได้รับอนุญาตให้ใช้ข้อมูลของเฟรมสุดท้ายซ้ำเพื่อรักษาอัตราเฟรมให้สูง ลักษณะที่ปรากฏจะดูกระตุก แต่ความแตกต่างที่สำคัญคือเบราว์เซอร์ยังคงตอบสนองต่ออินพุตของผู้ใช้

บทสรุป

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

ชิ้นงานภาพเคลื่อนไหวอยู่ใน Canary และเรากําลังมุ่งสู่เวอร์ชันทดลองใช้กับ Chrome 71 เราหวังว่าคุณจะได้สัมผัสประสบการณ์การใช้งานเว็บที่ยอดเยี่ยมและบอกให้เราทราบถึงสิ่งที่เราควรปรับปรุง นอกจากนี้ยังมี polyfill ที่ให้ API เดียวกัน แต่ไม่มีการแยกประสิทธิภาพอีกด้วย

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