Hat jemand benutzt.animateWith() in Raphael, um schnelle Animationen erfolgreich synchron zu halten? Es ist schlecht dokumentiert. Der Ersteller der Bibliothek hat eineVideo-Demonstration aber keinen code kann ich finden.

Ich habe ein Javascript-Metronom, das aus einer Linie (dem Arm des Metronoms) und einem trapezförmigen "Gewicht" besteht, das sich schließlich auf und ab bewegen wird, um das Tempo zu kennzeichnen. Ich habe eine funktionierende GeigeHier, und die fraglichen Zeilen 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 sich die Geige ansehen und ein hohes Tempo und etwa 20 Zecken einstellen, sollten Sie den Gewichtsverlust hinter dem Arm bemerken. (Bitte versuchen Sie es ein paar Mal, wenn nicht - Murphys Gesetz usw.) Ich dachte, genau das hat animateWith () verhindert. Vielleicht verwende ich es falsch.

Wenn Sie sich das anschauenRaphael Quelle Bei der Funktion .animateWith () wird der .start-Parameter jeder Animation (FWIW) synchronisiert.