动画
为目标元素的属性值添加动画，支持丰富的参数、回调和方法。
动画通过 animate() 方法创建。
import { animate } from 'animejs';
const animation = animate(targets, parameters);参数
| 名称 | 接受 |
|---|---|
| 目标 | 目标 |
| 参数 | 一个包含以下内容的 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 指南。
仅在 JavaScript 版本中可用的功能标有（JS）徽章，WAAPI 特定功能标有（WAAPI）徽章
动画代码示例
import { animate, stagger, text } from 'animejs';
const { chars } = text.split('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;
}
本节内容