JavaScript - Animation

Sie können JavaScript verwenden, um eine komplexe Animation mit den folgenden Elementen zu erstellen, ohne darauf beschränkt zu sein:

Fireworks
Fade-Effekt
Roll-In oder Roll-Out
Page-in oder Page-out
Objektbewegungen

Möglicherweise interessieren Sie sich für die vorhandene JavaScript-basierte Animationsbibliothek: Script.Aculo.us .

Dieses Tutorial vermittelt ein grundlegendes Verständnis der Verwendung von JavaScript zum Erstellen einer Animation.

JavaScript kann verwendet werden, um eine Reihe von DOM-Elementen (<img />, <div> oder ein anderes HTML-Element) gemäß einem durch eine logische Gleichung oder Funktion bestimmten Muster auf der Seite zu verschieben.

JavaScript bietet die folgenden zwei Funktionen, die häufig in Animationsprogrammen verwendet werden.

setTimeout( function, duration) - Diese Funktion ruft auf function nach duration Millisekunden ab jetzt.
setInterval(function, duration) - Diese Funktion ruft auf function nach jedem duration Millisekunden.
clearTimeout(setTimeout_variable) - Diese Funktionsaufrufe löschen alle von den Funktionen setTimeout () eingestellten Timer.

JavaScript kann auch eine Reihe von Attributen eines DOM-Objekts festlegen, einschließlich seiner Position auf dem Bildschirm. Sie können das obere und linke Attribut eines Objekts festlegen, um es an einer beliebigen Stelle auf dem Bildschirm zu positionieren. Hier ist seine Syntax.

// Set distance from left edge of the screen.
object.style.left = distance in pixels or points; 

or

// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;

Manuelle Animation

Implementieren wir also eine einfache Animation mit den folgenden DOM-Objekteigenschaften und JavaScript-Funktionen. Die folgende Liste enthält verschiedene DOM-Methoden.

Wir verwenden die JavaScript-Funktion getElementById() um ein DOM-Objekt abzurufen und es dann einer globalen Variablen zuzuweisen imgObj.
Wir haben eine Initialisierungsfunktion definiert init() zu initialisieren imgObj wo wir es gesetzt haben position und left Attribute.
Wir rufen die Initialisierungsfunktion zum Zeitpunkt des Fensterladens auf.
Endlich rufen wir an moveRight()Funktion zum Erhöhen des linken Abstands um 10 Pixel. Sie können es auch auf einen negativen Wert setzen, um es auf die linke Seite zu verschieben.

Beispiel

Versuchen Sie das folgende Beispiel.

<html>   
   <head>
      <title>JavaScript Animation</title>      
      <script type = "text/javascript">
         <!--
            var imgObj = null;
            
            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative'; 
               imgObj.style.left = '0px'; 
            }
            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
            }
            
            window.onload = init;
         //-->
      </script>
   </head>
   
   <body>   
      <form>
         <img id = "myImage" src = "/images/html.gif" />
         <p>Click button below to move the image to right</p>
         <input type = "button" value = "Click Me" onclick = "moveRight();" />
      </form>      
   </body>
</html>

Ausgabe

Automatisierte Animation

Im obigen Beispiel haben wir gesehen, wie sich ein Bild mit jedem Klick nach rechts bewegt. Wir können diesen Prozess mithilfe der JavaScript-Funktion automatisierensetTimeout() wie folgt -

Hier haben wir weitere Methoden hinzugefügt. Mal sehen, was hier neu ist -

Das moveRight() Funktion ruft auf setTimeout()Funktion zum Einstellen der Position von imgObj .
Wir haben eine neue Funktion hinzugefügt stop() um den von eingestellten Timer zu löschen setTimeout() Funktion und das Objekt an seine Ausgangsposition zu setzen.

Beispiel

Versuchen Sie den folgenden Beispielcode.

<html>   
   <head>
      <title>JavaScript Animation</title>      
      <script type = "text/javascript">
         <!--
            var imgObj = null;
            var animate ;
            
            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative'; 
               imgObj.style.left = '0px'; 
            }
            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
               animate = setTimeout(moveRight,20);    // call moveRight in 20msec
            }
            function stop() {
               clearTimeout(animate);
               imgObj.style.left = '0px'; 
            }
            
            window.onload = init;
         //-->
      </script>
   </head>
   
   <body>   
      <form>
         <img id = "myImage" src = "/images/html.gif" />
         <p>Click the buttons below to handle animation</p>
         <input type = "button" value = "Start" onclick = "moveRight();" />
         <input type = "button" value = "Stop" onclick = "stop();" />
      </form>      
   </body>
</html>

Rollover mit einem Mausereignis

Hier ist ein einfaches Beispiel, das einen Bild-Rollover mit einem Mausereignis zeigt.

Mal sehen, was wir im folgenden Beispiel verwenden -

Zum Zeitpunkt des Ladens dieser Seite prüft die 'if'-Anweisung, ob das Bildobjekt vorhanden ist. Wenn das Bildobjekt nicht verfügbar ist, wird dieser Block nicht ausgeführt.
Das Image() Der Konstruktor erstellt ein neues Bildobjekt mit dem Namen image1.
Der src-Eigenschaft wird der Name der externen Bilddatei mit dem Namen /images/html.gif zugewiesen.
Ebenso haben wir geschaffen image2 Objekt und zugewiesenes /images/http.gif in diesem Objekt.
Das # (Raute) deaktiviert den Link, sodass der Browser beim Klicken nicht versucht, zu einer URL zu wechseln. Dieser Link ist ein Bild.
Das onMouseOver Die Ereignisbehandlungsroutine wird ausgelöst, wenn sich die Maus des Benutzers auf den Link bewegt onMouseOut Die Ereignisbehandlungsroutine wird ausgelöst, wenn sich die Maus des Benutzers vom Link (Bild) entfernt.
Wenn Sie mit der Maus über das Bild fahren, wechselt das HTTP-Bild vom ersten zum zweiten Bild. Wenn die Maus vom Bild wegbewegt wird, wird das Originalbild angezeigt.
Wenn Sie die Maus vom Link entfernen, wird das ursprüngliche Bild html.gif wieder auf dem Bildschirm angezeigt.

<html>
   
   <head>
      <title>Rollover with a Mouse Events</title>
      
      <script type = "text/javascript">
         <!--
            if(document.images) {
               var image1 = new Image();     // Preload an image
               image1.src = "/images/html.gif";
               var image2 = new Image();     // Preload second image
               image2.src = "/images/http.gif";
            }
         //-->
      </script>
   </head>
   
   <body>
      <p>Move your mouse over the image to see the result</p>
      
      <a href = "#" onMouseOver = "document.myImage.src = image2.src;"
         onMouseOut = "document.myImage.src = image1.src;">
         <img name = "myImage" src = "/images/html.gif" />
      </a>
   </body>
</html>