使用 Web Animations API 创建动画效果_web animation api-优快云博客

Web Animations API 是一种现代的方式来控制和创建在浏览器中运行的动画效果。它提供了一种更高效、更强大的方法来管理和执行动画，比传统的基于CSS动画和JavaScript动画更为灵活。

什么是 Web Animations API？

Web Animations API 是一个JavaScript API，它为开发人员提供了一种在浏览器中创建和控制动画的方式。它支持 CSS 动画和 SVG 动画，同时提供了一个强大的接口来定义和控制动画的每一个方面。

基本概念

1. Animation 对象

Animation 对象是 Web Animations API 的核心。它代表一个正在运行的动画，并允许你控制动画的播放、暂停、重新启动等。

// 创建一个动画
let element = document.getElementById('myElement');
let animation = element.animate(
  { transform: 'translateX(100px)' },
  {
    duration: 1000,
    iterations: Infinity
  }
);

2. Keyframes

Keyframes 是动画中的关键帧，它定义了动画从开始到结束的变化过程。你可以指定多个关键帧，并且 Web Animations API 会自动计算每个关键帧之间的插值。

let keyframes = [
  { transform: 'translateX(0px)' },
  { transform: 'translateX(100px)' }
];

let timing = {
  duration: 1000,
  iterations: Infinity
};

let animation = element.animate(keyframes, timing);

3. 动画控制

你可以控制动画的播放、暂停、取消等。

// 播放动画
animation.play();

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

// 取消动画
animation.cancel();

示例

让我们来看一个完整的示例，演示如何使用 Web Animations API 创建一个简单的动画效果。

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>

<div class="box"></div>

<script>
  let element = document.querySelector('.box');
  
  let keyframes = [
    { transform: 'translateX(0px)' },
    { transform: 'translateX(200px)' }
  ];
  
  let timing = {
    duration: 1000,
    iterations: Infinity
  };
  
  let animation = element.animate(keyframes, timing);
</script>

</body>
</html>