8

有没有人.animateWith()在 Raphael 中成功地保持快速动画同步？它的记录很差。该库的创建者有一个视频演示，但我找不到代码。

我有一个 Javascript 节拍器，它由一条线（节拍器的臂）和一个梯形的“重量”组成，最终会上下移动以表示速度。我在这里有一个工作小提琴，有问题的行是：

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

如果你检查小提琴并给它一个高节奏和大约 20 个滴答声，你应该看到重量滞后于手臂。（如果不是，请尝试几次——墨菲定律等。）我认为这正是 animateWith() 所阻止的。也许我使用不正确。

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

4

1 回答 1

7

从拉斐尔文档：

参数：

element - 要与之同步的 [object] 元素

anim - 要与之同步的 [object] 动画

animation - [object] 动画对象，参见 Raphael.animation

所以我认为你的代码只需要分离动画并将其传递给第二个参数.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);

见小提琴：http: //jsfiddle.net/wDwsW/7/

仅供参考，我将回调函数移到外面，而不是使用匿名函数。

于 2013-04-16T18:02:58.707 回答