如何使用Raphael .animateWith()

Question

有没有人.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源代码,您会看到它同步每个动画的.start参数FWIW.

Answer 1

来自Raphael的文档:

参数:

element - 要与之同步的[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/

Fyi,我把回调函数移到了外面,而不是使用匿名函数.