Javascript 停止后重新启动velocity.js动画循环
我试图找出是否有办法在速度动画停止后重新启动它 是否存在一种速度唯一的方法,而不再次应用具有相同属性的新动画Javascript 停止后重新启动velocity.js动画循环,javascript,velocity.js,Javascript,Velocity.js,我试图找出是否有办法在速度动画停止后重新启动它 是否存在一种速度唯一的方法,而不再次应用具有相同属性的新动画 var box = $('.box'); box.velocity({rotateZ:'360deg'}, {duration:1000, loop:true}); // That's a dummy to explain what I'm trying to do setTimeout(function{ box.velocity('stop'); setTimeout(
var box = $('.box');
box.velocity({rotateZ:'360deg'}, {duration:1000, loop:true});
// That's a dummy to explain what I'm trying to do
setTimeout(function{
box.velocity('stop');
setTimeout(function(){
box.velocity('START ORIGIN ANIMATION AGAIN');
});
}, 2000);
如果你的意思是暂停/恢复功能,那么不,它目前没有在Velocity中实现
您必须手动重新启动动画,并且可以使用强制进给从上次停止动画的位置重新启动动画。如ydaniv所述,没有暂停/恢复功能 但是,在扩展Velocity.js及其功能时,您可能会获得一些成功
要使用Tweene引用Tweene文档,您现在可以对所有受支持的库(Tweenes和Timeline)使用播放、暂停、恢复、反转和重新启动方法。当然可以
function Start() {
var box = $('.box');
DoRotation();
$('#GoBtn').click(function() {
box.velocity('stop').velocity({rotateZ:'0deg'}, {duration:1});
setTimeout(DoRotation, 1000);
});
function DoRotation() {
box.velocity({rotateZ:'360deg'}, {duration:1000, loop:true});
}
}
$(Start);
下面是一个JSFIDLE来展示它的实际应用:
我使用类似这样的方法,启动并重新启动一个胺化,它可以正常工作。看看这里,它可以在计时器上运行:使用setInterval方法可以很容易地完成
var box = $('.box');
setInterval(function() {
box.velocity({translateY: '-100%'}, 5000);
box.velocity('reverse', {duration: 1});
}, 5000);
我知道,现在回答这个问题有点晚了。Velocity.js从1.4版开始,为每个元素或全局功能添加暂停/恢复 您可以像这样使用该功能
$element.velocity('pause');
or
$element.velocity('resume');
我希望有帮助 这在技术上是可行的,但不是暂停/恢复,而是停止并重新启动动画。@foretound的答案是暂停/恢复的正确答案。