返回介绍

时间曲线(easing)

发布于 2020-01-07 22:20:35 字数 5902 浏览 2899 评论 0 收藏 0

匀速

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

inoutin-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)'

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

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

弹跳

弹跳效果

easing: 'easeOutElastic(amplitude, period)'
inoutin-out
'inElastic''outElastic''inOutElastic'
ParameterDefaultMinMaxInfo
Amplitude1110控制曲线的过冲
Period.50.12控制曲线来回的次数
anime({
  targets: '.elastic-easing-demo .el',
  translateX: 270,
  easing: function(el) {
    return el.getAttribute('data-ease');
  },
  duration: 1000
})

台阶式

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

easing: 'steps(numberOfSteps)'
ParameterDefaultMinMax
Number of steps101
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} }
ParameterInfo
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);
    }
  }
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文