Arsip Tag: animasi dojo toolkit

Animasi di Dojo Toolkit

Sebenarnya saya sedikit ragu tentang apa dulu yang saya perlihatkan setelah posting pembuka beberapa waktu lalu, tapi akhirnya saya tentukan saja kalau yang akan kita bahas sekarang adalah Animasi menggunakan Dojo Toolkit. Dari animasi paling dasar, hingga ke animasi tingkat menengah.

Langsung Beraksi

Tanpa basa-basi, dengan hanya memanggil dojo.js saja, sebenarnya kita sudah bisa melakukan animasi dasar. Mari kita buktikan

<html>
<head>
    <title>Animasi Dasar menggunakan Dojo Toolkit</title>
    <script type="text/javascript" src="../js/dojo-toolkit/dojo/dojo.js"></script>
</head>
<body>
    <a href="#" id="hilang">hilangkan</a> | <a href="#" id="tampil">tampilkan</a>
    <div id="teks-1">teks yang akan dihilangkan</div>
    <script type="text/javascript">
        // memastikan jika dojo sudah terpanggil
        dojo.addOnLoad(function(){

            // memasang event handler saat link hilangkan diklik
            dojo.connect(dojo.byId('hilang'), 'onclick', function(){
                // hilangkan teks
                dojo.fadeOut({
                    node: 'teks-1',
                    duration: 500
                    }).play();
            });

            // memasang event handler saat link tampilkan diklik
            dojo.connect(dojo.byId('tampil'), 'onclick', function(){
                // tampilkan teks
                dojo.fadeIn({
                    node: 'teks-1',
                    duration: 500
                }).play();
            });

        });
    </script>
</body>
</html>

Dan inilah hasilnya, jika kita meng-klik link hilangkan maka teks dibawah akan fade out, dan sebaliknya jika kita meng-klik link tampilkan, teks dibawah itu akan tampil kembali dengan efek fade in.

Ini gambarnya:

Efek yang Lain

Efek yang lain bisa menggunakan animateProperty, yaitu animasi manipulasi property css. Tidak jauh berbeda dengan contoh pertama, tapi sekarang kita coba dengan ukuran font

<html>
<head>
    <title>Animasi Dasar 2 (animateProperty) menggunakan Dojo Toolkit</title>
    <script type="text/javascript" src="../js/dojo-toolkit/dojo/dojo.js"></script>
</head>
<body>
    <a href="#" id="besar">besarkan</a> | <a href="#" id="kecil">kecilkan</a>
    <div id="teks-1">teks yang akan dimainkan</div>
    <script type="text/javascript">
        // memastikan jika dojo sudah terpanggil
        dojo.addOnLoad(function(){

            // memasang event handler saat link besarkan diklik
            dojo.connect(dojo.byId('besar'), 'onclick', function(){
                // besarkan teks
                dojo.animateProperty({
                    node: 'teks-1',
                    properties:{
                        fontSize: 34
                    }
                    }).play();
            });

            // memasang event handler saat link kecilkan diklik
            dojo.connect(dojo.byId('kecil'), 'onclick', function(){
                // kecilkan teks
                dojo.animateProperty({
                    node: 'teks-1',
                    properties:{
                        fontSize: 16
                    }
                    }).play();
            });

        });
    </script>
</body>
</html>

Ini gambarnya:

Masih Belum Cukup?

Sebenarnya dengan menggunakan animateProperty kita bisa mencoba banyak variasi animasi, tapi jika kita ingin lebih praktis lagi, kita bisa menggunakan fungsi tambahan dari modul dojo.fx (modul untuk easing, wipeIn, wipeOut, slideTo, Toggler, chain, dan combine).

Tapi untuk contoh, kita akan tampilkan animasi wipeOut dan easing dengan chain

<html>
<head>
    <title>Animasi Menengah menggunakan Dojo Toolkit</title>
    <script type="text/javascript" src="../js/dojo-toolkit/dojo/dojo.js"></script>
    <style type="text/css">
        #box-1, #box-2{
            display:block;
            position:relative;
            width:100px;
            height:100px;
            max-height:200px;
            background-color:#d55;
        }
    </style>
</head>
<body>
    <a href="#" id="wipeout">wipeOut</a>
    <div id="box-1"></div>
    <br />
    <div id="box-2"></div>
    <script type="text/javascript">
        // load terlebih dahulu dojo.fx dan easing
        dojo.require('dojo.fx');
        dojo.require('dojo.fx.easing');


        // memastikan jika dojo sudah terpanggil
        dojo.addOnLoad(function(){

            // memasang event handler saat link wipeOut diklik
            dojo.connect(dojo.byId('wipeout'), 'onclick', function(){

                // animasi box-1 disimpan di variabel box1
                var box1 = dojo.fx.wipeOut({
                    node: 'box-1',
                    duration: 500,
                    easing : dojo.fx.easing.quadIn
                });

                // animasi box-1 disimpan di variabel box1
                var box2 = dojo.fx.wipeOut({
                    node: 'box-2',
                    duration: 500,
                    easing : dojo.fx.easing.quadIn
                });

                dojo.fx.chain([box2, box1]).play();

            });

        });
    </script>
</body>
</html>

Ini gambarnya:

Masih Kurang Juga?!

Tapi jika masih kurang memukau, kita bisa menampilkan animasi yang lebih kompleks lagi dengan memanggil modul dari Dojox, yaitu dojox.fx (modul untuk wipeTo, sizeTo, slideBy, crossFade, highlight, fadeTo, dll).

Sebagai contoh, kita coba tampilkan crossFade dan highlight

<html>
<head>
    <title>Animasi Menengah 2 menggunakan Dojo Toolkit</title>
    <script type="text/javascript" src="../js/dojo-toolkit/dojo/dojo.js"></script>
    <style type="text/css">
        #box-1, #box-2{
            display:block;
            position:relative;
            width:100px;
            height:100px;
            max-height:200px;
            background-color:#d55;
        }
    </style>
</head>
<body>
    <a href="#" id="crossfade">crossFade</a>
    <div id="box-1"></div>
    <div id="box-2" style="opacity:0"></div>
    <script type="text/javascript">
        // load terlebih dahulu dojox.fx
        dojo.require('dojox.fx');

        // memastikan jika dojo sudah terpanggil
        dojo.addOnLoad(function(){

            // memasang event handler saat link crossFade diklik
            dojo.connect(dojo.byId('crossfade'), 'onclick', function(){

                // highlight link crossFade
                dojox.fx.highlight({
                    node: this
                }).play();

                // animasi crossFade box-1 dan box-2
                dojox.fx.crossFade({
                    nodes: ['box-1', 'box-2'],
                    duration: 500,
                }).play();


            });

        });
    </script>
</body>
</html>

Ini gambarnya:

Tambahan Eksperimen

Dojox sudah menyediakan modul dojox.fx yang lengkap, tapi jika anda masih ingin tahu lebih dalam lagi, silahkan anda cek di halaman test animasi dojo toolkit, bagian dojox.fx (tersedia juga scroll, Shadow, flip, split, text, dan masih berkembang).

Kemana Lagi Setelah Ini?

Masih banyak yang bisa dibongkar tentang animasi menggunakan Dojo Toolkit ini, semuanya bisa diatur sesuai dengan keperluan kita. Tapi jangan berhenti disini, untuk lebih lanjut saya sarankan untuk ke sumber-sumber berikut: