文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
动画控制
play / pause(暂停/播放)
播放暂停的动画,如果autoplay
参数设置为false
,则启动动画。
animation.play();
暂停正在运行的动画。
animation.pause();
var animation = anime({
targets: '.play-pause-demo .el',
translateX: 270,
delay: function(el, i) { return i * 100; },
direction: 'alternate',
loop: true,
autoplay: false,
easing: 'easeInOutSine'
});
document.querySelector('.play-pause-demo .play').onclick = animation.play;
document.querySelector('.play-pause-demo .pause').onclick = animation.pause;
restart(重新开始)
从动画的初始值重新开始动画。
animation.restart();
var animation = anime({
targets: '.restart-demo .el',
translateX: 250,
delay: function(el, i) { return i * 100; },
direction: 'alternate',
loop: true,
easing: 'easeInOutSine'
});
document.querySelector('.restart-demo .restart').onclick = animation.restart;
reverse(反转方向)
反转动画的方向。
animation.reverse();
var animation = anime({
targets: '.reverse-anim-demo .el',
translateX: 270,
loop: true,
delay: function(el, i) { return i * 200; },
easing: 'easeInOutSine'
});
document.querySelector('.reverse-anim-demo .reverse').onclick = animation.reverse;
seek(瞬移)
跳转到特定时间(以毫秒为单位)。
animation.seek(timeStamp);
也可用于在滚动时控制动画。
animation.seek((scrollPercent / 100) * animation.duration);
var animation = anime({
targets: '.seek-anim-demo .el',
translateX: 270,
delay: function(el, i) { return i * 100; },
elasticity: 200,
easing: 'easeInOutSine',
autoplay: false
});
var seekProgressEl = document.querySelector('.seek-anim-demo .progress');
seekProgressEl.oninput = function() {
animation.seek(animation.duration * (seekProgressEl.value / 100));
};
时间轴控制
时间轴控制与动画控制的方法一样。
timeline.play();
timeline.pause();
timeline.restart();
timeline.seek(timeStamp);
var controlsProgressEl = document.querySelector('.timeline-controls-demo .progress');
var tl = anime.timeline({
direction: 'alternate',
loop: true,
duration: 500,
easing: 'easeInOutSine',
update: function(anim) {
controlsProgressEl.value = tl.progress;
}
});
tl
.add({
targets: '.timeline-controls-demo .square.el',
translateX: 270,
})
.add({
targets: '.timeline-controls-demo .circle.el',
translateX: 270,
}, '-=100')
.add({
targets: '.timeline-controls-demo .triangle.el',
translateX: 270,
}, '-=100');
document.querySelector('.timeline-controls-demo .play').onclick = tl.play;
document.querySelector('.timeline-controls-demo .pause').onclick = tl.pause;
document.querySelector('.timeline-controls-demo .restart').onclick = tl.restart;
controlsProgressEl.addEventListener('input', function() {
tl.seek(tl.duration * (controlsProgressEl.value / 100));
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论