Ich gehe vom Grundgerüst aus (siehe anim_tutor1.txt) und zeige, wie einfache Bewegungen entlang von Pfaden programmiert werden. Als Pfad ist nicht nur eine lineare Bewegung möglich, sondern auch das lineare Ein- und Ausblenden oder das Ändern der Grösse von Objekten.

Zeitrahmen einer Animation festlegen

Bevor ein Bewegungsablauf programmiert werden kann, muss ein Zeitrahmen dafür festgelegt werden. Dazu erzeugt man Frames und definiert die Zeitabstände zwischen je zwei Frames.

CAnim.AddFrames( aTimeArray )

Beispiel 1

myAnim.AddFrames( [ 2000, 1000, 300 ] );

aTimeArray

ist ein Array von Zeitintervallen in ms zwischen je zwei Frames. Im Beispiel 1 werden 4 Frames erzeugt. Zwischen Frame 0 und Frame 1 ist ein Abstand von 2000 ms, also 2 Sekunden, zwischen Frame 1 und Frame 2 ein Abstand von 1000 ms und zwischen Frame 2 und Frame 3 ein Abstand von 300 ms festgelegt.

Auf die mit AddFrames() implizit erzeugten Frames mit ihren Nummern (0,1,2,3) wird in den folgenden Funktionen Bezug genommen. Alle folgenden Beispiele verwenden diesen Zeitrahmen.

<script type="text/javascript">
var myAnim = new CAnim();

function BuildAnimation() {
  myAnim.AddFrames( [ 2000, 1000, 300 ] );
  // hier die Animation programmieren

  myAnim.Load(); // initialisiert die Animation
}

xOnLoad( BuildAnimation );
</script>

Tipp

Meist will man regelmässige Zeitintervalle verwenden. Dann empfiehlt es sich, dafür eine Variable zu definieren. So kann man die gesamte Zeitdauer einfach manipulieren, indem man der Variablen einen anderen Wert zuweist:

<script type="text/javascript">
var myAnim = new CAnim();

function BuildAnimation() {
  var dt = 1000;
  myAnim.AddFrames( [ 2*dt, dt, dt/3 ] );
  // hier die Animation programmieren
  :

Verschieben von Objekten

Ich zeige in diesem Beispiel, wie ich einen Ball entlang einer Linie verschieben kann. Eine Verschiebung wird programmiert, indem ein Track zwischen zwei beliebigen Frames erzeugt wird:

CAnim.AddTrack( aDivID,
  aStartFrameIx, aNFrames, aStartState, aEndState )

Beispiel 2

myAnim.AddTrack( 'ball', 0, 1, [100,10], [500,10] );

aDivID

id eines HTML-Objektes, welches animiert werden soll.

aStartFrameIx

Nummer des Frames, an welchem die Bewegung gestartet werden soll.

aNFrames

gibt an, über wie viele Frames die Bewegung andauern soll. aNFrames = 0 bedeutet, bis zum letzen Frame.

aStartState, aEndState

geben die Start- bzw. Endpositionen [x,y] an. x ist der Abstand in Pixel vom linken Rand der Bühne, y ist der Abstand vom oberen Rand der Bühne.

Das Objekt wird gleichmässig von aStartState nach aEndState bewegt, unabhängig davon, über wie viele Frames die Bewegung geht. Es wird die Zeit zwischen Start- und Endframe des Tracks berechnet und die Bewegung wird gleichmässig über diesen Zeitraum ausgeführt.

Achtung: Das Objekt ist nur sichtbar, wenn sich der Cursor innerhalb des Tracks befindet. Soll ein Objekt eine Zeit lang unbeweglich sichtbar sein, muss dafür ein Track programmiert werden, bei dem aEndState = null angegeben wird. Das folgende Beispiel zeigt den Unterschied. Für den Ball wird ein Track zwischen Frame 1 und Frame 2 programmiert, bei dem der Ball nicht bewegt wird, während für die Sonne für diesen Zeitraum kein Track definiert wird.

Beispiel 3

function BuildAnimation() {
  myAnim.AddFrames( [2000,1000,300] );

  myAnim.AddTrack( 'ball', 0, 1, [100,10], [500,10] );
  myAnim.AddTrack( 'ball', 1, 1, [500,10], null );
  myAnim.AddTrack( 'ball', 2, 1, [500,10], [100,10] );

  myAnim.AddTrack( 'sun', 0, 1, [100,50], [500,50] );
  // kein Track für sun zwischen Frame 1 und 2!
  myAnim.AddTrack( 'sun', 2, 1, [500,50], [100,50] );
  myAnim.Load(); // initialisiert die Animation
}

Starte die Animation

Objekte ein- und ausblenden

Die Funktion AddTrack() kann noch mehr. Mit ihr lässt sich ein Objekt auf aktuellen Browsern auch ein- und ausblenden. Dazu muss lediglich bei aStartState und aEndState neben den Koordinaten noch ein dritter Wert angegeben werden, welcher die Deckkraft zwischen 0 wie unsichtbar und 1 wie undurchsichtig angibt. Dieser Wert kann mit dem Verschieben kombiniert werden.

Beispiel 4

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

Im Beispiel 4 wird im ersten Track (zwischen Frame 0 und 1) der Ball nur von links nach rechts verschoben. Im zweiten Track (zwischen Frame 1 und 2) wird der Ball nicht bewegt (gleiche Koordinaten), jedoch ausgeblendet (von 1 = undurchsichtig nach 0 = unsichtbar). Im dritten Track wird der Ball gleichzeitig von rechts nach links verschoben und wieder eingeblendet.

Starte die Animation

Die Grösse von Objekten ändern

Mit der Funktion AddTrack() lässt sich auch die Grösse von Objekten verändern. Dazu kann bei aStartState und aEndState neben den Koordinaten noch die Breite und Höhe des Objektes angegeben werden.

Beispiel 5

function BuildAnimation() {
  myAnim.AddFrames( [2000,1000,300] );
  myAnim.AddTrack( 'ball', 0, 1, [110,20,,4,4], [500,10,,24,24] );
  myAnim.AddTrack( 'ball', 1, 1, [500,10,,24,24], [490,0,,44,44] );
  myAnim.AddTrack( 'ball', 2, 1, [490,0,,44,44], [110,20,,4,4] );
  myAnim.Load(); // initialisiert die Animation
}

Beim 4. und 5. Wert von aStartState und aEndState kann die Breite und die Höhe des Objektes festgelegt werden. Wenn die Transparenz nicht benötigt wird, kann man den 3. Wert für die Transparenz einfach weglassen.

Starte die Animation

Beachte

Sobald in irgendeinem Track die Grösse eines Objektes geändert wird, muss die Standardgrösse 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.