Latihan 1: Stagger & Complex Sequences — Web Animation

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

Lengkapi createStagger(items, options), yang menghitung delay tiap item untuk stagger. Kode awal sudah berisi function kosongnya dan empat baris console.log-nya; isi function-nya dan biarkan baris console.log seperti adanya.

options berisi { delay, staggerAmount, from }: delay awal (ms), jeda antar item (ms), dan titik mulainya ("start", "end", atau "center").

  1. Kembalikan array dengan urutan item yang sama, tiap elemennya object { item, delay } (tulis item lebih dulu, lalu delay, karena hasilnya dibandingkan sebagai JSON). Item dipakai apa adanya.
  2. delay = delay awal + jarak × staggerAmount.
  3. Jaraknya: untuk "start" indeksnya i; untuk "end" (jumlah - 1) - i; untuk "center" Math.abs(i - (jumlah - 1) / 2).

Yang dinilai, empat baris console harus persis, berurutan:

  1. [{"item":"a","delay":0},{"item":"b","delay":100},{"item":"c","delay":200},{"item":"d","delay":300}]
  2. [{"item":"a","delay":300},{"item":"b","delay":200},{"item":"c","delay":100},{"item":"d","delay":0}]
  3. [{"item":"x","delay":300},{"item":"y","delay":250},{"item":"z","delay":200},{"item":"w","delay":250},{"item":"v","delay":300}]
  4. [{"item":"p","delay":100},{"item":"q","delay":180},{"item":"r","delay":260}]

Hasil JSON.stringify(createStagger(["m", "n", "o"], { delay: 10, staggerAmount: 5, from: "center" })) juga dinilai: harus [{"item":"m","delay":15},{"item":"n","delay":10},{"item":"o","delay":15}].

Hint