Latihan 1: Motion Design Principles — Web Animation

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

Lengkapi evaluateAnimation(props), yang menilai sebuah animasi. Kode awal sudah berisi function kosongnya dan empat baris console.log-nya; isi function-nya dan biarkan baris console.log seperti adanya.

props berisi { duration, easing, distance, hasDelay }: durasi dalam ms, nama easing, jarak gerak dalam px, dan ada delay atau gak.

  1. Mulai dengan array issues kosong.
  2. Kalau duration > 500, tambahkan "too slow".
  3. Kalau easing === "linear", tambahkan "use easing curve".
  4. Kalau distance > 200, tambahkan "too much movement".
  5. Kembalikan { score, issues } dengan score = 100 - 20 × jumlah issue. Tulis score lebih dulu, lalu issues, karena hasilnya dibandingkan sebagai JSON.

Urutan pemeriksaannya harus seperti di atas. hasDelay gak dinilai: abaikan saja. Batasnya memakai "lebih dari": 500 ms dan 200 px masih lolos.

Yang dinilai, empat baris console harus persis, berurutan:

  1. {"score":100,"issues":[]}
  2. {"score":40,"issues":["too slow","use easing curve","too much movement"]}
  3. {"score":80,"issues":["use easing curve"]}
  4. {"score":100,"issues":[]}

Hasil JSON.stringify(evaluateAnimation({ duration: 501, easing: "ease-out", distance: 201, hasDelay: false })) juga dinilai: harus {"score":60,"issues":["too slow","too much movement"]}.

Hint