-1

使用名为 Velocity JS 的库进行动画制作：http: //julian.com/research/velocity/

我使用它如下：

 var velocity = new Velocity(element, {
                    translateX: 250,
                    complete: function() {
                       return true;
                    }
                }, 5);

我要做的是检查动画成功完成后是否完成返回true，以便我可以切换动画。

检查是否属实的最佳方法是什么

if(velocity.complete() === true)

这将返回未定义。

感谢任何帮助。

4

2 回答 2

1

您已经传递了完整的函数，但在这种情况下returningtrue并没有太大帮助。调用完整函数时启动第二个动画：

var velocity = new Velocity(element, {
    translateX: 250,
    complete: function() {
       // start another animation
    }
}, 5);

如果您需要在单击或其他事件时切换动画，则必须将动画布尔值存储在外部某处，即使在 dom 元素中或使用 jQuerydata方法：

var $velocity = $("#velocity");

$velocity.data("animating", false);
$velocity.data("direction", "left");

$velocity.on("click", function () {

    if ($velocity.data("animating")) {
        return;
    }

    $velocity.data("animating", true);

    if ($velocity.data("direction") === "left") {
        var ml = -30;
        $velocity.data("direction", "right");
    } else {
        var ml = 30;
        $velocity.data("direction", "left");
    }

    $velocity.velocity({marginLeft:ml},{
        duration:500,
        complete: function () {
            $velocity.data("animating", false);       
        }
    });
});

JSFIDDLE

于 2014-10-14T16:36:27.160 回答
1

如果您需要存储动画已完成的事实，以便稍后根据用户交互（例如，单击按钮）读取该信息，只需在外部范围内设置一个变量：

var animationComplete = false;

var velocity = new Velocity(element, {
                    translateX: 250,
                    complete: function() {
                       animationComplete = true;
                    }
                }, 5);

并在用户交互发生时阅读它：

$("#someButton").on("click", function() {
    if(animationComplete) {
        // do something only if the animation has completed
    }
});

将该值存储在何处（作为局部变量或全局变量，作为对象的属性等）并不重要，只要它对需要读取和设置它的函数可见即可。

请注意，complete从不使用回调的返回值。complete回调函数对象被传递到构造函数中，Velocity稍后会从velocity.js自己的代码中的某处调用。Velocity.js 可能不会在任何地方公开（甚至存储）这个返回值。

于 2014-10-14T16:41:47.183 回答