Latihan 1: SVG Animation — Creative Web

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

Raka mau menyiapkan angka untuk animasi garis logonya. Kode awal sudah punya dua function kosong dan enam baris console.log; biarkan keenam baris itu, dan isi kedua function-nya.

  1. generateDrawAnimation(pathLength) mengembalikan string dengan format persis dasharray:PANJANG;from:PANJANG;to:0, dengan PANJANG diganti nilai pathLength. Contoh: generateDrawAnimation(300) mengembalikan dasharray:300;from:300;to:0.
  2. calculateProgress(pathLength, percentage) mengembalikan stroke-dashoffset (number) di persentase itu: pathLength * (1 - percentage / 100). Di 0% hasilnya pathLength (garis tersembunyi), di 100% hasilnya 0 (garis utuh).

Output-nya harus persis enam baris ini, berurutan:

  1. dasharray:300;from:300;to:0
  2. dasharray:500;from:500;to:0
  3. 300
  4. 150
  5. 0
  6. 50

Yang juga dinilai: calculateProgress(400, 25) mengembalikan 300, dan generateDrawAnimation(123.5) mengembalikan "dasharray:123.5;from:123.5;to:0" (panjangnya diambil dari argumen, termasuk yang pecahan).

Hint