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

Surma

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

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

Animation API ตัวอื่นอยู่หรือเปล่า

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

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

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

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

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

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

เกริ่นนำเกี่ยวกับภาพเคลื่อนไหวและไทม์ไลน์

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 ของไทม์ไลน์เป็นเวลาเริ่มต้น ภาพเคลื่อนไหวของเราล่าช้า 3, 000 มิลลิวินาที ซึ่งหมายความว่าภาพเคลื่อนไหวจะเริ่มต้น (หรือ "ทำงาน") เมื่อไทม์ไลน์ถึง "เวลาเริ่มต้น"

  • 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

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

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

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

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

การตรวจหาฟีเจอร์

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

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

กำลังโหลด Worklet

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

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

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

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

ตัวเลือกแทนตัวเลือก

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

การใช้เวลาร่วมกันอย่างต่อเนื่อง: ScrollTimeline

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

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

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

ขั้นสูง

Worklet

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

NSync สำหรับคอมโพสิต

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

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

ตบข้อมือ

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

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

บทสรุป

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

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

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