anime.js logo v4 Anime.js | JavaScript 动画引擎

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 目标
参数 可动画属性、Tween 参数、播放设置 和 动画回调 的 Object

返回

WAAPIAnimation

Web Animation API 代码示例

import { waapi, stagger } from 'animejs';

waapi.animate('span', {
  translate: `0 -2rem`,
  delay: stagger(100),
  duration: 600,
  loop: true,
  alternate: true,
  ease: 'inOut(2)',
});
<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>&nbsp;</span>
  <span>W</span>
  <span>A</span>
  <span>A</span>
  <span>P</span>
  <span>I</span>
</h2>
本节内容
上一个 下一个