animejs

Anime.js v4 技能

Anime.js 是一个轻量级的 JavaScript 动画库，API 简单而强大。它适用于 CSS 属性、SVG、DOM 属性和 JavaScript 对象。

安装

NPM

npm install animejs

ES 模块导入

import { animate } from 'animejs';

CDN（ES 模块）

import { animate } from 'https://esm.sh/animejs';

CDN（UMD）

<script src="https://cdn.jsdelivr.net/npm/animejs/dist/bundles/anime.umd.min.js"></script>
<script>
  const { animate } = anime;
</script>

核心概念

Anime.js v4 采用模块化设计，并支持摇树优化。只导入所需内容：

// Full import
import { animate, createTimeline, stagger, createDraggable } from 'animejs';

// Standalone modules for smaller bundles
import { animate } from 'animejs/animation';
import { createTimeline } from 'animejs/timeline';
import { createTimer } from 'animejs/timer';

文档站点地图

anime.js v4 的完整文档结构：

入门

• 安装（NPM、CDN、直接下载）
• 模块导入（ES 模块、CommonJS、UMD）
• 在原生 JS 中使用
• 在 React 中使用

计时器（createTimer）

• 播放设置：delay、duration、loop、loopDelay、alternate、reversed、autoplay、frameRate、playbackRate
• 回调：onBegin、onComplete、onUpdate、onLoop、onPause、then()
• 方法：play()、reverse()、pause()、restart()、alternate()、resume()、complete()、reset()、cancel()、revert()、seek()、stretch()
• 属性：currentTime、progress、paused、completed 等

动画（animate）

• 目标：CSS 选择器、DOM 元素、JavaScript 对象、目标数组
• 可动画属性：CSS 属性、CSS 变换、CSS 变量、JS 对象属性、HTML 属性、SVG 属性
• 补间值类型：数值、单位转换、相对值（+=、-=、*=）、颜色、颜色函数、CSS 变量、基于函数的值
• 补间参数：to、from、delay、duration、ease、composition、modifier
• 关键帧：补间值、补间参数、基于时长、基于百分比
• 播放设置：delay、duration、loop、loopDelay、alternate、reversed、autoplay、frameRate、playbackRate、playbackEase、persist
• 回调：onBegin、onComplete、onBeforeUpdate、onUpdate、onRender、onLoop、onPause、then()
• 方法：play()、reverse()、pause()、restart()、alternate()、resume()、complete()、cancel()、revert()、reset()、seek()、stretch()、refresh()

时间线（createTimeline）

• 添加计时器、添加动画、同步 WAAPI 动画、同步时间线、调用函数
• 时间位置：绝对值（ms）、相对值（<、>、+=、-=）、标签
• 播放设置：defaults、delay、loop、loopDelay、alternate、reversed、autoplay、frameRate、playbackRate、playbackEase
• 回调：onBegin、onComplete、onBeforeUpdate、onUpdate、onRender、onLoop、onPause、then()
• 方法：add()、set()、sync()、label()、remove()、call()、init()、play()、reset()、reverse()、pause()、restart()、alternate()、resume()、complete()、cancel()、revert()、seek()、stretch()、refresh()

可动画对象（createAnimatable）

• 设置：unit、duration、ease、modifier
• 方法：获取器、设置器、revert()

可拖拽对象（createDraggable）

• 坐标轴参数：x、y、snap、modifier、mapTo
• 设置：trigger、container、containerPadding、containerFriction、releaseContainerFriction、releaseMass、releaseStiffness、releaseDamping、velocityMultiplier、minVelocity、maxVelocity、releaseEase、dragSpeed、dragThreshold、scrollThreshold、scrollSpeed、cursor
• 回调：onGrab、onDrag、onUpdate、onRelease、onSnap、onSettle、onResize、onAfterResize
• 方法：disable()、enable()、setX()、setY()、animateInView()、scrollInView()、stop()、reset()、revert()、refresh()

布局（createLayout）- 新增

• 用法：指定根元素、CSS display 动画、交错布局、DOM 顺序动画、进入/退出布局动画、交换父级动画、模态对话框动画
• 设置：children、delay、duration、ease、properties
• 状态：enterFrom、leaveTo、swapAt
• 方法：record()、animate()、update()、revert()
• 布局 id 属性、回调、属性、常见注意事项

作用域（createScope）

• 添加构造函数、注册方法函数
• 参数：root、defaults、mediaQueries
• 方法：add()、addOnce()、keepTime()、revert()、refresh()

事件 / 滚动（onScroll）

• 设置：container、target、debug、axis、repeat
• 阈值：数值、位置简写、相对位置值、最小值和最大值
• 同步模式：方法名称、播放进度、平滑滚动、缓动滚动
• 回调：onEnter、onEnterForward、onEnterBackward、onLeave、onLeaveForward、onLeaveBackward、onUpdate、onSyncComplete、onResize
• 方法：link()、refresh()、revert()

SVG 工具

• morphTo() - SVG 形状变形
• createDrawable() - SVG 线条绘制动画
• createMotionPath() - 运动路径动画

文本工具（splitText）

• 设置：lines、words、chars、debug、includeSpaces、accessible
• 拆分参数：class、wrap、clone
• 支持 HTML 模板
• 方法：addEffect()、revert()、refresh()

工具函数

• stagger() - 时间 / 值 / 时间线错开，支持网格
• $() - 查询选择器工具
• get() / set() - 获取 / 设置 CSS 属性值
• cleanInlineStyles() - 移除内联样式
• remove() - 从目标中移除动画
• sync() - 同步动画
• keepTime() - 计时工具
• random() / createSeededRandom() / randomPick() / shuffle() - 随机工具
• round() / clamp() / snap() / wrap() - 数学工具
• mapRange() / lerp() / damp() - 插值工具
• roundPad() / padStart() / padEnd() - 字符串填充
• degToRad() / radToDeg() - 角度转换
• 可链式调用的工具

缓动函数

• 内置：linear、easeIn、easeOut、easeInOut（含 Quad、Cubic、Quart、Quint、Sine、Expo、Circ、Back、Elastic、Bounce 变体）
• 自定义：三次贝塞尔、线性（多点）、Steps、不规则
• 弹簧：createSpring({ stiffness, damping, mass, velocity })

WAAPI（Web Animation API）

• 何时使用 WAAPI，而非 JS 动画
• 硬件加速动画
• 对原生 WAAPI 的改进
• API 差异（iterations、direction、easing、finished）
• waapi.convertEase()

引擎配置

• 参数：timeUnit（ms/s）、speed、fps、precision、pauseOnDocumentHidden
• 方法：update()、pause()、resume()
• 引擎默认值

快速参考

基本动画

import { animate } from 'animejs';

animate('.element', {
  translateX: 250,
  rotate: '1turn',
  duration: 800,
  ease: 'outExpo'
});

时间线

import { createTimeline } from 'animejs';

const tl = createTimeline({ defaults: { duration: 500 } });
tl.add('.box1', { x: 100 })
  .add('.box2', { x: 100 }, '<')  // Start with previous
  .add('.box3', { x: 100 }, '-=200');  // 200ms before end

错开

import { animate, stagger } from 'animejs';

animate('.item', {
  translateY: [-20, 0],
  opacity: [0, 1],
  delay: stagger(100, { from: 'center' }),
  duration: 600
});

滚动动画

import { animate, onScroll } from 'animejs';

animate('.element', {
  translateX: [0, 500],
  autoplay: onScroll({
    target: '.element',
    sync: true
  })
});

SVG 线条绘制

import { animate, createDrawable } from 'animejs';

animate(createDrawable('path'), {
  draw: ['0 0', '0 1'],
  duration: 2000,
  ease: 'inOutQuad'
});

可拖动

import { createDraggable, createSpring } from 'animejs';

createDraggable('.draggable', {
  container: '.container',
  releaseEase: createSpring({ stiffness: 200, damping: 20 })
});

基于函数的值

animate('.element', {
  translateX: (el, i, total) => i * 50,
  rotate: (el, i) => anime.random(-180, 180),
  delay: (el, i) => i * 100
});

关键帧

animate('.element', {
  translateX: [
    { to: 100, duration: 500 },
    { to: 0, duration: 500, delay: 200 }
  ],
  rotate: ['0turn', '1turn', '0turn']
});

React 集成

import { useRef, useEffect } from 'react';
import { animate, createScope } from 'animejs';

function AnimatedComponent() {
  const root = useRef(null);
  const scope = useRef(null);

  useEffect(() => {
    scope.current = createScope({ root: root.current }).add(() => {
      animate('.box', { rotate: 360 });
    });
    return () => scope.current.revert();
  }, []);

  return (
    <div ref={root}>
      <div className="box" />
    </div>
  );
}

包体积（压缩 + Gzip）

模块	大小
完整包	~24.5 KB
Timer	~5.6 KB
Animation	+5.2 KB
Timeline	+0.55 KB
Animatable	+0.4 KB
Draggable	+6.4 KB
Scroll	+4.3 KB
Scope	+0.22 KB
SVG	~0.35 KB
Stagger	+0.48 KB
Spring	~0.52 KB
WAAPI	~3.5 KB

其他资源

• 官方文档：https://animejs.com/documentation
• 缓动编辑器：https://animejs.com/easing-editor
• CodePen 示例：https://codepen.io/collection/Poerqa
• GitHub：https://github.com/juliangarnier/anime

有关详细的 API 参数、代码示例和高级模式，请参阅参考文件：

• references/api-reference.md - 完整的 API 文档
• references/examples.md - 常见动画模式和示例