Question

匀速

不对动画应用任何缓动时间曲线。
对于opacity和colors过渡很有用。

easing: 'linear'

anime({
  targets: '.linear-easing-demo .el',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'linear'
});

不匀速

基于Robert Penner's easing functions.

请参阅easings.net上的更多信息。

easing: 'easeInOutSine'

Availabe easings :

in	out	in-out
'easeInQuad'	'easeOutQuad'	'easeInOutQuad'	由快至慢
'easeInCubic'	'easeOutCubic'	'easeInOutCubic'	由快至慢，效果更强
'easeInQuart'	'easeOutQuart'	'easeInOutQuart'	由快至慢，效果更强
'easeInQuint'	'easeOutQuint'	'easeInOutQuint'	由快至慢，效果更强
'easeInSine'	'easeOutSine'	'easeInOutSine'	由快至慢，比Quad弱
'easeInExpo'	'easeOutExpo'	'easeInOutExpo'	突然减速，效果较强
'easeInCirc'	'easeOutCirc'	'easeInOutCirc'	突然减速，效果较弱
'easeInBack'	'easeOutBack'	'easeInOutBack'	冲出终点后返回

var demoContentEl = document.querySelector('.penner-equations-demo');
var fragment = document.createDocumentFragment();

function createEasingDemo(easing) {
  var demoEl = document.createElement('div');
  demoEl.classList.add('stretched','square','el');
  anime({
    targets: demoEl,
    translateX: 250,
    direction: 'alternate',
    loop: true,
    delay: 200,
    endDelay: 200,
    easing: easing,
  });
  fragment.appendChild(demoEl);
}

for (var easeName in anime.penner) {
  if (Array.isArray(anime.penner[easeName])) {
    createEasingDemo(easeName);
  }
}

demoContentEl.innerHTML = '';
demoContentEl.appendChild(fragment);

三次贝塞尔

使用您自己的自定义立方Bézier曲线cubicBezier(x1, y1, x2, y2).

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

您可以使用像Caesar这样的Bézier曲线生成器来生成曲线坐标。

anime({
  targets: '.cubic-bezier-demo .el',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'cubicBezier(.5, .05, .1, .3)'
})

弹簧（spring）

类似于弹簧效果

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

弹簧动画的持续时间由弹簧参数定义。
不会考虑动画持续时间参数。

Parameter	Default	Min	Max
Mass	1	0	100
Stiffness	100	0	100
Damping	10	0	100
Velocity	0	0	100

anime({
  targets: '.spring-physics-demo .el',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'spring(1, 80, 10, 0)'
})

弹跳

弹跳效果

easing: 'easeOutElastic(amplitude, period)'

in	out	in-out
'inElastic'	'outElastic'	'inOutElastic'

Parameter	Default	Min	Max	Info
Amplitude	1	1	10	控制曲线的过冲
Period	.5	0.1	2	控制曲线来回的次数

anime({
  targets: '.elastic-easing-demo .el',
  translateX: 270,
  easing: function(el) {
    return el.getAttribute('data-ease');
  },
  duration: 1000
})

台阶式

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

easing: 'steps(numberOfSteps)'

Parameter	Default	Min	Max
Number of steps	10	1	∞

anime({
  targets: '.step-easing-demo .el',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'steps(5)'
})

自定义

通过基于function based value返回自定义时间曲线函数。

easing: function() { return function(time) { return time * i} }

Parameter	Info
Time	返回动画的当前时间

anime({
  targets: '.custom-easing-demo .el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  duration: 2000,
  easing: function(el, i, total) {
    return function(t) {return Math.pow(Math.sin(t * (i + 1)), total);
    }
  }
});