Question

我试图找出是否有办法在停止后重新启动速度动画。

如果不再应用具有相同属性的新动画，是否只有速度方式？

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);

Answer 1

我知道，这个问题有点迟了。自1.4版以来，Velocity.js为其添加了暂停/恢复（每个元素或全局）功能。

您可以使用此功能;

$element.velocity('pause');

or 

$element.velocity('resume');

我希望它有所帮助。

Answer 2

当然有可能！

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);

这里有一个jsFiddle来展示它的实际效果：http://jsfiddle.net/uy6578an/

我使用这样的东西，我开始并重新开始胺化，它没有问题，看看这里看到它在计时器上运行：https://www.youtube.com/watch?v=bKEW02J3usA

Answer 3

可以使用setInterval（）方法轻松完成。

var box = $('.box');
setInterval(function() {
    box.velocity({translateY: '-100%'}, 5000);
    box.velocity('reverse', {duration: 1});
}, 5000);

Answer 4

如果您的意思是pause() / resume()功能，那么不，它目前尚未在Velocity中实现。

您必须手动重新启动动画，并且可以使用强制进给从上次停止的位置重新启动动画。

Answer 5

正如ydaniv所说，没有暂停/恢复功能。

但是，您可能会成功地研究Tweene，因为它扩展了Velocity.js及其功能。

引用Tweene文档“使用Tweene，您现在可以为所有支持的库播放（），暂停（），resume（），reverse（）和restart（）方法，适用于补间和时间轴。”

停止后重新启动velocity.js动画循环

5 个答案: