Latihan 1: Lottie & SVG Animation — Web Animation

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

Lengkapi createLottieController(durationFrames, fps): pemutar kecil yang meniru remote lottie-web, tanpa browser. Kode awal sudah berisi function kosongnya dan baris console.log-nya; isi function-nya, dan biarkan baris console.log seperti adanya.

Function itu mengembalikan object dengan:

  1. playing, awalnya false, dan currentFrame, awalnya 0.
  2. play() membuat playing jadi true; pause() membuatnya false.
  3. stop() membuat playing jadi false dan currentFrame kembali ke 0.
  4. goToFrame(frame) memasang currentFrame ke frame, ditahan di antara 0 dan durationFrames - 1 (frame terakhir).
  5. getProgress() mengembalikan currentFrame / (durationFrames - 1), dibulatkan 2 desimal dengan Math.round(x * 100) / 100.
  6. getDurationMs() mengembalikan (durationFrames / fps) * 1000.

Yang dinilai, enam baris console harus persis, berurutan:

  1. 2000
  2. true
  3. 30
  4. 0.51
  5. 0
  6. false

Nilai kembaliannya juga dinilai langsung dengan createLottieController(11, 20): setelah goToFrame(999), currentFrame harus 10; setelah goToFrame(-5), harus 0; getProgress() lalu 0; setelah play() lalu pause(), playing harus false; dan getDurationMs() harus 550. Hasil gabungannya 10|0|0|false|550.

Hint