Latihan 1: requestAnimationFrame — Web Animation

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

Lengkapi dua function. Ini matematika yang sama dengan total harga yang menghitung naik di kartu Bu Sri, tanpa browser.

createAnimation(from, to, duration) mengembalikan object dengan method getValueAt(elapsedMs). Method itu menghitung progress t = elapsedMs / duration, menahannya di antara 0 dan 1, lalu mengembalikan from + (to - from) * t (linear, tanpa easing). Jadi waktu <= 0 mengembalikan from, dan waktu >= duration mengembalikan to.
easeOutQuad(t) menerima progress 0 sampai 1 dan mengembalikan t * (2 - t).

Tujuh console.log di kode awal biarkan saja. Yang dinilai, baris console-nya harus persis:

0
150
300
300
0
0.75
1

Nilai kembaliannya juga dinilai langsung: createAnimation(100, 200, 400).getValueAt(100) harus 125, createAnimation(10, 20, 100).getValueAt(-50) harus 10, dan easeOutQuad(0.25) harus 0.4375.

Hint

Ubah waktu yang lewat jadi progress dari 0 sampai 1 dengan membaginya dengan durasi. Nilainya lalu diambil di antara from dan to sesuai progress itu.
Di dalam getValueAt: hitung t dari elapsedMs dibagi duration, tahan dengan Math.max ke 0 dan Math.min ke 1, lalu kembalikan from ditambah (to - from) dikali t. easeOutQuad cukup satu baris return.
const t = Math.min(Math.max(elapsedMs / duration, 0), 1); return from + (to - from) * t; dan untuk easing: return t * (2 - t);

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: requestAnimationFrame — Web Animation

Hint

Memperbarui Aplikasi