Web Animation API
使用 Anime.js 的简洁方式创建基于 WAAPI 的动画。
相比于使用底层 Web Animation Element.animate() API 的 animate() 方法，Anime.js 提供了一个更轻量（3KB 对比 10KB）的替代方案。
基于 WAAPI 的动画可以通过从主 'animejs' 模块导入的 waapi.animate() 方法来创建
import { waapi } from 'animejs';
const animation = waapi.animate(targets, parameters);或者作为独立模块从 'animejs/waapi' 子路径导入
import { waapi } from 'animejs/waapi';参数
| 名称 | 接受 |
|---|---|
| targets | 目标 |
| 参数 | 一个包含可动画属性、补间参数、播放设置和动画回调的Object。 |
返回
WAAPIAnimation
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;
}
本节内容