Web Animation API V4
使用 Anime.js 的简洁方式创建由 WAAPI 驱动的动画。
Anime.js 提供了一个比 animate() 方法更轻量级的替代方案（3KB 对比 10KB），该方法在底层使用了 Web Animation Element.animate() API。
由 WAAPI 驱动的动画是使用 waapi.animate() 方法创建的。
import { waapi } from 'animejs';
const animation = waapi.animate(targets, parameters);参数
| 名称 | 接受 |
|---|---|
| targets | 目标 |
| 参数 | 一个包含 可动画属性、缓动参数、播放设置 和 动画回调 的 Object。 |
返回
WAAPIAnimation
Web Animation API 代码示例
import { waapi, stagger, text } from 'animejs';
const { chars } = text.split('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;
}
本节内容