ES6 - Animasi

Anda dapat menggunakan JavaScript untuk membuat animasi kompleks yang memiliki, tetapi tidak terbatas pada, elemen berikut -

Fireworks
Efek fade
Roll-in atau Roll-out
Page-in atau Page-out
Gerakan objek

Pada bab ini, kita akan melihat bagaimana menggunakan JavaScript untuk membuat animasi.

JavaScript dapat digunakan untuk memindahkan sejumlah elemen DOM (<img />, <div>, atau elemen HTML lainnya) di sekitar halaman sesuai dengan beberapa jenis pola yang ditentukan oleh persamaan atau fungsi logis.

JavaScript menyediakan fungsi berikut untuk sering digunakan dalam program animasi.

setTimeout(fungsi, durasi) - Fungsi ini memanggil fungsi setelah durasi milidetik dari sekarang.
setInterval(fungsi, durasi) - Fungsi ini memanggil fungsi setelah setiap milidetik durasi.
clearTimeout(setTimeout_variable) - Fungsi ini menghapus semua timer yang disetel oleh fungsi setTimeout ().

JavaScript juga dapat menyetel sejumlah atribut dari objek DOM termasuk posisinya di layar. Anda dapat mengatur atribut top dan left suatu objek untuk memposisikannya di mana saja di layar. Berikut ini adalah sintaks yang sama.

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

Animasi Manual

Jadi mari kita terapkan satu animasi sederhana menggunakan properti objek DOM dan fungsi JavaScript sebagai berikut. Daftar berikut berisi metode DOM yang berbeda.

Kami menggunakan fungsi JavaScript getElementById() untuk mendapatkan objek DOM dan kemudian menugaskannya ke variabel global imgObj.
Kami telah mendefinisikan fungsi inisialisasi init() untuk menginisialisasi imgObj di mana kita telah mengatur posisi dan atribut kiri.
Kami memanggil fungsi inisialisasi pada saat jendela dimuat.
Kami menelepon moveRight()berfungsi untuk menambah jarak kiri sebesar 10 piksel. Anda juga dapat mengaturnya ke nilai negatif untuk memindahkannya ke sisi kiri.

Contoh

Coba contoh berikut

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

Animasi Otomatis

Pada contoh di atas, kami melihat bagaimana sebuah gambar bergerak ke kanan dengan setiap klik. Kami dapat mengotomatiskan proses ini dengan menggunakan fungsi JavaScriptsetTimeout() sebagai berikut.

Di sini kami telah menambahkan lebih banyak metode. Jadi, mari kita lihat apa yang baru di sini.

Itu moveRight() fungsi memanggil fungsi setTimeout () untuk mengatur posisi imgObj.
Kami telah menambahkan fungsi baru stop() untuk menghapus pengatur waktu yang disetel oleh fungsi setTimeout () dan untuk menyetel objek pada posisi awalnya.

Contoh

Coba kode contoh berikut.

<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 dengan Acara Mouse

Berikut adalah contoh sederhana yang menunjukkan rollover gambar dengan mouse event.

Mari kita lihat apa yang kita gunakan dalam contoh berikut -

Pada saat memuat halaman ini, pernyataan 'if' memeriksa keberadaan objek gambar. Jika objek gambar tidak tersedia, blok ini tidak akan dijalankan.
Itu Image() konstruktor membuat dan memuat objek gambar baru yang disebut image1.
Itu src properti diberi nama file gambar eksternal yang dipanggil /images/html.gif.
Demikian pula yang telah kami buat image2 objek dan ditugaskan /images/http.gif di objek ini.
Itu #(tanda pagar) menonaktifkan link sehingga browser tidak mencoba membuka URL saat diklik. Tautan ini adalah gambar.
Itu onMouseOver event handler dipicu saat mouse pengguna bergerak ke tautan, dan onMouseOut event handler dipicu saat mouse pengguna menjauh dari link (gambar).
Saat mouse bergerak di atas gambar, gambar HTTP berubah dari gambar pertama ke gambar kedua. Saat mouse digerakkan menjauh dari gambar, gambar asli ditampilkan.
Saat mouse dijauhkan dari link, gambar awal html.gif akan muncul kembali di layar.

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