JavaScript - animacja

Możesz użyć JavaScript, aby stworzyć złożoną animację zawierającą między innymi następujące elementy -

Fireworks
Efekt zanikania
Roll-in lub Roll-out
Page-in lub Page-out
Ruchy obiektów

Możesz być zainteresowany istniejącą biblioteką animacji opartą na JavaScript: Script.Aculo.us .

Ten samouczek zapewnia podstawową wiedzę o tym, jak używać JavaScript do tworzenia animacji.

JavaScript może służyć do przenoszenia wielu elementów DOM (<img />, <div> lub dowolnego innego elementu HTML) po stronie zgodnie z pewnym wzorcem określonym przez równanie logiczne lub funkcję.

JavaScript udostępnia następujące dwie funkcje, które są często używane w programach do animacji.

setTimeout( function, duration) - Ta funkcja wywołuje function po duration za milisekundy.
setInterval(function, duration) - Ta funkcja wywołuje function po każdym duration milisekund.
clearTimeout(setTimeout_variable) - Ta funkcja powoduje wyczyszczenie wszystkich timerów ustawionych przez funkcje setTimeout ().

JavaScript może także ustawić szereg atrybutów obiektu DOM, w tym jego pozycję na ekranie. Możesz ustawić górny i lewy atrybut obiektu, aby umieścić go w dowolnym miejscu na ekranie. Oto jego składnia.

// 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;

Animacja ręczna

Zaimplementujmy więc jedną prostą animację przy użyciu właściwości obiektu DOM i funkcji JavaScript w następujący sposób. Poniższa lista zawiera różne metody DOM.

Używamy funkcji JavaScript getElementById() aby pobrać obiekt DOM, a następnie przypisać go do zmiennej globalnej imgObj.
Zdefiniowaliśmy funkcję inicjalizacyjną init() zainicjować imgObj gdzie ustawiliśmy jego position i left atrybuty.
Funkcję inicjalizacji wywołujemy w momencie ładowania okna.
Wreszcie dzwonimy moveRight()funkcja zwiększania odległości po lewej stronie o 10 pikseli. Możesz również ustawić wartość ujemną, aby przenieść ją na lewą stronę.

Przykład

Wypróbuj następujący przykład.

<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>

Wynik

Zautomatyzowana animacja

W powyższym przykładzie widzieliśmy, jak obraz przesuwa się w prawo z każdym kliknięciem. Możemy zautomatyzować ten proces za pomocą funkcji JavaScriptsetTimeout() w następujący sposób -

Tutaj dodaliśmy więcej metod. Zobaczmy więc, co nowego tutaj -

Plik moveRight() funkcja dzwoni setTimeout()funkcja, aby ustawić pozycję imgObj .
Dodaliśmy nową funkcję stop() aby wyczyścić licznik czasu ustawiony przez setTimeout() funkcji i ustawić obiekt w jego początkowej pozycji.

Przykład

Wypróbuj poniższy przykładowy kod.

<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 ze zdarzeniem myszy

Oto prosty przykład pokazujący najechanie obrazkiem za pomocą zdarzenia myszy.

Zobaczmy, czego używamy w poniższym przykładzie -

W momencie wczytywania tej strony instrukcja „if” sprawdza istnienie obiektu obrazu. Jeśli obiekt obrazu jest niedostępny, ten blok nie zostanie wykonany.
Plik Image() konstruktor tworzy i wstępnie ładuje nowy obiekt obrazu o nazwie image1.
Do właściwości src jest przypisywana nazwa zewnętrznego pliku obrazu o nazwie /images/html.gif.
Podobnie stworzyliśmy image2 obiekt i przypisany /images/http.gif w tym obiekcie.
Znak # (krzyżyk) wyłącza łącze, aby przeglądarka nie próbowała przejść do adresu URL po kliknięciu. Ten link jest obrazem.
Plik onMouseOver program obsługi zdarzeń jest wyzwalany, gdy mysz użytkownika zostanie przeniesiona na łącze, a onMouseOut Procedura obsługi zdarzenia jest wyzwalana, gdy mysz użytkownika odsuwa się od łącza (obrazu).
Kiedy mysz przesuwa się nad obrazem, obraz HTTP zmienia się z pierwszego obrazu na drugi. Gdy mysz zostanie odsunięta od obrazu, zostanie wyświetlony oryginalny obraz.
Gdy mysz zostanie odsunięta od łącza, na ekranie ponownie pojawi się początkowy obraz html.gif.

<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>