WaBis

walter.bislins.ch

Animation: Pfade modulieren

Standardmässig wird die Bewegung eines Objektes gleichmässig, also linear, von seinem Startzustand zu seinem Endzustand ausgeführt. Diese Bewegung lässt sich nun durch beliebige Funktionen modulieren. Es wird dabei nicht der Pfad selbst moduliert, der bleibt immer noch geradlinig, sondern die Geschwindigkeit. Ein Objekt kann zum Beispiel langsam Starten, immer schneller werden und vor dem Ziel wieder abbremsen.

Der Parameter

Intern wird ein Pfad über einen Parameter gesteuert. Für jeden Track beginnt der Parameter mit dem Wert 0 und endet mit 1. Beim Wert 0 des Parameters befindet sich das Objekt im Startzustand, beim Wert 1 im Endzustand. Dazwischen wird linear interpoliert. Diese Interpolation kann man nun modulieren.

Dazu kann man eine beliebige Funktion pro Objekt oder pro Track installieren. Dieser Funktion wird der interne Parameter (Wert 0-1) übergeben und dieser Wert kann nun von der Funktion geändert, moduliert werden. Nachfolgend ein paar Beispiele, was sich damit anstellen lässt:

Modulation des Pfades eines Tracks

Eine Modulations-Funktion erhält als Parameter einen Wert zwischen 0 und 1 und sollte auch wieder Werte zwischen 0 und 1 zurück geben, damit sich das animierte Objekt zwischen Start- und Endzustand des Tracks bewegt. Eine einfache Modulations-Funktion ist folgende:

function CosMove( aParameter ) {
  return 0.5 - 0.5 * Math.cos( Math.PI * aParameter );
}

CosMove() moduliert aParameter in einer Cosinus-Funktion. Bei gleichmässigem Verlauf von aParameter von 0 bis 1 steigert sich der Returnwert der Funktion zunächst von 0 an nur langsam, wird dann schneller, ist bei aParameter = 0.5 ebenfalls 0.5, und bremst schliesslich wieder ab, sodass bei aParameter = 1 der Returnwert ebenfalls 1 ist.

Den Effekt zeige ich am besten an einem Beispiel. Im Beispiel 1 weise ich die Funktion CosMove() nur einem einzigen Track zu, der den Ball steuert. Zum Vergleich wird darunter die Sonne ohne Modulation bewegt. Beim Rücklauf bewegen sich dann Ball und Sonne wieder synchron, weil diesmal den Tracks keine Modulations-Funktion zugewiesen wird.

Beispiel 1

function CosMove( aParameter ) {
  return 0.5 - 0.5 * Math.cos( Math.PI * aParameter );
}

function BuildAnimation() {
  myAnim.AddFrames( [2000,1000,2000] );
  myAnim.AddTrack( 'ball', 0, 1, [100,10], [500,10], CosMove );
  myAnim.AddTrack( 'sun',  0, 1, [100,50], [500,50] );
  myAnim.AddTrack( 'ball', 1, 1, [500,10], null );
  myAnim.AddTrack( 'sun',  1, 1, [500,50], null );
  myAnim.AddTrack( 'ball', 2, 1, [500,10], [100,10] );
  myAnim.AddTrack( 'sun',  2, 1, [500,50], [100,50] );
  myAnim.Load(); // initialisiert die Animation
}

Starte die Animation

Globale Modulation aller Pfade eines Objektes

Wünscht man alle Bewegungen eines Objetes auf dieselbe Weise zu Modulieren, so kann man die Modulations-Funktion dem Actor zuordnen, der für das entsprechende Objekt zuständig ist. Für jedes Objekt legt CAnim einen Actor automatisch an. Will man nun für alle Tracks eines bestimmten Objektes den Pfad modulieren, kann man den Actor auch explizit erzeugen und ihm eine globale Modulations-Funktion zuweisen.

Beispiel 2

Ich verwende dasselbe Beispiel wie oben. Diesmal wird jedoch die Modulations-Funktion nicht einem Track, sondern dem Actor eines Objektes global zugewiesen. Das hat denselben Effekt, wie wenn CosMove() jedem einzelnen Track zugewiesen würde, welcher eine Bewegung für den Ball festlegt. Für unser Beispiel bedeutet dies, dass nun alle Bewegungen des Balls Cosinus-Moduliert verlaufen.

function CosMove( aValue ) {
  return 0.5 - 0.5 * Math.cos(Math.PI*aValue);
}

function BuildAnimation() {
  myAnim.AddFrames( [2000,1000,2000] );
  myAnim.AddActor( 'ball', CosMove );
  myAnim.AddTrack( 'ball', 0, 1, [100,10], [500,10] );
  myAnim.AddTrack( 'sun',  0, 1, [100,50], [500,50] );
  myAnim.AddTrack( 'ball', 1, 1, [500,10], null );
  myAnim.AddTrack( 'sun',  1, 1, [500,50], null );
  myAnim.AddTrack( 'ball', 2, 1, [500,10], [100,10] );
  myAnim.AddTrack( 'sun',  2, 1, [500,50], [100,50] );
  myAnim.Load(); // initialisiert die Animation
}

Starte die Animation

Kombinierte Modulation von Actor und Track

Wird sowohl einem Actor, als auch einem Track des selben Objektes eine Modulations-Funktion zugewiesen, so hat die Track-Funktion Vorrang vor der Actor-Funktion. Es werden nicht beide Funktion miteinander kombiniert.

Das nächste Beispiel verwendet für den Ball eine globale Modulation mit CosMove() und eine Track-Modulation mit ForBackLinear(), um die Grösse des Balls in einem Track zu vergrössern und gleich wieder zu verkleinern. Dies müsste man normalerweise in zwei Tracks erledigen, aber durch Modulieren mit einer Funktion, welche den Parameter im Bereich 0-1 auf 0-1-0 fährt, kann dies in einem Track erledigt werden:

Beispiel 3

function ForBackLinear( aValue ) {
  // aValue 0 - 0.5 -> returns 0 - 1: ret = 2 * aValue
  // aValue 0.5 - 1 -> returns 1 - 0: ret = 2 * (1-aValue)
  if (aValue <= 0.5) return 2 * aValue;
  else               return 2 * (1-aValue);
}

function CosMove( aValue ) {
  return 0.5 - 0.5 * Math.cos(Math.PI*aValue);
}

function BuildAnimation() {
  myAnim.AddFrames( [2000,2000,2000] );
  myAnim.AddActor( 'ball', CosMove );
  myAnim.AddTrack( 'ball', 0, 1, [100,10,,24,24], [500,10,,24,24] );
  myAnim.AddTrack( 'sun',  0, 1, [100,50], [500,50] );
  myAnim.AddTrack( 'ball', 1, 1, [500,10,,24,24], [490,0,,44,44], ForBackLinear );
  myAnim.AddTrack( 'sun',  1, 1, [500,50], null );
  myAnim.AddTrack( 'ball', 2, 1, [500,10,,24,24], [100,10,,24,24] );
  myAnim.AddTrack( 'sun',  2, 1, [500,50], [100,50] );
  myAnim.Load(); // initialisiert die Animation
}

Starte die Animation

Beachte

Sobald in irgendeinem Track die Grösse eines Objektes geändert wird, muss die Grössenangabe des Objektes bei jedem Track angegeben werden, da es sonst zu unerwarteten Nebeneffekten kommt, wenn der normale Ablauf der Animation durch den User geändert wird. Es ist nämlich möglich, an jede Frame-Position in der Animation zu springen und CAnim muss dann wissen, welche Grösse das Objekt an dieser Stelle haben soll. Sie könnte ja an anderer Stelle geändert worden sein.

More Page Infos / Sitemap
Created Freitag, 16. Mai 2008
Scroll to Top of Page
Changed Sonntag, 6. Dezember 2015