时间曲线(easing)

优质

小牛编辑

126浏览

2023-12-01

匀速

不对动画应用任何缓动时间曲线。
对于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);
    }
  }
});