JavaScript - Animasi DOM

Halo, para pengembang web masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia animasi DOM JavaScript. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk mengantar Anda melalui topik yang menarik ini. Percayalah, pada akhir pelajaran ini, Anda akan bisa membuat halaman web hidup dengan gerakan!

Menyusun Element DOM dengan JavaScript

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

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

Mari kita mulai dengan contoh sederhana:

<div id="myBox" style="width: 100px; height: 100px; background-color: merah; 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 memindahkan kotak merah melintasi layar. Mari kitauraikan:

1. Kita membuat elemen <div> dengan beberapa 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.

Menganimasikan Elemen DOM menggunakan metode setInterval()

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

<div id="bouncer" style="width: 50px; height: 50px; background-color: biru; 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 mengatur posisi awal (x, y) dan kecepatan (dx, dy).
2. Dalam fungsi animate(), kita memperbarui posisi berdasarkan kecepatan.
3. Kita memeriksa jika bola mencapai tepi jendela dan membalik arah jika ia melakukan itu.
4. Kita memperbarui posisi bola di layar.
5. setInterval() memanggil animate() setiap 10ms, menciptakan gerakan halus.

Menganimasikan Elemen DOM menggunakan metode requestAnimationFrame()

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

Mari kita tulis ulang bola melompat menggunakan requestAnimationFrame():

<div id="bouncer" style="width: 50px; height: 50px; background-color: hijau; 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.

Menganimasikan 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 bisa memicu animasi CSS menggunakan JavaScript:

<style>
.box {
width: 100px;
height: 100px;
background-color: ungu;
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 menghasilkan 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, dapat menyebabkan jank
requestAnimationFrame()	Lebih efisien, sinkron dengan refresh rate browser	Sedikit lebih sulit untuk diimplementasikan
Transisi CSS	Sangat halus, bisa dipercepat oleh perangkat keras	Kontrol terbatas atas langkah animasi

Ingat, animasi dapat meningkatkan pengalaman pengguna, tetapi harus 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 sama seperti saya menikmati mengajarinya. Terus latih, terus animasikan, dan yang paling penting, terus bersenang-senang dengan kode!

Credits: Image by storyset