Membuat Animasi Lingkaran bergeser pakai EaselJS

Share:

Hello World's! Agak gak penting sih sebenarnya. Tapi saya share aja lah barangkali ada yang pengen nyoba.

EaselJS, baru denger kemarin. Pas saya nongkrong di grup DevC Facebook, ada seorang bapak-bapak ngepos sesuatu di grup, pak Bambang namanya. Di pos-nya bapak itu bilang EaselJS ini library javascript yang keren buat menangani urusan animasi. Dan ternyata....

Biasa aja sih. Memang sih animasi-nya itu bagus-bagus. Tapi codingannya cukup ribet. Mungkin keribetan itu karena kedetailannya. Mulai dari warna, kecepatan, gaya, semuanya bisa kita atur sendiri value-nya. Kalau menurut saya, hal ini bakalan meribetkan pemula yang baru belajar kayak saya.

Kamu pemula kan? Pengen belajar kan? Yuk kita belajar bareng-bareng bikin animasi website dengan javascript library EaselJS ini. Gausah yang ribet-ribet dulu. Untuk step awal kita bikin lingkaran yang animasinya bergerak geser ke kanan. Yuk mulai belajar....

Bikin File HTML sederhana dulu

Seperti biasanya, kita buat sebuah file HTML sederhana dulu yang isinya ada DTD, head, beberapa meta tag, title, sama body. Kalau udah, kita lanjut ke bagian instalasi.

Instalasi EaselJS

Gak seperti modul-modul Javascript kompleks, instalasi easel ini gak perlu pakai prompt kayak nodeJs, ReactJS... Instalasi kita lakukan semudah ngelink script Javascript biasa. Yaitu dengan memakai tag <script> kayak gini

<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>

Sisipkan script diatas di bagian head buat manggil library-nya. Lanjut. Kita tulis script buat view-nya.

<body onload="init();">

<select onchange="createjs.Ticker.setFPS(Number(this.value));">
     <option value="10">10 fps</option>
     <option value="20">20 fps</option>
     <option value="30" selected>30 fps</option>
     <option value="40">40 fps</option>
     <option value="50">50 fps</option>
     <option value="60">60 fps</option>
</select>

<canvas id="kanvas" width="550" height="250">
     alternate content
</canvas>
</body>

Saya jelasin satu-satu dulu biar ngeh. atribut onload di bagian body itu gunanya buat ngeload function bernama "init", setelah ini kita akan buat fungsi init-nya. Sedangkan function di onchange itu gunanya buat nge-set FPS / kecepatan lingkarannya bergerak. Kecepatan (value) didapat dari value-nya option.

Mantabb... Sekarang kita buat fungsi-fungsi javascript-nya. Kita letakkan fungsi-fungsi berikut ini di bagian head, atau biar gampang atasnya </head> pas.

var stage, timeCircle, tickCircle;

function init() {
     stage = new createjs.Stage("kanvas");
     timeCircle = new createjs.Shape();
     timeCircle.graphics.beginFill("#e74c3c").drawCircle(0, 0, 40);
     timeCircle.y = 50;
     stage.addChild(timeCircle);

     tickCircle = new createjs.Shape();
     tickCircle.graphics.beginFill("#3498db").drawCircle(0, 0, 40);
     tickCircle.y = 150;
     stage.addChild(tickCircle);

     createjs.Ticker.on("tick", tick);
     createjs.Ticker.setFPS(20);
}

function tick(event) {
     timeCircle.x = timeCircle.x + (event.delta)/1000*100;
     if (timeCirlce.x > stage.canvas.width) {
          timeCircle.x = 0;
     }

     tickCircle.x = tickCircle.x + 5;
     if (tickCircle.x > stage.canvas.width) {
          tickCircle.x = 0;
    }

    stage.update(event);
}

Sekarang save, terus di run. Oh iya, pas nge-run ini di browser pastikan komputer sudah terhubung dengan internet. Kan library-nya ngambil secara online. Kalau gak ada internet ya library-nya dicopy terus disimpen di lokal. Di-load secara lokal. Oke, salam koding!

1 comment: