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

【问题标题】：Restart a velocity.js animation loop after stopping停止后重新启动velocity.js动画循环
【发布时间】：2017-07-26 21:20:43
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript velocity.js

【解决方案1】：

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

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

$element.velocity('pause');

or 

$element.velocity('resume');

我希望它有所帮助。

【讨论】：

【解决方案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

【讨论】：

这在技术上有效，但它不是暂停/恢复，这只会停止和重新启动动画。 @forethought 的答案是 PAUSE/RESUME 的正确答案。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：