Animation Worklet 演示 - 基于工作线程的高性能动画

// 1. 注册 Animation Worklet
await CSS.animationWorklet.addModule('spring-timeline-animator.js');

// 2. Worklet 文件: spring-timeline-animator.js
class SpringTimelineAnimator extends Animator {
  constructor(options) {
    super(options);
    this.spring = { stiffness: 100, damping: 10 };
  }
  
  animate(currentTime, effect) {
    // 在工作线程中计算弹簧物理
    const displacement = this.calculateSpring(
      currentTime, effect.getTiming()
    );
    effect.localTime = displacement;
  }
}

registerAnimator('spring-timeline', SpringTimelineAnimator);

// 3. 使用 ScrollTimeline 驱动动画
const scrollTimeline = new ScrollTimeline({
  source: document.scrollingElement,
  orientation: 'vertical',
  scrollOffsets: [CSS.percent(0), CSS.percent(100)]
});

const animation = new Animation(
  new WorkletAnimation('spring-timeline', effects, scrollTimeline)
);
animation.play();