Wie die Mosaik Steinchen animiert werden

Saturday, 15. April, 2006

Dieser Artikel zeigt, wie die Steinchen auf BunteSuppe.de animiert sind, so dass man sie am Bildschirm herumzischen sieht (oder “fliegen”, wie wir es nennen).

In einem anderen Post, besprechen wir die Steinchen, aus denen jedes Mosaik besteht, im Detail. Für den Zweck dieses Artikels, brauchen wir nur wissen, dass jedes Steinchen grundsätzlich aus einem “div” mit einer gesetzten Hintergrundfarbe gemacht ist.

In einem anderen Artikel wiederum besprechen wir die Basics, wie man jedes HTML Element dazubringt, sich am Bildschirm zu bewegen, mit Hilfe von einfachem JavaScript.

Die Basics, wie man das (Steinchen-)Ziehen mit JavaScript implementiert, sind hier erklärt: Wie geht das mit dem Drag-and-Drop.

tile

Wie die Steinchen auf BunteSuppe “fliegen”:

Wenn Du ein Steinchen ziehst (link: Basics über das Ziehen eines Objekts), wird die Endposition des Steinchens zum Server gesendet. Der Server speichert die neue Position in der Database und retourniert dem Browser die x/y Position der Steinchen, die bewegt worden sind, seit der Browser das letzte Mal mit neuen Steinchenpositionen upgedatet worden ist (lese mehr darüber hier: Die Verwendung von Ajax für das Mosaik).

Wir müssen die derzeitige Bildschirm x/y Position eines jeden Steinchens bearbeiten, bis sie alle ihre Zielposition erreicht haben.

Dafür verwenden wird die timeout() Funktion, mit der man eine zeitliche Verzögerung einstellen kann, nach der eine spezifische Funktion ausgeführt wird.

Wir haben unsere Funktion, die die Steinchen animiert “fly()” genannt.

Jedes Mal, wenn die fly() Funktion aufgerufen wird, bewegt sie die Steinchen näher zu ihren Zielpositionen hin, indem eine mathematische Funktion verwendet wird, die die Schrittgröße bestimmt.

Die fly() Funktion wird sich selber aufrufen, es wird wieder die timeout() Funktion verwendet, bis alle Steinchen, die animiert gehören, ihre Zielposition erreicht haben. Um eine reibungslose Animation zu erreichen, wird unsere fly() Funktion 50 Mal pro Sekunde aufgerufen (d.h. mit einem Timeout von 20 Millisekunden).

Die Geschwindigkeit der animierten Steinchen hängt von Deinem Computer und Deinem Browser ab. Zum Beispiel hat auf Macs der Safari Browser (wir haben die Version 1.3.2 überprüft) ziemliche Probleme damit, dass seine DOM manipuliert werden, wenn es so viele Objekte gibt. Die fly() Funktion braucht daher mehr als 20 Millisekunden und die Animation schaut daher eher nicht so gut aus und ist langsam. Auf einem PC solltest Du mit dem Firefox Browser problemlos nahe an 50Hz herankommen.

Bestimmung der Steinchengeschwindigkeit

Wir haben uns für eine fixe Beschleunigung für die ersten paar Schritte der Animation entschieden. Und zwar auf eine Art, die die Beschleunigung eines Steinchens nachmacht, wenn ein menschlicher Spieler das Steinchen an eine andere Stelle bewegen würde. Dafür haben wir einen Table vordefiniert (wir verwenden einen JavaScript Array), der einen gewissen Beschleunigungsfaktor zurückgibt, der für die Berechnung der Steinchengeschwindigkeit verwendet wird, z.B. dx (delta x) und dy (delta y).

Nach einer gewissen Schritt Nummer (definiert durch die Größe des vordefinierten Step Arrays), hängt dx und dy von der Entfernung des Objekts von seiner Zielposition ab.

Je näher das Steinchen an seinem Ziel ist, desto langsamer ist seine Geschwindigkeit, um einen Menschen nachzumachen, der vorsichtig und nun langsam ein Objekt positioniert, nachdem er es schnell über den Bildschirm gezogen hat.

Eine kleine sinusförmige Demo

Hat Dir das Steinchen, das weiter oben hin und her floated gefallen? Es ist eigentlich ein Bild (daher auch der putzige Dropshadow), aber es ist nach denselben Prinzipien animiert.

Download und schau Dir das externe JavaSript an, dass wir auf dieser Seite benutzt haben oder schau dir dieses seperate Demo hier an.