Animieren in JavaScript

SELFHTML aktuell Artikel JavaScript Fader-Framework
	Animieren in JavaScript
	Animieren in JavaScript Eine einfache Animation: Ladebalken

Animieren in JavaScript

Die Grundlage einer jeden Animation in JavaScript ist das zeitgesteuerte Verändern von CSS-Eigenschaften bestimmter HTML-Elemente. Im Wesentlichen verwendet man dazu das bereichsübergreifende Seite style-Objekt, um auf die CSS-Eigenschaften eines HTML-Elements direkt zugreifen zu können. Für das zeitgesteuerte Verändern bietet JavaScript zwei Methoden des window-Objektes an: setTimeout und setInterval.

Während setInterval eine stetige Reihe von Funktionsaufrufen ermöglicht (ähnlich einer tickenden Uhr), ermöglicht setTimeout einzelne Funktionsaufrufe mit individuellem Zeitabstand. Je nach Anwendung eignet sich die eine Methode oder die andere. Bei setInterval kann das stetige Aufrufen wieder gestoppt werden, wenn man sich den von dieser Methode zurückgegebenen Wert (eine Referenz auf den Timeout) irgendwo speichert. Für die Anforderungen der Animationen in diesem Artikel wird setTimeout verwendet, da diese Methode simpler zu handhaben ist.

Eine einfache Animation: Ladebalken

Eine sehr einfache Animation ist ein Ladebalken, denn hier wird einem Element jeweils die Breite vergrößert. Das lässt sich relativ leicht bewerkstelligen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Ladebalken</title>
    <script type="text/javascript">
    function animiere() {
            var ladebalken = document.getElementById("ladebalken");
            var laenge = parseInt(ladebalken.style.width);

            laenge++;
            ladebalken.style.width = laenge + "px";

            if (laenge < 300) {
                window.setTimeout(animiere, 10);
            }
        }
    </script>
</head><body>
    <h1>Ladebalken</h1>
    <p>Fortschritt: <span id="ladebalken" style="display: block; background: green; width: 0px;">&nbsp;</span></p>
    <p><a href="javascript:animiere()">animieren</a></p>
</body></html>

Erläuterung:

In diesem Beispiel wird in einem <script>-Bereich eine Funktion (animiere) definiert. Diese Funktion legt sich eine Referenz auf das betreffende HTML-Element mit der ID "ladebalken" in einer Variablen ab, um später schneller darauf zurückgreifen zu können. Dem <span>-Element, das diese ID enthält, wurde über das bereichsübergreifende Seite style-Attribut unter anderem ein Wert für die Eigenschaft width gegeben. Diese Festlegung über das style-Attribut ist deswegen notwendig, da sonst der Inhalt von ladebalken.style.width ein Leerstring wäre und parseInt keine Zahl zum Berechnen hätte, was im weiteren Verlauf zu einer Fehlermeldung und zum Abbruch des Scripts führen würde.

Die Funktion animiere ermittelt nun den gegenwärtigen Wert der width-Eigenschaft, um diesen dann um einen Schritt zu erhöhen und als neuen width-Wert (mit der Einheit "px" versehen!) wieder zuzuweisen. Danach wird ein Timeout eingerichtet, der nach zehn Millisekunden diese Funktion erneut aufruft. Für den Aufruf des Timeouts wird window.setTimeout verwendet, welches als Parameter den Namen der Funktion (ohne Klammernpaar!), und eine Zahl für die Dauer der Pause in Millisekunden übermittelt bekommt.

Beachten Sie:

Eine Animationsfunktion kann pro Aufruf immer nur einen Schritt in der Animation ausführen, niemals die gesamte Animation auf einmal! Daher ist es eventuell wichtig dafür zu sorgen, dass eine Animation auch ein Ende findet. In diesem Beispiel wurde in animiere eine Prüfung eingebaut, die nach Erreichen einer Breite von 300px keine weiteren Timeouts mehr aufruft. Sie können in diesem Beispiel aber weitere Breitenänderungen manuell vornehmen, indem Sie nach Ablauf der Animation erneut den Link betätigen, der weitere Einzelschritte ermöglicht.

Für den Aufruf von setTimeout wird als erster Parameter nur der Name der Funktion übermittelt, nicht jedoch der Aufruf der Funktion selbst, denn setTimeout benötigt hier eine Referenz auf diese Funktion und nicht ihren Rückgabewert. Daher steht kein Klammernpaar nach animiere.

Überblendungen

Einleitung