Ein CAnim Objekt kann beliebige HTML-Objekte einer Webseite steuern. In der Regel verwendet man div oder img Objekte. CAnim kann diese Objekte Positionieren, deren Grösse ändern, die Transparenz einstellen (IE), sowie diese Objekte unsichtbar und sichtbar machen. Weitere Effekte können einfach integriert werden, z.B. ändern von Text, Farbe, z-index oder beliebige andere Style-Eigenschaften.
Auf dieser Seite wird das Grundgerüst einer Animation mit CAnim gezeigt. Ein Beispiel einer einfachen Animation befindet sich am Ende dieser Seite. Die Vorlage für diese Animation kann unter anim_tutor1.txt heruntergeladen werden.
Das Animations-Objekt CAnim ist in anim.js definiert. Zudem muss vorher die Datei x.js includet werden, in welcher alle Browser abhängigen Funktionen gesammelt sind:
<script src="x.js" type="text/javascript"></script> <script src="anim.js" type="text/javascript"></script>
Damit HTML-Objekte von CAnim gesteuert werden können, müssen sie ein paar Bedingungen erfüllen:
Diese Bedingungen packt man am besten in ein Style-Sheet, welches man den Objekten zuordnet, die von CAnim gesteuert werden sollen. Hier eine Vorlage:
<style type="text/css"> .anim { position:absolute; top:0; left:0; visibility:hidden; } </style>
Wenn sich die Animation auf einen bestimmten Bereich auf einer Webseite beschränken soll, muss man eine Bühne definieren. Dies ist einfach ein div mit einer bestimmten Grösse, welches am gewünschten Platz auf der Webseite eingefügt wird.
Damit sich die Koordinaten aller animierten Objekte auf den Nullpunkt der Bühne beziehen, muss die Bühne relativ posititioniert werden (style position:relative) und die animierten Objekte müssen innerhalb des Bühnen-div's definiert werden:
<div style="position:relative;width:600px;height:100px;left:50%;margin-left:-300px;"> <!-- hier die zu animierenden Objekte einfügen --> </div>
Trick: mit den Styles left:50%;margin-left:-300px; wird die Bühne zentriert.
Für unser erstes Beispiel verwenden wir zwei verschiedene Bildchen, die animiert werden sollen: ball.gif und sun.gif. Sie müssen also innerhalb der Bühne definiert werden, eine id und den style anim haben:
<div style="position:relative;width:600px;height:100px;left:50%;margin-left:-300px;"> <img id="ball" class="anim" src="ball.gif" width="24" height="24" alt=""> <img id="sun" class="anim" src="sun.gif" width="34" height="34" alt=""> </div>
Das Erzeugen der eigentlichen Animation geschieht in zwei Schritten:
Das Erzeugen des CAnim ist sehr einfach:
<script type="text/javascript"> var myAnim = new CAnim(); function BuildAnimation() { // hier die Animation programmieren myAnim.Load(); // initialisiert die Animation } xOnLoad( BuildAnimation ); </script>
Mit Hilfe der Funktion xOnLoad() aus dem Paket x.js wird die Funktion BuildAnimation() als Handler installiert. Dieser wird gerufen, sobald die Webseite vollständig geladen ist.
Achtung: Verwende nicht <body onload="BuildAnimation()"> . xOnLoad() erfüllt denselben Zweck, ist aber vielseitiger. Mit xOnLoad() können beliebig viele onload-Handler installiert werden.
In der Funktion BuildAnimation() bekommt nun unsere Animation das Fleisch. Auf die Details gehen die nächsten Tutorial-Seiten ein. Zum Einstieg zeige ich ein einfaches Beispiel, in welchem die zwei Bildchen unabhängig von einander entlang eines Pfades bewegt werden.
function BuildAnimation() { myAnim.AddFrames( [ 1000, 1000, 1000 ] ); myAnim.AddTrack( 'ball', 0, 2, [100,50], [500,50] ); myAnim.AddTrack( 'sun', 1, 2, [100,100], [500,100] ); myAnim.Load(); // initialisiert die Animation }
Mit myAnim.Play() kann die Animation gestartet werden. Dies wird entweder in einem Link gemacht, oder bei einer selbstlaufenden Animation in BuildAnimation() nach myAnim.Load().