Drupal

Seit einiger Zeit beherrscht mich eine Frage: Warum ist nicht in allen Programmierumgebungen, die mit grafischen Elementen zu tun haben, das Problem der Animation grundsätzlich gelöst? In diesem ersten Beitrag einer Serie betrachte ich das Problem zunächst theoretisch.

An sich handelt es sich dabei um ein überschaubares, mit einfachen Hilfsmitteln lösbares Problem. Egal, ob man ein Objekt bewegen oder seine Farbe, Transparenz - kurz seine Eigenschaften - animieren möchte, es handelt sich immer um den gleichen Ablauf:

Eine Eigenschaft soll ihren Wert von A nach B über einen Zeitraum C in kleinen Schritten verändern.

Ein kleines Detail fehlt an dieser Umschreibung noch: Gerade bei Bewegungen ist es oft gewollt, dass das Objekt beschleunigt und auch wieder abbremst. Eine komplette Umschreibung lautet also wohl so:

Eine Eigenschaft soll ihren Wert von A nach B innerhalb von einem Zeitraum C, basierend auf einer Verlaufsfunktion f, in kleinen Schritten ändern.

Da wir bei Animationen grundsätzlich von einem zeitlichen Verlauf sprechen, ist zunächst einmal nur von Fließkomma-Eigenschaften die Rede. Allerdings ist es kein Problem, die von einer Animation berechneten Werte umzurechnen. Um das Ganze nun ein bisschen zu zerlegen, skalieren wir einfach die Eingangswerte (den Zeitraum, Start- und Zielwert) auf 0-1. Nun können wir einfach die Verlaufsfunktionen bestimmen, mit und ohne Beschleunigung.

Im Folgenden gehen wir einfach von f(t) aus, wobei t in den Grenzen {0;1} definiert ist, und f(t) ebenfalls in den Grenzen {0;1} definiert ist. Salopp: Es geht was zwischen 0 und 1 rein und es kommt was zwischen 0 und 1 raus.

Was genau muss nun zur Animation getan werden? Wir benötigen einen Start- und einen Zielwert, sowie eine Dauer. Daraus entsteht eine Funktion, die abhängig von der vergangenen Zeit ist, oder auch mathematisch:
{A;B;C;f(t)} ➔ Animation(T)

Wir haben Start- und Endwert A und B, die Dauer C und die Verlaufsfunktion. Für die Vereinfachte Darstellung definieren wir noch AB=B-A.

Animation(T) = A + AB*f(T/C)

Animation(T) ist nur definiert, solange T < C ist. Wird T > C, verlässt t den definierten Bereich. Eine schematische Darstellung verdeutlicht den Vorgang:

Das ließe sich mit wenig Aufwand in jede Programmierumgebung einbetten. Wir überlassen dem Anwender das regelmäßige Aufrufen und die Feststellung der vergangenen Zeit, so dass der Einsatz auch bei größeren Projekten möglich ist, wo die Zeit eventuell nicht in Echtzeit vergeht (Bullet-Time, einfacherer Spielmodus mit nur 90% Geschwindigkeit, etc.). Zur Vereinfachung der Anwendung ist es denkbar, statt der vergangenen Zeit eine Start-Uhrzeit abzufragen. Dadurch muss nur die aktuelle Uhrzeit übergeben werden. Die Berechnung der abgelaufenen Zeit wird somit intern durchgeführt.

Richtig spannend wird es erst bei der Implementierung. Wie wird an die Eigenschaft gekoppelt? Wie wird in die Struktur eingebettet, um möglichst einfach verwendet zu werden? Für den Standardfall mit einem normalen Timer: Synchronisierung mehrerer Animationen? Welche Funktionen liefert man mit? Kann der Anwender eigene Funktionen einbetten? Fragen über Fragen. Time to code!

Happy Hacking