javascript - 如何使用Raphael .animateWith()

是否有人在Raphael中使用.animateWith()成功地使快速​​动画保持同步？它记录不充分。该库的创建者有一个video demonstration，但是我找不到任何代码。

我有一个Javascript节拍器，它由一条线(节拍器的 ARM )和一个梯形的“砝码”组成，最终将上下移动以表示速度。我有一个工作的 fiddle here，有问题的行是:

        var ticktock = Raphael.animation({
            "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: function() { tick(this, repeats, done); }},
            "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: function() { tick(this, repeats, done); }}
        }, interval).repeat(repeats / 2);
        arm.animate(ticktock);
        weight.animateWith(arm, ticktock, ticktock);

如果您检查 fiddle 并使其具有较高的速度和大约20个滴答声，您应该会看到 ARM 后面的重量滞后。 (如果没有，请尝试几次-墨菲定律等。)我认为这正是animateWith()防止的。也许我使用不正确。

如果查看.animateWith()函数的Raphael source，您会看到它同步了每个动画FWIW的.start参数。

最佳答案

从Raphael documentation:



所以我认为您的代码只需要分离动画并将其传递给.animateWith()的第二个参数:

动画部分就是:

{
    "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: animationDone },
    "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: animationDone }
}

因此，您可以执行以下操作:

var animationDone = function() {
    tick(this, repeats, done);
};

var ticktockAnimationParam = {
    "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: animationDone },
    "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: animationDone }
};
var ticktock = Raphael.animation(ticktockAnimationParam, interval).repeat(repeats / 2);
arm.animate(ticktock);
weight.animateWith(arm, ticktockAnimationParam, ticktock);

参见 fiddle :http://jsfiddle.net/wDwsW/7/

仅供引用，我将回调函数移到了外部，而不是使用匿名函数。

关于javascript - 如何使用Raphael .animateWith()，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15886606/