MoreLesson 277Preview gratis
JS Animations
Lesson ini bagian dari How To · Semua level
Ringkasan
Animasi JavaScript memindahkan atau mengubah elemen sedikit demi sedikit dalam banyak frame. requestAnimationFrame meminta browser menjalankan fungsi sebelum frame berikutnya, sehingga gerakan lebih halus daripada setInterval. Untuk animasi sederhana, CSS sering lebih ringan, tetapi JavaScript berguna saat gerakan perlu bereaksi terhadap data atau interaksi kompleks.
Poin kunci
- requestAnimationFrame menjalankan callback tepat sebelum browser menggambar frame.
- Timestamp dari callback dipakai menghitung progres animasi.
- cancelAnimationFrame menghentikan animasi yang masih berjalan.
- Animasikan transform dan opacity agar browser tidak sering menghitung ulang layout.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.