让 CSS 动画彻底活起来：Web Animations API 教学与实战

2024-02-04 00:50:22

什么是 Web Animations API？

Web Animations API 是一套用于控制 CSS 动画的 JavaScript API，它可以让我们轻松实现各种复杂的动画效果，让网页变得更加生动有趣。

与传统的 CSS 动画不同，Web Animations API 使用 JavaScript 来控制动画，这使得我们可以更精确地控制动画的各个方面，如动画的持续时间、延迟时间、循环次数等。此外，Web Animations API 还支持多种动画效果，如缓动、关键帧动画等，这使得我们可以创建出更加复杂的动画效果。

Web Animations API 的优势

Web Animations API 具有以下优势：

更精确的控制： 我们可以使用 JavaScript 来控制动画的各个方面，如动画的持续时间、延迟时间、循环次数等。
支持多种动画效果： Web Animations API 支持多种动画效果，如缓动、关键帧动画等，这使得我们可以创建出更加复杂的动画效果。
易于使用： Web Animations API 的语法非常简单，即使是初学者也可以轻松上手。

Web Animations API 的用法

Web Animations API 的用法非常简单，首先我们需要创建一个动画对象，然后将这个动画对象附加到要执行动画的元素上，最后启动动画即可。

以下是创建动画对象的代码：

const animation = new Animation({
  duration: 1000, // 动画持续时间，单位为毫秒
  delay: 200, // 动画延迟时间，单位为毫秒
  iterations: Infinity, // 动画循环次数，Infinity 表示无限循环
  direction: 'alternate', // 动画播放方向，alternate 表示交替播放
  fill: 'forwards', // 动画结束后，元素保持最终状态
  easing: 'ease-in-out', // 动画缓动函数
});

然后，我们将这个动画对象附加到要执行动画的元素上：

const element = document.querySelector('.element');
element.animate(animation);

最后，启动动画：

animation.play();

Web Animations API 的实战案例

下面我们通过几个实际案例来演示如何使用 Web Animations API 来创建各种酷炫的动画效果。

案例一：淡入淡出动画

const element = document.querySelector('.element');

const animation = new Animation({
  duration: 1000,
  delay: 200,
  iterations: Infinity,
  direction: 'alternate',
  fill: 'forwards',
  easing: 'ease-in-out',
  keyframes: [
    { opacity: 0 },
    { opacity: 1 }
  ]
});

element.animate(animation);

这个代码将创建一个淡入淡出动画，元素将在 1 秒内淡入，然后在 1 秒内淡出，如此交替循环。

案例二：缩放动画

const element = document.querySelector('.element');

const animation = new Animation({
  duration: 1000,
  delay: 200,
  iterations: Infinity,
  direction: 'alternate',
  fill: 'forwards',
  easing: 'ease-in-out',
  keyframes: [
    { transform: 'scale(0)' },
    { transform: 'scale(1)' }
  ]
});

element.animate(animation);

这个代码将创建一个缩放动画，元素将在 1 秒内从 0% 缩放至 100%，然后在 1 秒内从 100% 缩放至 0%，如此交替循环。

案例三：旋转动画

const element = document.querySelector('.element');

const animation = new Animation({
  duration: 1000,
  delay: 200,
  iterations: Infinity,
  direction: 'alternate',
  fill: 'forwards',
  easing: 'ease-in-out',
  keyframes: [
    { transform: 'rotate(0deg)' },
    { transform: 'rotate(360deg)' }
  ]
});

element.animate(animation);