Web Animations API：流畅动画的浏览器原生支持

Web Animations API 是一种浏览器原生支持的动画技术，旨在提供一套统一的、功能丰富的接口来创建和控制动画。它结合了CSS动画和JavaScript动画的优点，支持关键帧动画、时间控制、同步以及高效的硬件加速。

基础使用

动画创建

let element = document.querySelector('#myElement');
let animation = element.animate(
  [
    { transform: 'translateX(0px)', opacity: 1 }, // 初始状态
    { transform: 'translateX(100px)', opacity: 0 } // 结束状态
  ],
  { 
    duration: 1000, // 动画持续时间（毫秒）
    easing: 'ease-in-out', // 缓动效果
    iterations: Infinity // 循环次数
  }
);

这段代码选取了一个ID为myElement的DOM元素，对其应用了一个平移和透明度变化的动画。动画从当前位置平移到水平右移100px且透明度变为0，整个过程持续1000毫秒，缓动效果为ease-in-out，并且设置为无限循环。

高级特性

时间控制

Web Animations API 提供了精细的时间控制能力，比如暂停、恢复和寻求动画：

// 暂停动画
animation.pause();

// 恢复动画
animation.play();

// 寻找动画到特定时间点
animation.currentTime = 500; // 将动画定位到500毫秒处

动态修改动画

可以在动画运行时动态修改其属性：

// 修改动画的持续时间和缓动效果
animation.updateTiming({ duration: 2000, easing: 'linear' });

事件监听

可以监听动画的开始、结束、迭代完成等事件：

animation.onfinish = () => {
  console.log('动画结束');
};

animation.addEventListener('cancel', () => {
  console.log('动画被取消');
});

组合动画与序列

Web Animations API 支持组合动画，可以创建复杂的动画序列：

let sequence = document.timeline.createSequence();
let fadeIn = element.animate({ opacity: [0, 1] }, { duration: 500 });
let moveRight = element.animate({ transform: ['translateX(0px)', 'translateX(100px)'] }, { duration: 1000 });

sequence.append(fadeIn, moveRight);
sequence.play();

这段代码首先创建了一个动画序列，然后将淡入动画和向右移动的动画添加到序列中，并播放序列，实现了先淡入后移动的动画效果。

动画同步与组

除了单独的动画控制，Web Animations API 还支持动画间的同步和组合，这对于创建复杂动画序列尤为重要。

同步动画

使用document.timeline，可以确保多个动画同步开始：

let animation1 = element.animate(...);
let animation2 = anotherElement.animate(...);

document.timeline.play([animation1, animation2]);

在这个例子中，animation1和animation2会被安排在同一时间开始播放，即使它们有不同的持续时间和属性变化。

动画组（AnimationGroup）

动画组允许你将多个动画作为一个整体来控制，包括它们的播放、暂停和时间进度。

let group = new AnimationGroup();

let anim1 = element.animate([{opacity: 0}, {opacity: 1}], {duration: 500});
let anim2 = anotherElement.animate([{transform: 'scale(1)'}, {transform: 'scale(1.5)'}], {duration: 1000});

group.add(anim1, anim2);

group.play(); // 同时播放组内的所有动画

可逆动画与反向播放

Web Animations API 支持动画的反向播放，这对于实现某些交互效果非常有用。

let animation = element.animate(
  [{transform: 'rotate(0deg)'}, {transform: 'rotate(360deg)'}],
  {duration: 1000, direction: 'normal'}
);

// 点击事件反转动画方向
element.addEventListener('click', () => {
  if (animation.playbackRate > 0) {
    animation.reverse();
  } else {
    animation.play();
  }
});

动画的暂停与恢复：精确控制时间线

Web Animations API 提供了对动画时间线的精细控制，使得暂停、恢复及跳转到动画的特定时间点变得非常直观和灵活。

暂停与恢复动画

在某些场景下，如用户交互或页面滚动时，可能需要临时停止动画，之后再根据需要恢复播放。这可以通过pause()和play()方法轻松实现：

let myAnimation = element.animate(...);

// 暂停动画
myAnimation.pause();

// 在某个时刻恢复播放
setTimeout(() => {
  myAnimation.play();
}, 750);

跳转到动画的特定时间点

有时，可能需要动画直接跳转到某一特定的时间点，而不是从头开始或继续当前状态。这可以通过设置currentTime属性来实现：

myAnimation.currentTime = 300; // 将动画时间直接设置到300毫秒的位置

动画事件监听：增强互动性

Web Animations API 支持事件监听，使得开发者可以捕捉到动画生命周期中的关键时刻，如开始、结束、迭代完成等，从而实现更丰富的交互逻辑。

myAnimation.onstart = () => {
  console.log('动画开始');
};

myAnimation.onfinish = () => {
  console.log('动画结束');
};

myAnimation.oniteration = (event) => {
  console.log(`动画迭代 ${event.iteration} 次`);
};

自定义缓动函数：创造独特动画效果

除了预设的缓动类型（如ease, linear, ease-in-out等），Web Animations API 还允许开发者自定义缓动函数，以创造出独特的动画效果。

function customEasing(t) {
  return t * t * (3 - 2 * t); // 二次缓入缓出
}

let customAnimation = element.animate(..., {easing: customEasing});

动画的取消与清除

当不再需要某个动画时，可以使用cancel()方法取消动画，释放相关资源。如果动画已经完成或被取消，还可以通过finish()方法立即结束动画并触发finish事件。

myAnimation.cancel(); // 取消动画
myAnimation.finish(); // 立即完成动画