动画
动画化目标元素的属性值，提供广泛的参数、回调和方法。
动画通过从主 'animejs' 模块导入的 animate() 方法创建
import { animate } from 'animejs';
const animation = animate(targets, parameters);或者从 'animejs/animation' 子路径 作为独立模块导入
import { animate } from 'animejs/animation';参数
| 名称 | 接受 |
|---|---|
| targets | 目标 |
| 参数 | 一个包含可动画属性、补间参数、播放设置和动画回调的Object。 |
返回
JS动画
WAAPI 驱动的动画
Anime.js 提供了一个更轻量级（3KB）的 animate() 方法（10KB）版本，该版本由 Web Animation API 提供支持。
import { waapi } from 'animejs';
const animation = waapi.animate(targets, parameters);WAAPI 版本整体功能较少，但涵盖了大多数基本 API。
要了解何时使用 WAAPI 版本及其潜在陷阱，请参阅 Web Animations API 指南。
返回
WAAPI动画
仅在 JavaScript 版本中可用的功能用 (JS) 徽章表示，WAAPI 特有功能用 (WAAPI) 徽章表示
动画代码示例
import { animate, stagger, splitText } from 'animejs';
const { chars } = splitText('h2', { words: false, chars: true });
animate(chars, {
// Property keyframes
y: [
{ to: '-2.75rem', ease: 'outExpo', duration: 600 },
{ to: 0, ease: 'outBounce', duration: 800, delay: 100 }
],
// Property specific parameters
rotate: {
from: '-1turn',
delay: 0
},
delay: stagger(50),
ease: 'inOutCirc',
loopDelay: 1000,
loop: true
});<div class="large grid centered square-grid">
<h2 class="text-xl">HELLO WORLD</h2>
</div>#animation .text-xl {
font-size: 1.5rem;
color: currentColor;
letter-spacing: 0.06em;
}
本节内容