Jak używać Raphael .animateWith()

Question

Czy ktoś użył .animateWith() w Raphael, aby z powodzeniem utrzymywać szybkie animacje w synchronizacji? Jest to słabo udokumentowane. Twórca biblioteki ma video demonstration, ale nie mogę znaleźć kodu.

Mam metronom Javascript, który składa się z linii (ramienia metronomu) i "wagi" w kształcie trapezu, która ostatecznie przesunie się w górę i dół, aby wskazać tempo. Mam skrzypce roboczą here, a linie o których mowa, to:

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

Jeśli sprawdzeniu skrzypce i nadać mu wysokie tempo i około 20 kleszczy, powinien pojawić się opóźnienie masy za ramię. (Spróbuj tego kilka razy, jeśli nie - Prawo Murphy'ego itp.) Myślałem, że właśnie to powstrzymało animateWith(). Być może używam go niepoprawnie.

Jeśli spojrzysz na funkcję Raphael source dla funkcji .animateWith(), zobaczysz, że synchronizuje ona parametr .start każdej animacji, FWIW.

Answer 1

Z Raphael documentation:

Parametry:

elementem - [przedmiot] Element synchronizacji z

Anim - [przedmiot] animacji synchronizacji z

animacja - [object] obiekt animacji, patrz Raphael.animation

Więc myślę, że Twój kod wystarczy oddzielić animację i przekazać, że do drugiego parametru dla .animateWith():

The część animacji jest po prostu:

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

Więc można to zrobić:

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

See skrzypce: http://jsfiddle.net/wDwsW/7/

Fyi, przeniosłem funkcję oddzwonienia na zewnątrz, zamiast korzystać z funkcji anonimowych.