lifelong learner — urip iku urup, currently working on accenture.

membuat animasi pada html canvas – berputar pada poros

0
Degananda.com -

Selayang pandang

Animasi adalah proses untuk menggerakan suatu object dengan pattern tertentu. Misalkan membuat object manusia berjalan. Terdapat dua approach atau cara untuk membuat animasi dengan html. Pertama adalah dengan memanfaatkan css dan sprite. Kedua adalah murni menggunakan canvas. Keduannya memiliki pendekatan yang berbeda namun dapat kita gabungkan.

Tidak hanya object yang berada di canvas yang dapat dianimasikan namun background dari canvas tersebut pun bisa. Penggunaannya misalkan untuk game balap mobil yang membutuhkan background untuk bergerak agar seolah – olah object mobil itu berjalan pada canvas. Pada ulasan ini akan membahas proses animasi menggunakan canvas. Untuk animasi dengan menggunakan css dan sprite akan dibahas pada ulasan lainnya.

What we build ?

kita akan membuat animasi menggerakan bola yang akan berputar pada porosnya. berikut ini adalah gambar dari bola yang akan dilakukan animasi.

bola diatas akan kita letakan pada canvas kemudian akan dilakukan animasi dengan menggunakan aturan-aturan tertentu dengan memanfaatkan canvas dan context pada javascript.

Prinsip umum animasi pada canvas

1. langkah pertama tentunnya adalah melakukan clear canvas pada object yang telah digambar. Pastikan untuk selalu menghapus seluruh object pada canvas(kecuali background).  Penghapusan pada object dicanvas akan menggunakan fungsi clearReact().

2. langkah kedua adalah menyimpan state dari canvas. Misalkan kita memiliki beberapa variabel yang mempengaruh object didalamnya pastikan untuk menyimpannya. Contohnya misalkan kita ingin menggerakan object A dari x,y=5,8 ke x,y=8,8 , maka state (5,0) harus kita simpan. Jika tidak disimpan bagaimana kita dapat menentukan posisi object tersebut selanjutnya?. Ibaratnya setiap pergantian frame dicanvas harus selalu kita simpan.

3. langkah ketiga adalah  menggambar canvas dengan context berdasarkan state yang telah kita simpan tersebut.

3. langkah ke empat adalah melakukan update terhadap state yang telah kita buat pada langkah yang kedua.

Mengontrol animasi

terdapat beberapa metode untuk mengontrol animasi pertama adalah dengan menggunakan fungsi javascript yang berhubungan dengan penjadwalan. Atau kedua kita juga dapat menggunakan user event input seperti mouse click atau keypress  untuk mentrigger animasi dengan bantuan event listener. Kali ini kita akan membahas mengontrol animasi menggunakan fungsi penjadwalan pada javascript. Tiga fungsi scheduling tersebut adalah

  1. setInterval(function, delay)
    javascript akan mengeksekusi fungsi yang telah kita tulis dengan interval tertentu. Misalkan delay kita isi dengan 1000 ms / 1 detik maka fungsi akan dieksekusi setiap 1 detik berjalan.
  2. setTimeout()
    akan mengeksekusi fungsi pada waktu yang telah diset. Misalkan setelah 5 detik fungsi akan dieksekusi. Tetapi tidak repeated layaknya setInterval()
  3. requestAnimationFrame()
    browser akan melakukan animasi pada frame(sesuai dengan fungsi yang kita tuliskan).

untuk lebih jelasnya kita akan melakukan beberapa contoh animasi object pada canvas.

Animasi lingkaran berputar pada porosnya

ada empat langkah yang harus dipenuhi untuk dapat membuat animasi suatu lingkaran yang berputer pada porosnya.

  • kita harus melakukan translate object lingkaran tersebut ke tengah-tengah canvas
  • putar canvas sebanyak += derajat tertentu (lebih kecil lebih baik)
  • translate object lingkaran yang telah dirotate dengan nilai negativenya
  • gambar / draw object lingkaran tersebut

dan jangan lupa mengimplementasikan save() dan restore() terhadap gambar tersebut jika tidak maka animasi akan kacau karena tidak ada state sebelum dan sesudah. Maksudnya adalah html 5 tidak bisa mengenali mana frame sebelum animasi dan sesudah animasi. Posisi frame ini sangat penting dalam animasi.

Langsung saja berikut ini adalah implemenetasi dari membuat animasi berputar pada porosnya. pertama buat canvas dan simpan nilai context pada suatu variabel

// membuat canvas
var canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
canvas.className = 'myCanvas';
document.body.appendChild(canvas);

var context = canvas.getContext("2d");

selanjutnya kita akan definisikan image dengan memanfaatkan perintah new Image() dan buat variabel sudut untuk menyimpan incremental dari sudut.

var ball = new Image();
ball.src = './ball.png';
var sudut = 0;

Sudut ini akan kita tambahkan 1 derajat setiap iterasi/interval. Ingat bahwa lingkaran akan berputar jika sudutnya ditambah. 720 derajat berarti lingkaran akan berputar sebanyak 2 kali. Jika kita tambahkan derajat ini secara terus menerus dengan nilai derajat yang sama maka lingkaran dapat berputar secara terus menerus. berikut adalah kode menggambar lingkarna tersebut dengan kaidah 4 aturan menanimasikan object pada porosnya(lihat diatas)

function drawBall(){
  context.save();
  context.clearRect(0,0, canvas.width, canvas.height);
  context.translate(50,50);
  context.rotate(Math.PI/180*(sudut+=1));
  context.translate(-50,-50);
  context.drawImage(ball, 0,0, 100, 100);
  context.restore();
}

terahir kita implementasikan fungsi diatas pada setInterval. Kita akan set setiap 5 miliseccond (terserah anda).

setInterval(function(){
  drawBall();
}, 5)

done saat ini object lingakaran / bola diatas telah berputar pada porosnya. Untuk demo secara online anda dapat mengakses pada link js fiddle dibawah ini

https://jsfiddle.net/Lby5w88v/