Latihan 1: Web Animations API (WAAPI) — Web Animation

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

Lengkapi dua function yang menyusun argumen element.animate(keyframes, options) tanpa menjalankan animasi apa pun.

  1. buildWaapiCall(keyframes, options) mengembalikan object { keyframes, options } berisi kedua argumen apa adanya, dengan urutan kunci keyframes lalu options.
  2. buildFadeIn(durationMs) mengembalikan object untuk fade-in: keyframes berisi [{ opacity: 0 }, { opacity: 1 }], dan options berisi { duration: durationMs, easing: "ease-out", fill: "forwards" } dengan urutan kunci persis begitu.

Empat console.log di kode awal biarkan saja; hasilnya dibandingkan sebagai JSON utuh. Yang dinilai, baris console-nya harus persis:

  1. [{"transform":"translateX(0px)"},{"transform":"translateX(100px)"}]
  2. {"duration":300,"easing":"linear"}
  3. [{"opacity":0},{"opacity":1}]
  4. {"duration":500,"easing":"ease-out","fill":"forwards"}

Nilai kembaliannya juga dinilai langsung: JSON.stringify(buildWaapiCall([{ scale: 1 }], { duration: 42 })) + "|" + JSON.stringify(buildFadeIn(120).options) harus {"keyframes":[{"scale":1}],"options":{"duration":42}}|{"duration":120,"easing":"ease-out","fill":"forwards"}.

Hint