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

Surma

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

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

Animation API อีกตัว

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

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

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

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

ประเด็นคือสิ่งเหล่านี้ทั้งหมดเป็นเรื่องที่น่าอึดอัดและยากที่จะนำไปใช้ได้อย่างมีประสิทธิภาพ ซึ่งส่วนใหญ่จะอิงตามเหตุการณ์และ/หรือ 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 ของไทม์ไลน์เป็นเวลาเริ่มต้น ภาพเคลื่อนไหวของเรามีดีเลย์ 3000 มิลลิวินาที ซึ่งหมายความว่าภาพเคลื่อนไหวจะเริ่ม (หรือ "ใช้งานอยู่") เมื่อไทม์ไลน์ถึง `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

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

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 อยู่ ดังนั้นก่อนที่จะโหลด Worklet เราควรตรวจหาว่าเบราว์เซอร์ของผู้ใช้รองรับ AnimationWorklet หรือไม่ด้วยการตรวจสอบอย่างง่ายดังนี้

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

การโหลด Worklet

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

เราต้องตรวจสอบว่าได้โหลด Worklet ที่มีชื่อ "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;
    }
  }
);

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

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

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

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 รายการขับเคลื่อนด้วยโค้ดเดียวกัน แต่มีตัวเลือกที่แตกต่างกัน

บอกรัฐที่คุณอยู่หน่อย

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

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 ใน Worklet การเลื่อนไปที่ด้านบนสุด (หรือซ้ายสุด) หมายถึง currentTime = 0 ส่วนการเลื่อนไปที่ด้านล่างสุด (หรือขวาสุด) จะตั้งค่า currentTime เป็น timeRange หากเลื่อนกล่องในการสาธิตนี้ คุณจะควบคุมตำแหน่งของกล่องสีแดงได้

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

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

กลไกภายใน

Worklet

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

Compositor NSync

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

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

การลงโทษเบาๆ

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

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

บทสรุป

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

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

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