JavaScript - Animasi DOM

Hai, para pengembang web masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia animasi DOM JavaScript. Sebagai guru ilmu komputer tetangga Anda, saya sangat gembira untuk memandu Anda melalui topik yang menarik ini. Percayalah, pada akhir pelajaran ini, Anda akan dapat membuat halaman web hidup dengan gerakan!

Animasikan Elemen DOM dengan JavaScript

Sebelum kita masuk ke dalam rahasia animasi, mari cepatulang kembali apa itu DOM. DOM adalah singkatan dari Document Object Model, dan secara esensial adalah antarmuka pemrograman untuk dokumen HTML. Itu mewakili struktur dokumen sebagai hierarki seperti pohon, memungkinkan kita untuk memanipulasi konten dan struktur halaman web menggunakan JavaScript.

Sekarang, ketika kita membicarakan tentang menganimasikan elemen DOM, kita merujuk kepada perubahan propertinya selama waktu untuk menciptakan ilusi gerakan atau transformasi. Itu seperti membuat animasi buku flip, tapi dengan kode!

Mari mulai dengan contoh sederhana:

<div id="myBox" style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>

<script>
let box = document.getElementById('myBox');
let position = 0;

function moveBox() {
position += 1;
box.style.left = position + 'px';
}

setInterval(moveBox, 10);
</script>

Dalam contoh ini, kita menggerakkan kotak merah melintasi layar. Mari kitauraikan:

1. Kita membuat elemen <div> dengan gaya awal.
2. Kita gunakan document.getElementById('myBox') untuk mendapatkan referensi ke kotak kita.
3. Kita definisikan fungsi moveBox() yang menambahkan position dan memperbarui properti gaya left kotak.
4. Kita gunakan setInterval() untuk memanggil moveBox() setiap 10 milidetik, menciptakan animasi halus.

Animasikan Elemen DOM menggunakan metode setInterval()

Metode setInterval() adalah salah satu cara untuk menciptakan animasi dalam JavaScript. Itu memanggil fungsi secara berulang di interval yang ditentukan. mari lihat contoh yang lebih kompleks:

<div id="bouncer" style="width: 50px; height: 50px; background-color: blue; border-radius: 25px; position: absolute;"></div>

<script>
let bouncer = document.getElementById('bouncer');
let x = 0;
let y = 0;
let dx = 2;
let dy = 2;

function animate() {
x += dx;
y += dy;

if (x > window.innerWidth - 50 || x < 0) dx = -dx;
if (y > window.innerHeight - 50 || y < 0) dy = -dy;

bouncer.style.left = x + 'px';
bouncer.style.top = y + 'px';
}

setInterval(animate, 10);
</script>

Skrip ini menciptakan efek bola yang melompat:

1. Kita menset posisi awal (x, y) dan kecepatan (dx, dy).
2. Dalam fungsi animate(), kita memperbarui posisi berdasarkan kecepatan.
3. Kita memeriksa jika bola menyentuh tepi jendela dan membalik arahnya jika ia melakukan itu.
4. Kita memperbarui posisi bola di layar.
5. setInterval() memanggil animate() setiap 10ms, menciptakan gerakan halus.

Animasikan Elemen DOM menggunakan metode requestAnimationFrame()

Meskipun setInterval() bekerja, browser modern menawarkan metode yang lebih efisien: requestAnimationFrame(). Metode ini memberitahu browser bahwa Anda ingin melakukan animasi dan meminta browser memanggil fungsi tertentu untuk memperbarui animasi sebelum repaint berikutnya.

Mari tulis ulang bola melompat menggunakan requestAnimationFrame():

<div id="bouncer" style="width: 50px; height: 50px; background-color: green; border-radius: 25px; position: absolute;"></div>

<script>
let bouncer = document.getElementById('bouncer');
let x = 0;
let y = 0;
let dx = 2;
let dy = 2;

function animate() {
x += dx;
y += dy;

if (x > window.innerWidth - 50 || x < 0) dx = -dx;
if (y > window.innerHeight - 50 || y < 0) dy = -dy;

bouncer.style.left = x + 'px';
bouncer.style.top = y + 'px';

requestAnimationFrame(animate);
}

requestAnimationFrame(animate);
</script>

Perbedaan utama di sini adalah bahwa instead of using setInterval(), kita memanggil requestAnimationFrame(animate) di akhir fungsi animate() kita. Ini menciptakan loop di mana browser memanggil animate() sebelum setiap repaint.

Animasikan Elemen DOM dengan Mengubah Properti CSS

Hingga sekarang, kita telah mengubah properti CSS secara langsung menggunakan JavaScript. Namun, pengembangan web modern seringkali memanfaatkan transisi dan animasi CSS untuk kinerja yang lebih halus. mari lihat bagaimana kita dapat memicu animasi CSS menggunakan JavaScript:

<style>
.box {
width: 100px;
height: 100px;
background-color: purple;
position: absolute;
transition: all 0.5s ease;
}
</style>

<div id="myBox" class="box"></div>

<script>
let box = document.getElementById('myBox');
let position = 0;

function moveBox() {
position += 50;
box.style.transform = `translateX(${position}px)`;

if (position < 200) {
requestAnimationFrame(moveBox);
}
}

box.addEventListener('click', function() {
position = 0;
requestAnimationFrame(moveBox);
});
</script>

Dalam contoh ini:

1. Kita mendefinisikan kelas CSS dengan properti transisi.
2. Fungsi JavaScript kita mengubah properti transform instead of left.
3. Kita gunakan requestAnimationFrame() untuk menciptakan animasi halus.
4. Animasi dimulai saat kotak diklik.

Metode ini seringkali menciptakan animasi yang lebih halus karena browser dapat optimalkan transisi CSS.

Berikut adalah tabel yang menggabungkan metode yang kita diskusikan:

Metode	Keuntungan	Kerugian
setInterval()	Mudah dipahami dan diimplementasikan	Bisa kurang efisien, bisa menyebabkan jank
requestAnimationFrame()	Lebih efisien, sinkron dengan refresh rate browser	Sedikit lebih kompleks untuk diimplementasikan
Transisi CSS	Sangat halus, bisa dipercepat oleh perangkat keras	Kontrol terbatas atas langkah animasi

Ingat, animasi dapat meningkatkan pengalaman pengguna, tetapi itu sebaiknya digunakan dengan bijak. Terlalu banyak animasi bisa membingungkan atau bahkan menyebabkan sakit kepala bagi beberapa pengguna.

Itu saja untuk perjalanan kita ke animasi DOM JavaScript! Saya harap Anda menikmati pelajaran ini sebanyak saya menikmati mengajarnya. Terus latih, terus animasikan, dan terutama, terus bersenang-senang dengan kode!

Credits: Image by storyset