Animation: Grundgerüst
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.
Includen von CAnim
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>
Style für Animations-Objekte definieren
Damit HTML-Objekte von CAnim gesteuert werden können, müssen sie ein paar Bedingungen erfüllen:
- Sie müssen eine id haben.
- Sie müssen absolut positioniert werden können (style position:absolute)
- Ihre Sichtbarkeit muss auf unsichbar gesetzt sein (style visibility:hidden)
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>
Bühne erzeugen
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.
Animierte Objekte auf der Bühne
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>
CAnim Objekt erzeugen
Das Erzeugen der eigentlichen Animation geschieht in zwei Schritten:
- Erzeugen des CAnim Objektes im head der Webseite, damit die Steuerelemente im body auf dieses Objekt zugreifen können.
- Definieren der Animation in einer Funktion, welche erst gerufen wird, nachdem die Webseite vollständig geladen ist.
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.
Beispiel einer einfachen Animation
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().