2

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

是否有一种只有速度的方法，而无需再次应用具有相同属性的新动画？

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

5 回答 5

2

我知道，对这个问题的回答有点晚了。Velocity.js 从 1.4 版本开始添加了暂停/恢复（每个元素或全局）功能。

您可以像这样使用该功能；

$element.velocity('pause');

or 

$element.velocity('resume');

我希望它有所帮助。

于 2017-07-26T13:20:43.623 回答
1

当然有可能！

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

于 2014-12-21T20:30:10.587 回答
1

可以使用 setInterval() 方法轻松完成。

var box = $('.box');
setInterval(function() {
    box.velocity({translateY: '-100%'}, 5000);
    box.velocity('reverse', {duration: 1});
}, 5000);
于 2016-04-12T18:56:47.743 回答
0

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

但是，您可能会在Tweene中取得一些成功，因为它扩展了 Velocity.js 及其功能。

引用 Tweene 文档“使用 Tweene，您现在可以为所有受支持的库（包括补间和时间线）提供 play()、pause()、resume()、reverse() 和 restart() 方法。”

于 2014-12-21T20:19:47.820 回答
0

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

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

于 2014-12-21T15:27:26.927 回答