Meluncur adalah apa yang saya sebut pergerakan animasi atau efek menggulung. Dengan menggunakan fungsi-fungsi perulangan dan memindahkan lapisan dalam pertambahan yang kecil, Anda dapat membuat pergerakan animasi apa pun yang dapat Anda pikirkan.
Ide dasarnya adalah Anda mempunyai kode pergerakan Anda sendiri:
block.xpos += 5 block.left = block.xpos
Yang memindahkan lapisan 5 piksel ke kanan. Kemudian tempelkan kode tersebut ke dalam sebuah fungsi perulangan:
function slide() { if (block.xpos < 300) { block.xpos += 5 block.left = block.xpos setTimeout("slide()",30) } }
Pernyataan if ada untuk menentukan kapan menghentikan animasi. Dalam kasus ini fungsi akan berakhir ketika posisi x sama dengan atau di atas 300 piksel. Fungsi setTimeout() adalah yang menciptakan perulangan ini. Setelah sejumlah milidetik tertentu, apa pun yang ada dalam tanda petik akan dieksekusi. Maka fungsi ini akan mengulangi dirinya sendiri setiap 30 milidetik.
Klik di sini untuk melihat contohnya.
Tentu saja tidak lebih sulit lagi untuk bergerak diagonal Anda cukup mengubah kedua nilai xpos (kiri) dan ypos (atas). Klik di sini untuk melihat contoh diagonal.
Menggunakan beberapa trigonometri yang dipelajari di SMU kita dapat mengetahui cara memindahkan elemen pada sudut apa pun. Jika Anda lupa, berikut ini tampak diagram untuk menyegarkan kembali ingatan Anda:
Sekarang untuk menginisialisasi objek Anda untuk mencakup sudut (angle) Anda perlu 4 properti baru:
object.angle = 30 object.xinc = 5*Math.cos(object.angle*Math.PI/180) object.yinc = 5*Math.sin(object.angle*Math.PI/180) object.count = 0
Kita menghitung pertambahan x dan y dan menggunakannya untuk menentukan berapa jauh kita memindahkan nilai left dan top. Anda harus mengalikan sudutnya dengan Math.PI/180 untuk mengonversikan sudut menjadi radian sin dan cos selalu dihitung dalam radian. Properti count akan digunakan dalam fungsi perulangan untuk menentukan berapa kali perulangan harus dilakukan.
Menggunakan contoh balok saya lagi, inilah kode lengkap untuk memindahkan elemen pada sudut tertentu.
function init() { if (ns4) block = document.blockDiv if (ie4) block = blockDiv.style block.xpos = parseInt(block.left) block.ypos = parseInt(block.top) block.angle = 30 block.xinc = 5*Math.cos(block.angle*Math.PI/180) block.yinc = 5*Math.sin(block.angle*Math.PI/180) block.count = 0 } function slide() { if (block.count < 25) { block.xpos += block.xinc block.ypos -= block.yinc block.left = block.xpos block.top = block.ypos block.count += 1 setTimeout("slide()",30) } else block.count = 0 }
if (block.count < 25) berarti fungsi akan dijalankan 25 kali sebelum berhenti. Balok akan meluncur 125 satuan piksel secara keseluruhan.
Klik di sini untuk melihat contoh ini.
Saya juga telah membuat contoh sudut lainnya yang memungkinkan Anda mengubah sudutnya. Klik di sini untuk melihatnya.
Halaman Muka | Pelajaran Berikutnya: Animasi Klik Mouse |