动画
使用各种参数、回调和方法，为目标元素的属性值制作动画。
动画通过 animate() 方法创建。
import { animate } from 'animejs';
const animation = animate(targets, parameters);参数
| 名称 | 接受 |
|---|---|
| targets | 目标 |
| 参数 | 一个 Object 对象，包含可动画属性、Tween 参数、播放设置 和 动画回调 |
返回
JSAnimation
WAAPI 驱动的动画
Anime.js 提供了一个更轻量级 (3KB) 的 animate() 方法 (10KB) 版本，该版本由 Web Animation API 驱动。
import { waapi } from 'animejs';
const animation = waapi.animate(targets, parameters);WAAPI 版本的功能总体上较少，但涵盖了大多数基本 API。
仅在 JavaScript 版本中可用的功能标有 (JS) 徽章，WAAPI 特有功能标有 (WAAPI) 徽章
要了解更多关于何时使用 WAAPI 版本及其潜在缺陷的信息，请参阅 Web Animations API 指南。
动画代码示例
import { animate } from 'animejs';
animate('span', {
// 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: (_, i) => i * 50, // Function based value
ease: 'inOutCirc',
loopDelay: 1000,
loop: true
});<h2 class="large grid centered square-grid text-xl">
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
<span> </span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>
</h2>
本节内容