本页面介绍 anime.js 中可用的动画参数,它们用于控制动画的行为。参数包括时间设置、缓动函数、回调函数等。有关接受这些参数的核心动画函数的信息,请参阅核心动画函数。
anime.js 中的动画参数通过 AnimationParams 类型定义,该类型结合了多个参数类别,以提供对动画的全面控制。这些参数可以传递给 animate() 等函数,以创建自定义动画。
来源: lib/anime.esm.js241-251 lib/anime.esm.js11-34
这些参数控制动画的时间方面
| 参数 | 类型 | 默认 | 描述 |
|---|---|---|---|
duration | Number|Function | 1000 | 动画持续时间(毫秒) |
delay | Number|Function | 0 | 动画开始前的延迟 |
loopDelay | 数字 | 0 | 每次循环迭代之间的延迟 |
endDelay | 数字 | 0 | 动画结束后的延迟 |
duration 和 delay 参数可以是函数,它们根据目标、索引和目标总数返回一个值
来源: lib/anime.esm.js413-436 lib/anime.esm.js165-175
这些参数控制动画播放
| 参数 | 类型 | 默认 | 描述 |
|---|---|---|---|
loop | Boolean|Number | 0 | 动画循环的次数(true/Infinity 表示无限循环) |
autoplay | 布尔值 | true | 是否自动开始动画 |
reversed | 布尔值 | false | 是否反向播放动画 |
alternate | 布尔值 | false | 是否在每次循环时交替方向 |
来源: lib/anime.esm.js413-436 lib/anime.esm.js165-175
这些参数影响动画性能
| 参数 | 类型 | 默认 | 描述 |
|---|---|---|---|
frameRate | 数字 | 120 | 动画的最大帧率 |
playbackRate | 数字 | 1 | 播放速度(1 为正常,2 为两倍速) |
来源: lib/anime.esm.js413-436 lib/anime.esm.js356
来源: lib/anime.esm.js652-757 lib/anime.esm.js770-1042
来源: lib/anime.esm.js11-34 lib/anime.esm.js413-436
这些参数控制动画期间值的补间(插值)方式
| 参数 | 类型 | 描述 |
|---|---|---|
from | Number|String | 起始值 |
to | Number|String | 结束值 |
fromTo | [Number|String, Number|String] | from 和 to 的简写组合 |
| 参数 | 类型 | 默认 | 描述 |
|---|---|---|---|
ease | String|Function | 'out(2)' | 动画的缓动函数 |
composition | 字符串 | 'replace' (替换) | 同一属性上的多个动画如何组合('replace', 'none', 'blend') |
来源: lib/anime.esm.js48-53 lib/anime.esm.js194-200 lib/anime.esm.js413-436
modifier 参数允许对动画值进行自定义变换
来源: lib/anime.esm.js198 lib/anime.esm.js428
Anime.js 提供了几个在动画生命周期不同点触发的回调函数
| 回调 | 触发时机 |
|---|---|
onBegin | 动画开始时 |
onBeforeUpdate | 每次动画更新前 |
onUpdate | 每次动画更新后 |
onLoop | 动画循环时 |
onPause | 动画暂停时 |
onComplete (完成回调) | 动画完成时 |
onRender | 值应用于目标后 |
来源: lib/anime.esm.js91-100 lib/anime.esm.js104-107
Anime.js 支持两种关键帧类型,用于创建复杂动画
在动画的特定百分比点定义关键帧
定义具有各自持续时间、延迟和缓动函数的关键帧
来源: lib/anime.esm.js226-240 lib/anime.esm.js12-13
Anime.js 为所有参数提供了默认值,这些默认值可以在单个动画中被覆盖。在时间轴动画中,参数可以在时间轴级别设置,并由子动画继承。
默认值是
来源: lib/anime.esm.js413-436 lib/anime.esm.js603-609
在动画特定属性时,参数可以在属性级别设置
属性特定参数会覆盖该特定属性的全局参数。