Meluncur

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.

Bergerak pada Sudut Tertentu

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
hak cipta 1998 Dan Steinman
Diterjemahkan oleh Mark P. Eliasaputra