Kamis, 08 Mei 2014
0 komentar

Membuat Animasi Gambar Berjalan Dengan Javascript



Untuk membuat Animasi berjalan dengan javascript, pertama yang harus dilakukan adalah membuat kode html sebagai berikut :

<html>
    <head>
        <title>Animasi Javascript</title>
    </head>
    <body>
    </body>
</html>

Kemudian tulis kode javascript berikut ini :
<script type="text/javascript">
    var mobilObj = null;
    var animate ;
    function init(){
        mobilObj = document.getElementById('myImage');
        mobilObj.style.position= 'relative'; 
        mobilObj.style.left = '0px'; 
    }
    function majuJalan(){
        mobilObj.style.left = parseInt(mobilObj.style.left) + 10 + 'px';
        animate = setTimeout(majuJalan,20); 
    }
    function stop(){
        clearTimeout(animate);
        mobilObj.style.left = '0px'; 
    }
    window.onload =init;
</script>
Kemudian buat kontrol untuk menjalankan animasi, adapun kodenya adalah sebagai berikut :
<form>
    <img id="myImage" src="mobil.gif" /> 
    <p>Klik tombol Mulai untuk menjalankan mobil</p>
    <input type="button" value="Mulai" onclick="majuJalan();" />
    <input type="button" value="Berhenti" onclick="stop();" />
</form>

Keterangan :
<img id="myImage" src="mobil.gif" />
* Untuk menampilkan gambar, gambar bisa diganti sesuai dengan keinginan.
<input type="button" value="Mulai" onclick="majuJalan();" />
* Tombol untuk menjalankan gambar.
<input type="button" value="Berhenti" onclick="stop();" />
* Tombol untuk memberhentikan gambar dan mengembalikan ke posisi semula.
Sehingga kode keseluruhan adalah sebagai berikut ini :
<html>
    <head>
        <title>Animasi Javascript</title>
        <script type="text/javascript">
            var mobilObj = null;
            var animate ;
            function init(){
                mobilObj = document.getElementById('myImage');
                mobilObj.style.position= 'relative'; 
                mobilObj.style.left = '0px'; 
            }
            function majuJalan(){
                mobilObj.style.left = parseInt(mobilObj.style.left) + 10 + 'px';
                animate = setTimeout(majuJalan,20); 
            }
            function stop(){
                clearTimeout(animate);
                mobilObj.style.left = '0px'; 
            }
            window.onload =init;
        </script>
    </head>
    <body>
        <form>
            <img id="myImage" src="mobil.gif" /> 
            <p>Klik tombol Mulai untuk menjalankan mobil</p>
            <input type="button" value="Mulai" onclick="majuJalan();" />
            <input type="button" value="Berhenti" onclick="stop();" />
        </form>
    </body>
</html>

Kemudian jalankan lewat browser, maka akan tampil seperti dibawah ini.


 
Toggle Footer
Top