JavaScript Academy · Pelajaran

Animasi dengan requestAnimationFrame

Buat animasi canvas yang halus.

Animasi dengan requestAnimationFrame adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Mengapa requestAnimationFrame

requestAnimationFrame(callback) menjadwalkan fungsi gambar Anda untuk berjalan sebelum layar digambar ulang—biasanya 60 kali per detik. Fungsi ini berhenti sementara di tab latar belakang sehingga menghemat CPU dan baterai, tidak seperti setInterval.

function frame() {
  // draw one frame
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

Perulangan Dasar

Perulangan animasi menghapus canvas, memperbarui keadaan, menggambar, lalu menjadwalkan dirinya kembali.

let x = 0;
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 50, 30, 30);
  x += 2;
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Menghapus pada Setiap Bingkai

Tanpa clearRect, bingkai sebelumnya tetap tergambar dan menghasilkan jejak. Hapus seluruh buffer di awal setiap bingkai agar gambar dapat dibuat ulang dengan bersih.

ctx.clearRect(0, 0, canvas.width, canvas.height);

Argumen Stempel Waktu

Callback menerima stempel waktu beresolusi tinggi (milidetik). Gunakan stempel waktu ini untuk menghitung waktu yang berlalu di antara bingkai.

let last = 0;
function loop(now) {
  const dt = now - last;
  last = now;
  // dt = ms since previous frame
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Gerakan yang Tidak Bergantung pada Laju Bingkai

Kalikan kecepatan dengan waktu delta agar kecepatan gerakan tetap konsisten, terlepas dari laju bingkai.

let x = 0;
const speed = 0.1; // px per ms
function loop(now) {
  const dt = now - (loop.last || now);
  loop.last = now;
  x += speed * dt;
  requestAnimationFrame(loop);
}

Membuat Bola Memantul

Balikkan kecepatan saat objek menyentuh tepi agar objek memantul.

let x = 50, vx = 3;
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  x += vx;
  if (x < 0 || x > canvas.width) vx = -vx;
  ctx.beginPath();
  ctx.arc(x, 75, 15, 0, Math.PI * 2);
  ctx.fill();
  requestAnimationFrame(loop);
}
loop();

Menghentikan Perulangan

requestAnimationFrame mengembalikan sebuah id. Berikan id tersebut kepada cancelAnimationFrame untuk menghentikan animasi.

let id;
function loop() {
  id = requestAnimationFrame(loop);
}
id = requestAnimationFrame(loop);
// later:
cancelAnimationFrame(id);

Menjeda dan Melanjutkan

Lacak tanda running. Untuk melanjutkan, minta bingkai baru; untuk menjeda, cukup berhenti meminta bingkai (atau batalkan bingkai yang masih menunggu).

let running = true;
function loop() {
  if (!running) return;
  // draw...
  requestAnimationFrame(loop);
}
function pause() { running = false; }
function resume() { running = true; requestAnimationFrame(loop); }

Menganimasikan Beberapa Objek

Simpan objek dalam sebuah larik dan perbarui setiap objek di dalam perulangan.

const balls = [{ x: 10, vx: 2 }, { x: 80, vx: -3 }];
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (const b of balls) {
    b.x += b.vx;
    ctx.fillRect(b.x, 60, 20, 20);
  }
  requestAnimationFrame(loop);
}
loop();

Easing untuk Gerakan Halus

Lakukan interpolasi menuju target dengan easing agar perlambatan berlangsung secara alami.

let x = 0;
const target = 200;
function loop() {
  x += (target - x) * 0.1; // ease out
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 50, 30, 30);
  if (Math.abs(target - x) > 0.5) requestAnimationFrame(loop);
}
loop();

Kiat Performa

Hindari membuat objek baru di dalam perulangan, kelompokkan pemanggilan gambar, dan gambar ulang hanya bagian yang berubah jika memungkinkan. Usahakan pekerjaan di setiap bingkai tetap ringan agar berada di bawah anggaran sekitar 16 ms untuk 60 fps.

Pemeriksaan Cepat

Uji pemahaman Anda tentang animasi.

Rangkuman: Animasi

Anda telah membuat perulangan animasi dengan requestAnimationFrame, menghapus setiap bingkai dengan clearRect, menggunakan stempel waktu agar animasi tidak bergantung pada laju bingkai, menganimasikan bola yang memantul dan beberapa objek, menerapkan easing, serta mempelajari cara menghentikan atau menjeda animasi dengan cancelAnimationFrame.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Animasi dengan requestAnimationFrame” gratis?

Ya — teks lengkap “Animasi dengan requestAnimationFrame” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Animasi dengan requestAnimationFrame”?

Buat animasi canvas yang halus. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Animasi dengan requestAnimationFrame” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy