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

Surma

เพิ่มพลังให้ภาพเคลื่อนไหวของเว็บแอป

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

API ภาพเคลื่อนไหวอื่น

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

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

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

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

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

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

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

WAAPI และ 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 theระยะเวลาoptions. Since we have a duration of 2000ms, we will reach the middle keyframe when the timeline'scurrentTimeisstartTime + 3,000 + 1000and the last keyframe atstartTime + 3000 + 2,000` ประเด็นคือ ไทม์ไลน์ช่วยควบคุมจุดที่เราอยู่ ในภาพเคลื่อนไหวของเรา

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

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

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

เมื่อได้ทราบแนวคิดเรื่องลำดับเวลาแล้ว เราจะมาเริ่มดู Worklet ภาพเคลื่อนไหวและวิธีที่จะช่วยให้คุณควบคุมไทม์ไลน์ได้! แอนิเมชัน Worklet API ไม่ได้มีพื้นฐานมาจาก WAAPI เท่านั้น แต่ในแง่มุมของ Extensible Web นั้น เป็นพื้นฐานระดับล่างที่ จะอธิบายวิธีการทำงานของ 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!
}

กำลังโหลด Worklet

Worklets คือแนวคิดใหม่ที่ทีมทำงานของ 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 เหตุนี้เราจึงเรียกผู้สร้างแอนิเมชันนี้ว่า "Passthrough" ใช้รหัสนี้สำหรับ 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 แบบได้รับการสร้างขึ้นด้วยโค้ดเดียวกัน แต่มีตัวเลือกต่างๆ

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

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

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

กลไกภายใน

Worklet

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

คอมโพสิต NSync

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

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

ตบที่ข้อมือ

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

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

บทสรุป

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

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

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