网页动画 API
使用 Anime.js 的简单性创建由 WAAPI 支持的动画。
Anime.js 提供了一个更轻量的替代方案（3KB 对比 10KB），用于 animate() 方法，该方法在底层使用了 Web Animation Element.animate() API。
WAAPI 驱动的动画是使用从主 'animejs' 模块导入的 waapi.animate() 方法创建的：
import { waapi } from 'animejs';
const animation = waapi.animate(targets, parameters);或者作为独立模块从 'animejs/waapi' 子路径 导入：
import { waapi } from 'animejs/waapi';参数
| 名称 | 接受 |
|---|---|
| targets | Targets |
| parameters | 一个包含 可动画属性、 Tween 参数、 播放设置 和 动画回调的对象 |
返回
WAAPI动画
Web 动画 API 代码示例
import { waapi, stagger, splitText } from 'animejs';
const { chars } = splitText('h2', { words: false, chars: true });
waapi.animate(chars, {
translate: `0 -2rem`,
delay: stagger(100),
duration: 600,
loop: true,
alternate: true,
ease: 'inOut(2)',
});<div class="large grid centered square-grid">
<h2 class="text-xl">HELLO WAAPI</h2>
</div>#web-animation-api .text-xl {
font-size: 1.5rem;
color: currentColor;
letter-spacing: 0.06em;
}
在本节