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:
khalifavi's weblog 