Raphael .animateWith（）の使用方法

Question

高速アニメーションを同期させるには、誰もRaphaelで.animateWith()を使用しましたか？それは文書化されていません。図書館の作成者はvideo demonstrationですが、コードは見つかりません。

私は、ライン（メトロノームの腕）と、最終的にはテンポを示すために上下に移動する台形の "重量"からなるJavascriptメトロノームを持っています。私は作業フィドル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);  

あなたがフィドルをチェックアウトし、それを高いテンポと約20ティックを与えた場合、あなたは腕の後ろに体重ラグが表示されるはずです。 （もしそうでなければ数回試してください - マーフィーの法則など）これはまさにanimateWith（）が防ごうとしていると思いました。たぶん私はそれを間違って使用しています。

Raphael sourceの.animateWith（）関数を見ると、各アニメーションの.startパラメータ（FWIW）が同期されていることがわかります。 Raphael documentationから

Answer 1

：

パラメータ：

素子 - [目的]

アニメーションと同期する要素 - [目的]

と同期するアニメーション

アニメーション - [オブジェクト]アニメーションオブジェクト、だから私はあなたのコードだけでアニメーションを分離し、.animateWith()のために二番目のパラメータにそれを渡す必要があると思うRaphael.animation

を参照してください。

アニメーション部分ちょうどです：

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

だから、あなたがこれを行うことができます：

を210

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

がフィドルを参照してください：FYI http://jsfiddle.net/wDwsW/7/

を、私の代わりに無名関数を使用するのではなく、外部のコールバック関数を移動しました。