60 code tersebut memanggil sebuah fungsi animate. Jadi yang harus kita lakukan adalah menyediakan fungsi untuk animasi dengan cara menambahkan function animate(currentTime){..} setelah code untuk memulai animasi. Pada function animate ini kita membuat perulangan lingkaran dengan interval yang mana kita melakuka pengecekan dengan membuat if(currentTime<nextTime){ requestAnimationFrame(animate); return;} dimana jika currentTime < nextTime maka lakukan proses requestAnimationFrame(animate); dan return;. Setalah proses ini kita sediakan tag nextTime=currentTime+duration; untuk update nilai nextTime. Terakhir kita tentukan ukuran lingkaran yang akan di tampilkan dengan ctx.beginPath(); dan ctx.arc(x,50,30,0,Math.PI*2); dimana pada ctx.arc untuk x akan kita ganti setiap terjadinya looping yang merupakan bagian dari interval lingkaran. Kemudian setiap lingkaran kita akan tampilkan dengan warna random dengan cara menambahkan code ctx.fillStyle = '#' + Math.floor (Math.random() * 16777215).toString(16); dan ctx.fill();. Dipenutup tambahkan x+=60; yang berguna untuk memberikan interval antar lingkaran yang di tampilkan dan requestAnimationFrame(animate); untuk looping animasi lainnya. Berikut ini hasil dari output program yang kita bahas.
RkJQdWJsaXNoZXIy MTM3NDc5MQ==