动画基础参数
优质
小牛编辑
127浏览
2023-12-01
duraion(持续时间)
定义动画的持续时间(以毫秒为单位)。
Type | Default | Example |
Number | 1000 | 3000 |
anime.stagger | See staggering section | anime.stagger(150) |
Function | See function based parameters section | (el, i) => i * 150 |
anime({
targets: '.duration-demo .el',
translateX: 250,
duration: 3000
});
delay(延迟)
定义动画的延迟(以毫秒为单位)。
Type | Default | Example |
Number | 0 | 1000 |
anime.stagger | See staggering section | anime.stagger(150) |
Function | See function based parameters section | (el, i) => i * 150 |
anime({
targets: '.delay-demo .el',
translateX: 250,
delay: 1000
});
endDelay(末端延迟)
在动画结束时以毫秒为单位添加一些额外时间。
Type | Default | Example |
Number | 0 | 1000 |
anime.stagger | See staggering section | anime.stagger(150) |
Function | See function based parameters section | (el, i) => i * 150 |
anime({
targets: '.end-delay-demo .el',
translateX: 250,
endDelay: 1000,
direction: 'alternate'
});
easing(时间曲线)
定义动画的时间曲线。
Check out the easings section for a complete list of available easing and parameters.
Type | Default | Example |
String | 'easeOutElastic(1, .5)' | easing: 'easeInOutQuad' |
anime({
targets: '.easing-demo .el',
translateX: 250,
easing: 'easeInOutExpo'
});
round(数字格式)
将值向上舍入为x小数。
Type | Default | Example |
Number | 0 | round: 10 |
var roundLogEl = document.querySelector('.round-log');
anime({
targets: roundLogEl,
innerHTML: [0, 10000],
easing: 'linear',
round: 10 // Will round the animated value to 1 decimal
});
特殊属性
使用Object作为值为动画的每个属性定义特定参数。
未在Object中指定的其他属性继承自主动画。
Type | Example |
Object | rotate: { value: 360, duration: 1800, easing: 'easeInOutSine' } |
anime({
targets: '.specific-prop-params-demo .el',
translateX: {
value: 250,
duration: 800
},
rotate: {
value: 360,
duration: 1800,
easing: 'easeInOutSine'
},
scale: {
value: 2,
duration: 1600,
delay: 800,
easing: 'easeInOutQuart'
},
delay: 250 // All properties except 'scale' inherit 250ms delay
});
function 参数
为动画的每个目标和属性设置不同的值。
function 接受三个参数:
Arguments | Infos |
target | 当前动画目标元素 |
index | 动画目标的索引 |
targetsLength | 总动画目标数 |
请参阅交错动画部分以便更轻松地操纵值。
anime({
targets: '.function-based-params-demo .el',
translateX: 270,
direction: 'alternate',
loop: true,
delay: function(el, i, l) {
return i * 100;
},
endDelay: function(el, i, l) {
return (l - i) * 100;
}
});