菜单

动画参数

相关源文件

本页面介绍 anime.js 中可用的动画参数,它们用于控制动画的行为。参数包括时间设置、缓动函数、回调函数等。有关接受这些参数的核心动画函数的信息,请参阅核心动画函数

动画参数概述

anime.js 中的动画参数通过 AnimationParams 类型定义,该类型结合了多个参数类别,以提供对动画的全面控制。这些参数可以传递给 animate() 等函数,以创建自定义动画。

来源: lib/anime.esm.js241-251 lib/anime.esm.js11-34

核心动画参数

时间参数

这些参数控制动画的时间方面

参数类型默认描述
durationNumber|Function1000动画持续时间(毫秒)
delayNumber|Function0动画开始前的延迟
loopDelay数字0每次循环迭代之间的延迟
endDelay数字0动画结束后的延迟

durationdelay 参数可以是函数,它们根据目标、索引和目标总数返回一个值

来源: lib/anime.esm.js413-436 lib/anime.esm.js165-175

控制参数

这些参数控制动画播放

参数类型默认描述
loopBoolean|Number0动画循环的次数(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

补间参数

这些参数控制动画期间值的补间(插值)方式

值参数

参数类型描述
fromNumber|String起始值
toNumber|String结束值
fromTo[Number|String, Number|String]from 和 to 的简写组合

过渡参数

参数类型默认描述
easeString|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 429-435

高级参数

关键帧

Anime.js 支持两种关键帧类型,用于创建复杂动画

基于百分比的关键帧

在动画的特定百分比点定义关键帧

基于持续时间的关键帧

定义具有各自持续时间、延迟和缓动函数的关键帧

来源: lib/anime.esm.js226-240 lib/anime.esm.js12-13

参数继承与默认值

Anime.js 为所有参数提供了默认值,这些默认值可以在单个动画中被覆盖。在时间轴动画中,参数可以在时间轴级别设置,并由子动画继承。

默认值是

来源: lib/anime.esm.js413-436 lib/anime.esm.js603-609

属性特定参数

在动画特定属性时,参数可以在属性级别设置

属性特定参数会覆盖该特定属性的全局参数。

来源: 194-206