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

动画

对目标元素的属性值进行动画处理，支持多种参数、回调和方法。

动画通过从主 'animejs' 模块导入的 animate() 方法创建

import { animate } from 'animejs';

const animation = animate(targets, parameters);

或者从 'animejs/animation' 子路径作为独立模块导入

import { animate } from 'animejs/animation';

参数

名称 接受
targets 目标
参数 一个包含可动画属性、补间参数、播放设置和动画回调的Object。

返回

JSAnimation (JS 动画)

由 WAAPI 驱动的动画

Anime.js 提供了一个更轻量（3KB）版本的 animate() 方法（原版 10KB），该版本由 Web Animation API (WAAPI) 驱动。

import { waapi } from 'animejs';

const animation = waapi.animate(targets, parameters);

WAAPI 版本的功能总体上较少，但涵盖了大部分基础 API。

如需了解何时使用 WAAPI 版本及其潜在缺陷，请参阅 Web Animations API 指南。

仅在 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;
}
本节内容
上一页 下一页