Web Animation API V4
以 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 | 目标 |
| 参数 | 一个包含可动画属性、补间参数、播放设置和动画回调的Object。 |
返回
WAAPI 动画
Web Animation 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;
}
本节内容