Bisher haben sich alle Bewegungen eines Tracks entlang einer Geraden abgespielt. Komplexere Pfade können durch Programmieren entsprechend vieler Tracks erzeugt werden. Dies hat den Nachteil, dass entsprechend viele Frames erzeugt werden müssen. Eine andere Lösung bieten Animatoren, die ich später detaillierter vorstellen werde. Ein Animator ist ein spezielles Objekt, das an einen Actor oder an einen Track gebunden werden kann und das zugehörige grafische Objekt in beliebigen Aspekten variieren kann.

Der Animator CPolygon

Ein vordefinierter Animator ist die Klasse CPolygon. Mit ihm lassen sich beliebige Polygone erzeugen. Wird ein CPolygon einem Track oder Actor zugewiesen, bewegt sich das entsprechende grafische Objekt entlang dieses Pfades. Der Vorteil ist, dass nur ein einziger Track für den ganzen Pfad benötigt wird. Zudem wird der Pfad gleichmässig linear abgefahren, egal wie kompliziert das Polygon ist.

Beispiel

Im folgenden Beispiel zeige ich die Anwendung eines CPolygon-Animators und den Unterschied zum Erzeugen mehrerer Tracks für dasselbe Polygon.

function BuildAnimation() {
  var poly = new CPolygon(
    [[100,10], [200,60], [300,10], [300,60], [400,60], [500,10]] );
  var dt = 1000;
  myAnim.AddFrames( [dt-500,dt+500,dt-700,dt-400,dt+1100,dt,dt] );
  myAnim.AddTrack( 'ball', 0, 5, null, null, poly );
  myAnim.AddTracks( 'ball', 5, [500,10], null, [100,10] );
  myAnim.AddTracks( 'sun',  0,
    [100,50], [200,100], [300,50], [300,100], [400,100], [500,50] );
  myAnim.AddTracks( 'sun', 5, [500,50], null, [100,50] );
  myAnim.Load(); // initialisiert die Animation
}

Im obigen Beispiel weise ich das Polygon poly einem Track zu. Da nun der Animator poly vollständig die Bewegung des Balls übernimmt, muss man beim Programmieren des Tracks keine Koordinaten angeben (null, null). Wenn man jedoch die Deckkraft oder Grösse des Objektes auch noch verändern will, kann man die entsprechenden Werte definieren, zum Beispiel:

myAnim.AddTrack( 'ball', 0, 4, [,,1,24,24], [,,0,44,44], poly );

Diese Anweisung würde den Ball ausblenden und gleichzeitig vergrössern, während er von poly entlang eines Polygones verschoben wird. Doch zurück zu unserem Beispiel:

Starte die Animation

Offset von CPolygon

Das Polygon eines CPolygon-Animators kann für verschiedene grafische Objekte wiederverwendet werden, man braucht nur verschiedene Offset anzugeben:

var poly = new CPolygon( fig, offsetX, offsetY );

Beispiel: Wiederverwendung eines Polygons

function BuildAnimation() {
  var fig = [[100,10], [200,60], [300,10], [300,60], [400,60], [500,10]];
  var dt = 1000;
  myAnim.AddFrames( [5*dt,dt,dt] );
  myAnim.AddTrack( 'ball', 0, 1, null, null, new CPolygon(fig,0,0) );
  myAnim.AddTracks( 'ball', 1, [500,10], null, [100,10] );
  myAnim.AddTrack( 'sun', 0, 1, null, null, new CPolygon(fig,0,40) );
  myAnim.AddTracks( 'sun', 1, [500,50], null, [100,50] );
  myAnim.Load(); // initialisiert die Animation
}

Die CPolygon-Animatoren können wie im obigen Beispiel auch inline erzeugt werden. Ich verwende für Ball und Sonne dasselbe Polygon fig, definiere aber für die Sonne einen Offset von 40 Pixel in y-Richtung. Ball und Sonne bewegen sich synchron um 40 Pixel in der y-Achse verschoben:

Starte die Animation

Modulation des Pfades bei CPolygon

Wie bei normalen Tracks kann auch bei Tracks mit CPolygon der Pfad moduliert werden, indem dem Actor oder Track eine Modulations-Funktion zugeordnet wird. Zusätzlich kann auch dem CPolygon selbst eine Modulation-Funktion zugewiesen werden. Die Modulationen überlagern sich entsprechend:

var poly = new CPolygon( fig, offsetX, offsetY, modulatorFunc );

Beispiel: Modulation des Pfades

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

function BuildAnimation() {
  var fig = [[100,10], [200,60], [300,10], [300,60], [400,60], [500,10]];
  var dt = 1000;
  myAnim.AddFrames( [5*dt,dt,2*dt] );
  myAnim.AddTrack( 'ball', 0, 1, null, null, 
    new CPolygon(fig,0,0), CosMove );
  myAnim.AddTrack( 'ball', 1, 1, [500,10], null );
  myAnim.AddTrack( 'ball', 2, 1, null, null, 
    new CPolygon(fig,0,0,Invert), CosMove );
  myAnim.AddTrack( 'sun', 0, 1, null, null, 
    new CPolygon(fig,0,40) );
  myAnim.AddTrack( 'sun', 1, 1, [500,50], null );
  myAnim.AddTrack( 'sun', 2, 1, null, null, 
    new CPolygon(fig,0,40,Invert) );
  myAnim.Load(); // initialisiert die Animation
}

Zum Vergleich wird der Pfad des Balles mit CosMove() moduliert, während die Sonne das Polygon gleichmässig abfährt.

Starte die Animation

Trick: Durch Zuweisen der Modulator-Funktion Invert(), welche den Parameter 0-1 invertiert auf 1-0, wird erreicht, dass das Polygon rückwärts durchlaufen wird.