本文档提供了 anime.js API 的全面参考，详细介绍了所有可用的函数、参数和方法，用于创建动画。有关 anime.js 及其基本用法的一般信息，请参阅概述和基本用法。
Anime.js V4 使用 ES 模块导入其核心函数。该库导出的两个主要函数是animate()和stagger()。
animate()函数是库的核心，用于创建动画。
| 参数 | 类型 | 描述 |
|---|---|---|
| targets | 字符串，元素，NodeList，数组 | 要动画的元素 |
| parameters | 对象 | 动画参数 |
返回一个动画实例，其中包含控制动画的方法。
stagger()函数为具有多个目标动画创建交错延迟值
| 参数 | 类型 | 描述 |
|---|---|---|
| value | 数字 | 每个动画之间的时间偏移 |
| options | 对象 | (可选) 配置选项 |
| 选项 | 类型 | 描述 |
|---|---|---|
| from | 数字，字符串，对象 | 起始点（'first'，'last'，'center'，索引） |
| direction | 字符串 | 交错方向（'normal'，'reverse'） |
| easing (缓动) | 函数，字符串 | 交错分布的缓动函数 |
| grid | 数组 | 用于基于网格交错的[列，行] |
| axis | 字符串 | 网格交错方向的'x'或'y' |
来源：README.md26-46 lib/anime.esm.js1-107
animate()函数接受以下参数：
| 参数 | 类型 | 默认 | 描述 |
|---|---|---|---|
| duration | 数字 | 1000 | 动画持续时间（毫秒） |
| delay | 数字 | 0 | 动画延迟，单位毫秒 |
| ease | 字符串，函数 | 'out(2)' | 缓动函数 |
| loop | 布尔值，数字 | false | 循环次数，或 true 表示无限循环 |
| alternate | 布尔值 | false | 每次循环时交替方向 |
| reversed | 布尔值 | false | 以反方向开始动画 |
| autoplay | 布尔值 | true | 自动开始动画 |
属性可以通过各种值类型进行动画
Anime.js 支持使用两种不同格式的关键帧动画
| 回调 | 时间点 |
|---|---|
| onBegin | 动画开始时调用 |
| onBeforeUpdate | 每次动画更新前调用 |
| onUpdate | 每次动画更新时调用 |
| onRender | 渲染更改后调用 |
| onComplete (完成回调) | 动画完成时调用 |
| onLoop | 每次循环迭代后调用 |
| onPause | 动画暂停时调用 |
来源：lib/anime.esm.js412-436 lib/anime.esm.js244-251 lib/anime.esm.js219-243
每个动画实例都有控制播放的方法
| 属性 | 描述 |
|---|---|
| currentTime | 动画当前时间，单位毫秒 |
| progress | 动画进度，从 0 到 1 |
| iterationProgress | 当前迭代进度，从 0 到 1 |
| iterationCurrentTime | 迭代内的当前时间 |
| currentIteration | 当前迭代次数 |
| duration | 动画总持续时间 |
| iterationDuration | 单次迭代的持续时间 |
| iterationCount | 总迭代次数 |
时间轴系统允许对多个动画进行排序
| 方法 | 描述 |
|---|---|
| add(params, timelineOffset) | 向时间轴添加动画 |
| play() | 播放时间轴 |
| pause() | 暂停时间轴 |
| restart() | 重新启动时间轴 |
| seek(time) | 定位到特定时间 |
| progress(progress) | 定位到特定进度（0-1） |
| reverse() | 反转时间轴方向 |
时间轴偏移决定了动画相对于时间轴何时开始
| 偏移 | 描述 |
|---|---|
| '+=100' | 在前一个动画结束后 100 毫秒开始 |
| '-=100' | 在前一个动画结束前 100 毫秒开始 |
| '50%' | 在时间轴持续时间的 50% 处开始 |
| '0' | 在时间轴的开头开始 |
| '1000' | 在时间轴开始后 1000 毫秒开始 |
来源：types/index.js328-366 lib/anime.esm.js672-701
交错创建多个目标之间的顺序延迟
用于按网格模式排列的元素
来源：README.md35-44 lib/anime.umd.js2401-2450
缓动函数控制动画随时间的变化速率
| 类别 | 函数 |
|---|---|
| 正弦 | easeInSine, easeOutSine, easeInOutSine |
| Quad | easeInQuad, easeOutQuad, easeInOutQuad |
| 立方 | easeInCubic, easeOutCubic, easeInOutCubic |
| Quart | easeInQuart, easeOutQuart, easeInOutQuart |
| Quint | easeInQuint, easeOutQuint, easeInOutQuint |
| Expo | easeInExpo, easeOutExpo, easeInOutExpo |
| Circ | easeInCirc, easeOutCirc, easeInOutCirc |
| 返回 | easeInBack, easeOutBack, easeInOutBack |
| 弹跳 | easeInBounce, easeOutBounce, easeInOutBounce |
| 弹性 | easeInElastic, easeOutElastic, easeInOutElastic |
Anime.js 提供参数化缓动函数
您可以创建自定义缓动函数
来源：lib/anime.esm.js47-53 lib/anime.esm.js427
Anime.js 提供用于 SVG 动画的专用函数
在 SVG 路径之间形变
动画绘制 SVG 路径
沿 SVG 路径动画元素
来源：lib/anime.umd.js2460-2590 lib/anime.esm.js767-792
Anime.js 支持使用各种单位进行 CSS 属性动画
10px, 100px50%, 100%10vw, 25vh45deg, 360deg0.5turn, 2turn2em, 1.5remrgb(255, 0, 0), rgba(255, 0, 0, 0.5)#FF0000, #00FF00hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0.5)| 变换 (Transform) | 描述 |
|---|---|
| translateX | 水平平移 |
| translateY | 垂直平移 |
| translateZ | Z 轴平移 (3D) |
| rotate | 2D 旋转 |
| rotateX | 3D X 轴旋转 |
| rotateY | 3D Y 轴旋转 |
| rotateZ | 3D Z 轴旋转 |
| scale | 统一缩放 |
| scaleX | 水平扩展 |
| scaleY | 垂直扩展 |
| skew | 2D 倾斜 |
| perspective | 3D 透视 |
Anime.js 还提供常用变换的快捷方式
x：translateX的简写y：translateY的简写z：translateZ的简写来源：lib/anime.esm.js361-385 lib/anime.esm.js767-792 lib/anime.esm.js362-365
Anime.js 可以动画 JavaScript 对象属性
此功能对于动画以下内容非常有用
来源：lib/anime.esm.js899-909 lib/anime.umd.js2301-2320
Anime.js 提供在动画期间处理属性组合的选项
| 类型 | 描述 |
|---|---|
| 'replace' (替换) | (默认) 每个动画替换前一个动画 |
| 'none' | 无组合，值独立动画 |
| 'blend' | 值以加性方式混合 |
刷新此 Wiki
最后索引时间2025 年 4 月 18 日(8b22d8)