javascript - descargar - raphael js examples

Cómo usar Raphael.animateWith()

Question

¿Alguien ha usado .animateWith() en Raphael para mantener exitosamente animaciones rápidas sincronizadas? Está mal documentado. El creador de la biblioteca tiene una demostración de video pero no hay código que pueda encontrar.

Tengo un metrónomo de Javascript que consiste en una línea (el brazo del metrónomo) y un "peso" de forma trapezoidal que eventualmente se moverá hacia arriba y hacia abajo para indicar el tempo. Tengo un violín que funciona aquí , y las líneas en cuestión son:

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

Si revisas el violín y le das un ritmo alto y unas 20 garrapatas, deberías ver el retraso de peso detrás del brazo. (Por favor, inténtelo algunas veces si no es así - Murphy''s Law, etc.). Pensé que esto era precisamente lo que animateWith () previno. Tal vez lo estoy usando incorrectamente.

Si observa la fuente de Raphael para la función .animateWith (), verá que sincroniza el parámetro .start de cada animación, FWIW.

Answer 1

De la documentación de Rafael :

Parámetros :

elemento - elemento [objeto] para sincronizar con

anim - animación [objeto] para sincronizar con

animación - objeto de animación [objeto], ver Raphael.animation

Así que creo que su código solo necesita separar la animación y pasarla a un segundo parámetro para .animateWith() :

La porción de animación es justa:

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

Entonces puedes hacer esto:

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

Ver violín: http://jsfiddle.net/wDwsW/7/

Fyi, moví la función de devolución de llamada afuera, en lugar de usar funciones anónimas.