Download Star

效果

CSS 选择器

可以是任何CSS选择器.

不可以使用 JavaScript 定位伪元素。

类型 默认值 示例
String null targets: '.item'

DOM 节点 / NodeList

Can be any DOM Node or NodeList.

类型 默认值 示例
DOM Node null targets: el.querySelector('.item')
NodeList null targets: el.querySelectorAll('.item')

JavaScript 对象

至少包含有一个数值属性的 JavaScript 对象

类型 默认值 示例
Object null targets: myObjectProp 
{"charged":"0%","cycles":120}

集合

包含多个目标的数组

可以是混合类型的数组. 例如： ['.el', domNode, jsObject]

类型 默认值 示例
Array null targets: ['.item', el.getElementById('#thing')]

属性

CSS 属性

任何 CSS 属性都可以被“动画”化。

大多数 CSS 属性会导致布局更改或重新绘制，并会导致动画不稳定。所以，尽可能优先考虑使用在不透明度（opacity）和 CSS 转换（transforms）之类的属性上。

有关可接受值的更多详细信息，请参考 values 这一节.

示例 值
opacity .5
left '100px'

CSS 转换（Transforms）

Animate CSS 逐个进行属性的转换。

可以为每个属性的转换指定不同的时间, 可以在 属性参数 这一节查看更多详细信息。

有关可接受值的更多详细信息，请参考 values 这一节。

可用属性 默认单位
'translateX''px'
'translateY''px'
'translateZ''px'
'rotate''deg'
'rotateX''deg'
'rotateY''deg'
'rotateZ''deg'
'scale'—
'scaleX'—
'scaleY'—
'scaleZ'—
'skew''deg'
'skewX''deg'
'skewY''deg'
'perspective''px'

Object 属性

任何包含数值的对象属性都可以为其设置动画。
更多细节可以参考 values 这一节。

示例 值
prop1 50
'prop2' '100%' 
{"prop1":0,"prop2":"0%"}

DOM 属性

任何包含数值的 DOM 属性都可以设置动画。
更多细节可以参考 values 这一节.

示例 值
value 1000
volume 0
data-custom '3 dogs'

SVG 属性

和其他的 DOM 属性一样， 任何包含了数值的SVG属性，都可以成为动画。
更多细节可以参考 values 这一节和SVG这一节。

示例 值
points '64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100'
scale 1
baseFrequency 0

属性参数

持续时间（Duration）

定义动画的持续时间（以毫秒为单位）。

类型 默认值 示例
Number 1000 3000
anime.stagger See staggering section anime.stagger(150)
Function See function based parameters section (el, i) => i * 150
3000 ms

延迟（Delay）

定义动画的延迟（以毫秒为单位）。

类型 默认值 示例
Number 0 1000
anime.stagger See staggering section anime.stagger(150)
Function See function based parameters section (el, i) => i * 150
1000 ms

结尾延迟（End Delay）

在动画结束时添加一些额外的时间（以毫秒为单位）。

类型 默认值 示例
Number 0 1000
anime.stagger See staggering section anime.stagger(150)
Function See function based parameters section (el, i) => i * 150
1000 ms

缓动（Easing）

定义动画的计时函数。

从 线性缓动 这一节可以得到更多关于缓动和参数的完整信息。

类型 默认值 示例
String 'easeOutElastic(1, .5)' easing: 'easeInOutQuad'
easeInOutExpo

舍入（Round）

将该值向上舍入为 x 位小数。

类型 默认值 示例
Number 0 round: 10 
0

具体属性参数

使用对象作为值，来定义动画每个属性的特定参数。
对象中未指定的其他属性从主动画中继承。

类型 示例
Object rotate: { value: 360, duration: 1800, easing: 'easeInOutSine' }

基于函数的参数

为动画的每个目标和属性获取不同的值。

该函数接受 3 个参数：

参数 说明
target 当前动画目标元素
index 动画目标元素的索引
targetsLength 动画目标总数

参考 staggering 这一节可以更容易理解.

delay = 0 * 100
delay = 1 * 100
delay = 2 * 100

动画参数

方向

定义动画的方向

接收参数 说明
'normal' 动画进度从 0 到 100%
'reverse' 动画进度从 100% 变为 0%
'alternate' 动画进度从 0% 到 100% 然后回到 0%
normal
reverse
alternate

循环

定义动画的循环次数

接收参数 说明
Number 循环次数
true 无限循环
normal 3 times
reverse 3 times
alternate 3 times
normal inifinite
inifinite reverse
inifinite alternate

自动播放

定义动画是否可以自动开始。

接收参数 说明
true 允许自动播放
false 默认动画是暂停的
autoplay: true
autoplay: false

值（Values）

不指定单位

如果原始值有单位，它会自动添加到动画值中。

类型 示例
Number translateX: 250

指定单位

强制动画使用一定的单位，会自动转换为初始目标值。

不同的单位在转换精度上可能会有差异。
也可以直接使用数组定义动画的初始值， 参考 from to values 这一节。

类型 示例
String width: '100%'

运算

对原始值进行加、减和乘法运算

接收参数 效果 示例
'+=' 加法 '+=100'
'-=' 减法 '-=2turn'
'*=' 乘法 '*=10'

颜色

anime.js 可以转换十六进制、RGB、RGBA、HSL 和 HSLA 颜色值。

不支持 CSS 颜色代码（例如: 'red', 'yellow', 'aqua'）。

接收参数 示例
Hexadecimal '#FFF' or '#FFFFFF'
RGB 'rgb(255, 255, 255)'
RGBA 'rgba(255, 255, 255, .2)'
HSL 'hsl(0, 100%, 100%)'
HSLA 'hsla(0, 100%, 100%, .2)'
HEX
RGB
HSL
RGBA
HSLA

From To

强制动画从指定值开始。

类型 示例
Array ['50%', '100%']

基于函数的值

为动画的每个目标和属性获取不同的值。

该函数接受 3 个参数：

参数 说明
target 当前动画的目标元素
index 动画目标元素的索引
targetsLength 动画目标总数

关键帧（Keyframes）

动画关键帧

动画关键帧，是使用数组在 keyframes 属性中定义的。

如果关键帧内没有指定持续时间，则每个关键帧持续时间将等于动画的总持续时间除以关键帧数。

类型 示例
Array [ {value: 100, easing: 'easeOutExpo'}, {value: 200, delay: 500}, {value: 300, duration: 1000} ]

属性关键帧

和 动画关键帧类似，属性关键帧是使用属性对象数组定义的。 属性关键帧允许重叠动画，因为每个属性都有自己的关键帧数组。

如果关键帧内没有指定持续时间，则每个关键帧持续时间将等于动画的总持续时间除以关键帧数。

类型 示例
Array [ {value: 100, easing: 'easeOutExpo'}, {value: 200, delay: 500}, {value: 300, duration: 1000} ]

交错

交错基础

交错允许您使用跟随和重叠动作为多个元素设置动画。 

anime.stagger(value, options)
参数 类型 说明 是否必须
值 Number, String, Array The manipulated value(s) Yes
选项 Object Stagger parameters No
delay = (100 * 0) ms
delay = (100 * 1) ms
delay = (100 * 2) ms
delay = (100 * 3) ms
delay = (100 * 4) ms
delay = (100 * 5) ms

起始值

从指定的值开始交错效果 

anime.stagger(value, {start: startValue})
类型 说明
Number, String 和属性值一样，参考 values 这一节
delay = 500 + (100 * 0) ms
delay = 500 + (100 * 1) ms
delay = 500 + (100 * 2) ms
delay = 500 + (100 * 3) ms
delay = 500 + (100 * 4) ms
delay = 500 + (100 * 5) ms

范围值

在两个数字之间平均分配值。 

anime.stagger([startValue, endValue])
类型 说明
'easingName' 接受所有有效的缓动名称，参考 缓动（Easings） 这一节
function(i) 自定义缓动函数，参考 自定义缓动 这一节
rotate = -360 + ((360 - (-360)) / 5) * 0
rotate = -360 + ((360 - (-360)) / 5) * 1
rotate = -360 + ((360 - (-360)) / 5) * 2
rotate = -360 + ((360 - (-360)) / 5) * 3
rotate = -360 + ((360 - (-360)) / 5) * 4
rotate = -360 + ((360 - (-360)) / 5) * 5

指定值

从特定位置开始交错效果。 

anime.stagger(value, {from: startingPosition})
选项 类型 说明
'first' (default) 'string' 从第一个元素开始效果
'last' 'string' 从最后一个元素开始效果
'center' 'string' 从中间元素开始效果
index number 从指定索引的元素开始效果

方向

更改交错操作的顺序。 

anime.stagger(value, {direction: 'reverse'})
选项 说明
'normal' (default) 正常交错，从第一个元素到最后一个
'reverse' 反向交错，从最后一个元素到第一个

缓动

错开值使用缓动函数。 

anime.stagger(value, {easing: 'easingName'})
类型 说明
'string' 一个 easing 名
function(i) 使用你自己的 自定义缓动函数

网格

交错值可以基于一个允许“ripple”效果的二维数组。 

anime.stagger(value, {grid: [rows, columns]})
类型 说明
array 一个有2个项的数组，第一个项是行数，第二个项是列数

轴（Axis）

强制指定 网格 效果的变化方向。 

anime.stagger(value, {grid: [rows, columns], axis: 'x'})
参数 说明
'x' 跟随 X 轴
'y' 跟随 Y 轴

时间轴（Timeline）

基于时间轴

时间轴可让您同步多个动画。
默认情况下，添加到时间轴的每个动画都在前一个动画结束后开始。

创建一个时间轴： 

var myTimeline = anime.timeline(parameters);
参数 类型 说明 是否必须
parameters Object 时间周的默认参数将会被子动画继承 No

将动画添加到时间轴： 

myTimeline.add(parameters, offset);
参数 类型 说明 是否必须
parameters Object 子动画参数，覆盖时间轴默认参数 Yes
time offset String or Number 查看时间轴偏移部分 No

时间偏移量

可以使用时间线 .add() 函数通过第二个可选参数指定时间偏移量。 它定义了动画在时间轴中的开始时间，如果没有指定偏移量，则动画将在前一个动画结束后开始。
偏移量可以是相对于最后一个动画的，也可以是相对于整个时间轴的绝对偏移量。

类型 Offset 示例 说明
String '+=' '+=200' 在上一个动画结束后 200 毫秒开始
String '-=' '-=200' 在上一个动画结束前 200 毫秒开始
Number Number 100 从 100 毫秒开始，与时间轴中的动画所处的位置无关
no offset
relative offset ('-=600')
absolute offset (400)

参数继承

父时间轴实例中设置的参数将被所有子实例继承。

可以继承的参数
targets
duration
delay
endDelay
round

控制

播放 / 暂停

播放暂停的动画，或者如果 autoplay 是 false则动过下面的函数启动动画：

animation.play();

通过下面的函数暂停正在播放的动画：

animation.pause();

重新开始

从初始值重新启动动画。

animation.restart();

反转

反转动画的方向。

animation.reverse();

跟随

跳转到特定时间（以毫秒为单位）。

animation.seek(timeStamp);

也可用于在滚动时控制动画。

animation.seek((scrollPercent / 100) * animation.duration);

时间轴控制

时间轴可以控制任意 anime.js 实例.

timeline.play();
timeline.pause();
timeline.restart();
timeline.seek(timeStamp);

回调函数（Callbacks & Promises）

更新

动画开始播放后，每帧都会触发回调。

类型 参数 说明
Function animation Return the current animation Object

开始与完成

begin() 该回调函数将会在动画开始播放的时候触发一次。

complete() 则会在动画完成的时候触发一次。

如果动画的 duration 是0，那么 begin() 和 complete() 都会被调用。

类型 参数 说明
Function animation 返回当前动画对象

循环开始和循环完成

loopBegin() 每一次循环的开始都会调用该回调函数。

loopComplete() 每一次循环的结束都会调用该回调函数。

类型 参数 说明
Function animation Return the current animation Object

变化

在 delay 和 endDelay 之间的每一帧都会触发回调。

类型 参数 说明
Function animation 返回当前动画对象

开始变化和完成变化

changeBegin() 每次动画开始变化时都会触发该回调。

changeComplete() 每次动画停止变化时都会触发回调。

动画的方向会影响 changeBegin() 和 changeComplete() 的触发顺序。

类型 参数 说明
Function animation Return the current animation Object

完成之后的Promise

当动画结束时，每个动画实例都会返回一个finished的Promise。 

animation.finished.then(function() {
  // Do things...
});

Promises are not suported in IE < 11.

SVG

运动路径

对 SVG 路径元素的 x、y 和 angle 值对元素进行动画处理。 

var myPath = anime.path('svg path');

路径函数返回一个返回指定属性的新函数。

路径动画在v3版本开始支持

参数 示例 说明
'x' myPath('x') 返回 SVG 路径 'px' 中的 x 值
'y' myPath('y') 返回 SVG 路径 'px' 中的 y 值
'angle' myPath('angle') 返回 SVG 路径 'degrees' 中的角度值

变形

在两个 svg 形状之间创建过渡。

但是，形状必须具有相同数量的点！


有关 SVG 形状变形的更多信息，请点击这里。

画线

使用 'stroke-dashoffset' 属性创建路径绘制动画。 在 from to 格式的值中使用 anime.setDashoffset() 设置路径 'dash-offset' 值。 

strokeDashoffset: [anime.setDashoffset, 0]

有关画线动画的更多信息请参考 这里.

Easings

线性

不对您的动画应用任何缓动时间。
一般用于不透明度和颜色过渡。 

easing: 'linear'

彭纳函数

内置了 Robert Penner's 缓动函数.

可以在 easings.net 查看更多的信息。 

easing: 'easeInOutSine'

可用的缓动：

in out in-out out-in
'easeInQuad' 'easeOutQuad' 'easeInOutQuad' 'easeOutInQuad'
'easeInCubic' 'easeOutCubic' 'easeInOutCubic' 'easeOutInCubic'
'easeInQuart' 'easeOutQuart' 'easeInOutQuart' 'easeOutInQuart'
'easeInQuint' 'easeOutQuint' 'easeInOutQuint' 'easeOutInQuint'
'easeInSine' 'easeOutSine' 'easeInOutSine' 'easeOutInSine'
'easeInExpo' 'easeOutExpo' 'easeInOutExpo' 'easeOutInExpo'
'easeInCirc' 'easeOutCirc' 'easeInOutCirc' 'easeOutInCirc'
'easeInBack' 'easeOutBack' 'easeInOutBack' 'easeOutInBack'
'easeInBounce' 'easeOutBounce' 'easeInOutBounce' 'easeOutInBounce'

三次贝塞尔曲线

使用您自己的自定义三次贝塞尔曲线 cubicBezier(x1, y1, x2, y2)。 

easing: 'cubicBezier(.5, .05, .1, .3)'

你可以使用类似 Ceaser to generate your curves coordinates 的贝赛尔曲线生成器来生成你自己的曲线坐标。

弹簧

基于弹簧物理的缓动。 

easing: 'spring(mass, stiffness, damping, velocity)'

弹簧动画的持续时间由弹簧参数定义。
动画 duration 参数不会生效。

参数 默认值 最小值 最大值
Mass 1 0 100
Stiffness 100 0 100
Damping 10 0 100
Velocity 0 0 100

伸缩（Elastic）

伸缩缓动。

easing: 'easeOutElastic(amplitude, period)'
in out in-out out-in
'easeInElastic' 'easeOutElastic' 'easeInOutElastic' 'easeOutInElastic'
参数 默认值 最小值 最大值 说明
Amplitude 1 1 10 控制曲线的过冲。 这个数字越大，越超调。
Period .5 0.1 2 控制曲线来回移动的次数。 这个数字越小，来回移动的次数就越多。

步进（Steps）

定义动画到达其结束值所需的跳跃次数。 

easing: 'steps(numberOfSteps)'
参数 默认值 最小值 最大值
Number of steps 10 1 ∞

自定义缓动函数

自定义缓动函数必须由 基于函数的值 返回。 

easing: function() { return function(time) { return time * i} }
参数 说明
Time 返回动画的当前时间

帮助类

移除（remove）

从正在运行的动画或时间轴中移除目标。 targets 参数接受的值，参考 targets 这一节。

从所有活动动画中移除目标。

anime.remove(targets);

从单个动画或时间轴中删除目标。

animation.remove(targets);

获取（get）

获取指定目标属性的原始值。

anime.get(target, propertyName, unit);

由于 anime.js 使用 getComputedStyle 来访问原始的CSS样式表，这些值会包含 'px' 返回，第三个（可选）参数可以将值转换为所需的单位。 

anime.get(domNode, 'width', 'rem');
参数 类型 说明
target 'string', var 使用targets中的值

CSS 转换：只能访问内联值。

设置（SET）

设置指定目标的属性值 

anime.set(targets, {property: value});
参数 类型 说明
target(s) 'string', var Any valid targets can be used
values object Any valid properties can be used

随机（random）

返回特定范围内的随机整数。 

anime.random(minValue, maxValue);

钩子（tick）

使用外部 requestAnimationFrame 循环播放动画。 

animation.tick(time)

不要忘记将 autoplay 参数设置为 false 以防止 anime.js 内置 RAF 循环启动。

运行（running）

返回当前正在运行的所有活动 anime.js 实例的数组。 

anime.running

    

  

  





  
暂停变化

  

    
anime.suspendWhenDocumentHidden = false; // default true

    

        默认情况下，切换选项卡时所有动画都会暂停，这会确保用户不会遗漏关键的动画播放，保证信息的完整性。

        但是你也可以选择让动画正常运行，就像视频或音频在后台连续播放一样。
    

  

  

    

      

      

      

    

    

      
      
    

  

  
苏ICP备2023001299号