文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
时间曲线(easing)
匀速
不对动画应用任何缓动时间曲线。
对于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);
}
}
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论