Tutorial JQuery Part 6 : Animasi

PENDAHULUAN

Kata animasi berasal dari bahasa latin, yaitu animationem (nomina animatio) yang berarti memberi jiwa atau menghidupkan.

Animasi merupakan suatu metode memanipulasi sebuah gambar atau objek tertentu untuk menciptakan efek bergerak. Animasi bergerak secara tersusun dan beraturan mengikuti alur pergerakan yang telah ditentukan waktunya.

Di dalam animasi ada dua objek penting, yaitu

1. objek atau gambar

2. Alur gerak.

Secara umum dapat dikatakan sebagai suatu sequence gambar yang ditampilkan bersadarkan tenggang waktu (timeline) agar tercipta sebuah ilusi benda bergerak.

ANIMASI DI DALAM JQUERY

Salah satu yang menjadi alasan kenapa jQuery sangat populer digunakan adalah kemudahan dalam membuat berbagai efek menarik. karena jQuery memiliki banyak plugin/library tambahan terkhususnya untuk pembuatan animasi. Namun, library standar jQuery masih tetap bisa digunakan untuk membuat efek.

Standar Jquery untuk membuat animasi adalah dengan membuat method animate(). Method animate() digunakan untuk membuat animasi antara 2 buah efek CSS. Fitur ini sangat mirip dengan efek animasi di CSS3 (yang saya bahas di eBook CSS Uncover Duniailkom). Method ini bisa diisi dengan berbagai property CSS. Property Css ini diberikan efek sehingga terbentuk sebuah animasi.

Metode Animasi

Metode animate() digunakan untuk membuat animasi dari properti CSS yang bersifat numerik. contohnya,margin, padding, width, height, opacity dan lain sebagainya. Sedangkan properti Css yang non-numerik seperti color atau background-color tidak dapat dijadikan animasi sehingga perlu ditambahkan plugin khusus untuk animasi.

Syntax Method Animasi()

Bentuk penulisan Sintaks dasar metode jQuery animate() adalah seperti berikut:

$(selector).animate({ properties }, duration, callback);

Parameter dari metode animate() memiliki arti sebagai berikut:

Properti yang diperlukan menentukan properti CSS.
duras, lama animasi akan berjalan.
callback, fungsi untuk memanggil setelah animasi selesai.

Contoh animasi:

Siapkan sebuah gambar mobil dan simpan dengan nama mobil.png. Buat file baru dengan nama animasi.html. Ketikkan script berikut seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
    <button> Jalan</button>
    <img src="mobil.png" alt="">
</body>
</html>

Tambahkan style css berikut:

<style>
    img{
        position: absolute;
        height: 100px;
    }
</style>

Posisi absolute memberikan efek agar objek bisa dipindahkan.

Berikutkan berikan Jquery seperti berikut:

<script type="text/javascript">
    $(document).ready(function(){
    $("button").click(function(){
        $("img").animate({left: '250px'});
    });
    });
</script>

Berikut Script Fullnya:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<style>
    img{
        position: absolute;
        height: 100px;
    }
</style>
<body>
    <button> Jalan</button>
    <img src="mobil.png" alt="">
</body>
<script type="text/javascript">
    $(document).ready(function(){
    $("button").click(function(){
        $("img").animate({left: '250px'});
    });
    });
</script>
</html>

Jalankan program. Jika semua lancar anda akan dapatkan sebuah komponen button dan gambar mobil. Klik button tersebut dan perhatikan perubahannya.

Multy Properti

Kita bisa membuat animasi dengan beberapa properti css sekaligus secara bersamaan. Semua properti dianimasikan secara simultan tanpa penundaan. Berikut contohnya:

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({
                width: "100px",
                height: "100px",
                marginLeft: "150px",
                borderWidth: "10px",
                opacity: 0.5
            });
        });
    });
</script>

Queued Animasi

Queued Animasi adalah membuat efek animasi dengan teknik satu script animasi dijalankan kemudian pindah ke efek yang lain. Perhatikan contoh berikut:

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("div")
                .animate({width: "100px"})
                .animate({height: "100px"})
                .animate({marginLeft: "150px"})
                .animate({borderWidth: "10px"})
                .animate({opacity: 0.5});
        });
    });
</script>

Menentukan Nilai Relatif

Nilai di animasi JQuery juga dapat berbentuk relatif sehingga dapat berubah ubah. Jika nilai ditentukan dengan awalan prefix += atau -= , maka nilai target dihitung dengan menambahkan atau mengurangi angka yang diberikan dari nilai properti saat ini. Perhatikan contoh berikut:

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $(".box").animate({            
                top: "+=100px",
                left: "+=100px",
                width: "+=100px",
                height: "+=100px"
            });
        });
    });
</script>

PENUTUP

Nah itulah sekilas dasar-dasar pembuatan animasi di JQuery. Untuk tahap selanjutnya kita akan coba membahas bagaimana membuat animasi menggunakan plugin JQuery.

Tutorial JQuery Part 6 : Animasi

Baringin

Post a Comment

PEMOGRAMAN DASAR: Jenis-Jenis Operator dalam Bahasa Pemrograman (Bag 8)

Made with Love by

Contact form

Tutorial JQuery Part 6 : Animasi

Baringin

You Might Like

Post a Comment

Contact form