大多数 CSS 属性会导致布局更改或重新绘制,并会导致动画不稳定。所以,尽可能优先考虑使用在不透明度(opacity)和 CSS 转换(transforms)之类的属性上。
有关可接受值的更多详细信息,请参考
values
这一节.
opacity
'100px'
{value: 100, easing: 'easeOutExpo'},
{value: 200, delay: 500},
{value: 300, duration: 1000}
{value: 100, easing: 'easeOutExpo'},
{value: 200, delay: 500},
{value: 300, duration: 1000}
begin()
该回调函数将会在动画开始播放的时候触发一次。
complete()
则会在动画完成的时候触发一次。
如果动画的
duration
是0,那么
begin()
和
complete()
都会被调用。
Function
animation
返回当前动画对象
changeBegin()
每次动画开始变化时都会触发该回调。
changeComplete()
每次动画停止变化时都会触发回调。
动画的方向会影响
changeBegin()
和
changeComplete()
的触发顺序。
Function
animation
Return the current animation Object
使用
'stroke-dashoffset'
属性创建路径绘制动画。
在
from to
格式的值中使用
anime.setDashoffset()
设置路径
'dash-offset'
值。
strokeDashoffset: [anime.setDashoffset, 0]
有关画线动画的更多信息请参考
这里
.
anime.get(target, propertyName, unit);
由于
anime.js
使用
getComputedStyle
来访问原始的CSS样式表,这些值会包含
'px'
返回,第三个(可选)参数可以将值转换为所需的单位。
anime.get(domNode, 'width', 'rem');
target
'string'
,
var
使用
targets
中的值
CSS 转换:只能访问内联值。
anime.suspendWhenDocumentHidden = false; // default true
默认情况下,切换选项卡时所有动画都会暂停,这会确保用户不会遗漏关键的动画播放,保证信息的完整性。
但是你也可以选择让动画正常运行,就像视频或音频在后台连续播放一样。