Wie benutze ich Raphael .animateWith()

Question

Hat jemand .animateWith() in Raphael verwendet, um schnelle Animationen synchron zu halten? Es ist schlecht dokumentiert. Der Ersteller der Bibliothek hat eine video demonstration, aber ich kann keinen Code finden.

Ich habe ein Javascript-Metronom, das aus einer Linie (dem Arm des Metronoms) und einem trapezförmigen "Gewicht" besteht, das sich schließlich nach oben und unten bewegt, um das Tempo zu bezeichnen. Ich habe eine Arbeits Geige here, und die Linien in Frage sind:

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

Wenn Sie die Geige Check-out und ihm ein hohes Tempo geben und etwa 20 Ticks, sollten Sie das Gewicht liegen hinter dem Arm sehen. (Bitte versuchen Sie es ein paar Mal, wenn nicht - Murphys Gesetz etc.) Ich dachte, das ist genau das, was animateWith() verhindert. Vielleicht benutze ich es falsch.

Wenn man sich die Raphael source für die .animateWith() Funktion betrachten, sehen Sie den .start param jeder Animation synchronisiert, FWIW.

Answer 1

Vom Raphael documentation:

Parameter:

Element - [object] Element mit

anim synchronisieren - [object] Animation mit

synchronisiert

Animation - [object] Animation Objekt finden Raphael.animation

Also ich denke, Ihr Code muss nur trennen die Animation und übergeben, daß in den zweiten Parameter für .animateWith():

Die Animation Teil gerade ist:

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

So können Sie dies tun:

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

Siehe Geige: http://jsfiddle.net/wDwsW/7/

Fyi, zog ich die Callback-Funktion außerhalb, sondern anonyme Funktionen zu verwenden.