Memberi Animasi Sederhana pada Objek dengan KineticJS

Memberi Animasi Sederhana pada Objek dengan KineticJS

Pada tutorial sebelumnya, penulis telah menjelaskan bagaimana cara membuat objek-objek sederhana dengan KineticJS. Objek-objek tersebut masih bersifat statis karena belum diberikan atribut dan parameter…

Pada tutorial sebelumnya, penulis telah menjelaskan bagaimana cara membuat objek-objek sederhana dengan KineticJS. Objek-objek tersebut masih bersifat statis karena belum diberikan atribut dan parameter untuk melakukan animasi. KineticJS mendukung beberapa bentuk animasi sederhana, diantaranya seperti gerak linear (move), gerak rotasi (rotate), juga gerak skala (zoom).

Untuk melakukan animasi denganKineticJS, fungsi animasi Kinetic Animationharus dideklarasikan terlebih dahulu, misalnya dengan kode berikut:

var anim = new Kinetic.Animation(function(frame)

Untuk melakukan animasi dasar pada KineticJS, seperti Move, Rotate, dan Zoom, secara umum kita dapat menggunakan rumus matematis yang akan dijelaskan sebagai berikut. Sebagai latihan mandiri, kita dapat mencoba-coba sendiri kode berikut dengan mengubah dan memodifikasi nilai parameternya sesuai kebutuhan.

Move

 

move

Misalkan kita ingin menggerakkan sebuah objek bernama “kotak” ke kanan kiri searah sumbu X, dengan amplitudo = 150 dan periode = 1500, maka kode yang diperlukan yaitu:

var amplitude = 150;
var period = 1500;
var centerX = stage.getWidth() / 4;

var anim = new Kinetic.Animation(function(frame)
          {
               // Animasi Kotak (Moving Kanan-Kiri)
               kotak.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
	}

Variabel centerX merupakan variabel yang digunakan untuk menentukan batas-batas stage ketika objek digerakkan. Apabila kita ingin objek tersebut bergerak searah sumbu Y, maka parameter setX cukup diganti dengan setY.

Rotate

rotate

Untuk melakukan rotasi, sebuah objek membutuhkan kecepatan anguler. Misalkan kita mempunyai sebuah objek bernama “bintang”, kode untuk melakukan animasi gerak rotasi objek tersebut yaitu

var angularSpeed = Math.PI / 2;

var anim = new Kinetic.Animation(function(frame) 
          {

              // Animasi Bintang (Rotasi)
          var angleDiff = frame.timeDiff * angularSpeed / 500;
               bintang.rotate(angleDiff);
}

Secara default, arah gerakan rotasi akansearah jarum jam. Jika kita ingin membalikkan gerakan rotasi tersebut menjadi berlawanan arah jarum jam, maka kita cukup menambahkan nilai negatif (-) pada bagian berikut, sehingga:

var angleDiff = - (frame.timeDiff * angularSpeed / 500);

Zoom

zoom

Untuk melakukan zooming objek, parameter yang dibutuhkan adalah periode dan besarnya skala zooming. Pada contoh berikut, besar skala zooming adalah 0.001, yang berarti objek bernama “bintang1” akan diperkecil hingga 1/1000. Jika menginginkan perbesaran objek, maka nilai skala zoomingtentu saja harus lebih dari 1.

var period1 = 2000;
var anim = new Kinetic.Animation(function(frame) 
          {

            // Animasi Bintang (Zooming)
               var scale = Math.sin(frame.time * 2 * Math.PI / period1) + 0.001;
               bintang1.setScale(scale);
}

Untuk menjalankan animasi objek, kita dapat menggunakan perintah anim.start();.

Contoh kode animasi KineticJS secara lengkap dapat digabungkan menjadi file index.html sebagai berikut. Anda juga dapat melihat hasil simulasi kode berikut pada alamat http://jsfiddle.net/buluhijau/DUNmX/.

<!DOCTYPE HTML>
<html>
<head>
	<title>Animasi Sederhana</title>
<style>
      body {
        margin: 0px;
        padding: 0px;
      }

	  #container
	  {
		border:1;

	  }
</style>
</head>
<body>

<div id="container"><center><h3>Membuat Animasi Sederhana dengan KineticJS</h3></center></div>
<script src="kinetic-v4.3.1.min.js"></script>
<script>
		//Membuat Bidang Canvas (Stage)
		var stage = new Kinetic.Stage({
			container: 'container',
			width: 1000,
			height: 550
		});

		//Membuat Layer
		var layer = new Kinetic.Layer();

		//Membuat Objek 
		var lingkaran = new Kinetic.Circle({
			x: 150,
			y: 150,
			radius:30,
			fill: 'red',
			stroke: 'black',
			strokeWidth: 2,
			opacity:0.70
		});

		var kotak = new Kinetic.Rect({
			x: 150,
			y: 350,
			width:200,
			height:50,
			fill: 'blue',
			shadowBlur:10,
			shadowColor: 'green',

		});

		var garis = new Kinetic.Line({
			x: 150,
			y: 150,
			points: [{x:0,y:1},{x:40,y:100}] ,
			fill: '#00D2FF',
			stroke: 'black',
			strokeWidth: 4
        });

		var garis1 = new Kinetic.Line({
			x: 650,
			y: 150,
			points: [{x:0,y:1},{x:100,y:100}] ,
			fill: '#00D2FF',
			stroke: 'black',
			offset: {
              x: 50,
              y: 50
            },
			strokeWidth: 4
        });

		var garis2 = new Kinetic.Line({
			x: 650,
			y: 150,
			points: [{x:0,y:100},{x:100,y:1}] ,
			fill: '#00D2FF',
			stroke: 'black',
			offset: {
              x: 50,
              y: 50
            },
			strokeWidth: 4
        });

		//Membuat Objek Bintang
		var bintang = new Kinetic.Star({
			x: 330,
			y: 150,
			numPoints: 5,
			innerRadius:30,
			outerRadius:80,
			fill: 'red',
			shadowBlur:10,
			shadowColor: 'red'
		});

		//Membuat Objek Bintang
		var bintang1 = new Kinetic.Star({
			x: 500,
			y: 150,
			numPoints: 10,
			innerRadius:30,
			outerRadius:80,
			fill: 'orange',
			shadowBlur:10,
			shadowColor: 'red'
		});

		//Membuat Objek Paruh Lingkaran (Wedge)
		var paruhlingkaran = new Kinetic.Wedge({
			x: 850,
			y: 150,
			radius: 100,
			angleDeg: 80,
			fill: 'magenta',
			stroke: 'black',
			strokeWidth: 4,
			rotationDeg: -150
        });

		// add the shape to the layer
		layer.add(lingkaran);
		layer.add(kotak);
		layer.add(garis);
		layer.add(garis1);
		layer.add(garis2);
		layer.add(bintang);
		layer.add(bintang1);
		layer.add(paruhlingkaran);

		// add the layer to the stage
		stage.add(layer);

		// VARIABEL-VARIABEL ANIMASI
		var amplitude = 150;
		var period = 1500;

		var centerX = stage.getWidth() / 4;

        var angularSpeed = Math.PI / 2;

		var period1 = 2000;

		var anim = new Kinetic.Animation(function(frame) 
		{
			// Animasi Kotak (Moving Kanan-Kiri)
			kotak.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);

			// Animasi Paruh Lingkaran (Moving Atas Bawah)
			paruhlingkaran.setY(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);

			// Animasi Garis (Rotasi)
			var angleDiff = frame.timeDiff * angularSpeed / 500;
			garis.rotate(angleDiff);

			// Animasi Bintang (Zooming)
			var scale = Math.sin(frame.time * 2 * Math.PI / period1) + 0.001;
			bintang1.setScale(scale);

			// Animasi Bintang (Rotasi)
			bintang.rotate(angleDiff);

			// Animasi 2 Garis dengan Offset (Rotasi)
			var angleDiff1 = -(frame.timeDiff * angularSpeed / 200);
			garis1.rotate(angleDiff1);
			garis2.rotate(angleDiff1);

		}, layer);

		anim.start();

</script>
</body>
</html>

Hasil tampilan kode di atas pada browser:

tampilan

Penutup

Dari beberapa bentuk animasi sederhana yang ditawarkan KineticJS di atas, semoga pembaca sekalianbisa memunculkan ide kreatif untuk membuat animasi yang lebih kompleks. Fungsi animasi pada KineticJS dapat digunakan dalam pengembangan animasi untuk simulasi atau pemodelan interaktif, iklan interaktif, hingga game berbasis web.

Tag: , , , , ,

Write Comment

Your email will not be published. The marked label is required.