Question

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;
  }
});