使用 Web Animations 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>