Latihan 1: requestAnimationFrame — Performance

Latihan 1 dari materi requestAnimationFrame di Performance — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Lengkapi function calculateAnimationProgress(startTime, currentTime, duration) yang menghitung progress animasi. Ketiga argumennya dalam milidetik.

elapsedMs: currentTime - startTime, biarkan apa adanya (jangan ditahan).
progress: elapsedMs / duration, tapi gak boleh lebih dari 1. Pakai Math.min(..., 1).
isComplete: true kalau progress >= 1, selain itu false.
Return satu object dengan key persis ini, dengan urutan ini: progress, isComplete, elapsedMs.

Yang dinilai nilai kembaliannya:

calculateAnimationProgress(0, 500, 1000) harus { progress: 0.5, isComplete: false, elapsedMs: 500 }
calculateAnimationProgress(0, 1500, 1000) harus { progress: 1, isComplete: true, elapsedMs: 1500 }
ada juga dua cek tersembunyi: calculateAnimationProgress(100, 100, 1000) harus { progress: 0, isComplete: false, elapsedMs: 0 }, dan calculateAnimationProgress(0, 1000, 1000) harus { progress: 1, isComplete: true, elapsedMs: 1000 }

Dua baris console.log di kode awal biarkan saja.

Hint

Hitung dulu berapa milidetik yang sudah lewat sejak animasi mulai. Dari situ, progress adalah bagian dari durasi yang sudah dijalani, dari 0 sampai 1.
const elapsedMs = currentTime - startTime; lalu const progress = Math.min(elapsedMs / duration, 1); isComplete cukup progress >= 1.
return { progress, isComplete: progress >= 1, elapsedMs };

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: requestAnimationFrame — Performance

Hint

Memperbarui Aplikasi