8

Raphael を使用.animateWith()して、高速なアニメーションを同期させることに成功した人はいますか? 文書化が不十分です。ライブラリの作成者にはビデオのデモがありますが、コードは見つかりません。

私は、ライン（メトロノームのアーム）と台形の「重み」で構成される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 を同期していることがわかります。

4

1 に答える 1

7

ラファエルのドキュメントから：

パラメータ:

element - [object] 同期する要素

anim - [オブジェクト] 同期するアニメーション

animation - [object] アニメーション オブジェクト、Raphael.animation を参照

したがって、コードはアニメーションを分離し、それを の 2 番目のパラメーターに渡すだけでよいと思います.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 に答える