Uncategories Membuat animasi Shiva dengan html

Jumat, 28 April 2017

Membuat animasi Shiva dengan html

April 28, 2017 Leave a Reply

Animasi Shiva

Film shiva merupakan salah satu film yang disukai oleh anak saya, film shiva tayang setiap hari di antv. pada saat film ini tidak tayang anak saya sering meminta untuk menontonnya lewat internet, namun saya berpikir bagaimana membuat animasi shiva yang bisa ditonton secara offline agar tidak memakan quota.

Saya punya ide untuk membuat animasi shiva, mungkin ide ini sederhana, namun untuk mengembangankan kreatifitasnya bisa dibuat dengan gambar-gambar yang lebih menarik.Ada beberapa persiapan yang harus dibuat untuk membuat animasi html shiva, yang utama adalah gambar shiva,gambar shivanya seperti di bawah ini untuk memperhalus gerakannnya bisa diubah sendiri.

Kumpulan gambar shiva di atas harus mempuanyai bentuk yang berbeda agar gambarnya kelihatan bergerak. Setelah membuat gambar seperti di atas selanjutnya kita membuat script html.berikut :

<html>
    <head>
        <title>Shiva Animation Demo</title>
    </head>
    <body>
        <canvas id="ShivaAnimation"></canvas>
        <script src="shiva.js"></script>
    </body>
</html>

Simpan script di atas dengan nama Shiva.html. untuk langkah selanjutnya kita membuat file javascriptnya copykan saja script berikut :

(function() {

    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

(function () {

   var shiva,
       shivaImage,
       canvas;

   function gameLoop () {

      window.requestAnimationFrame(gameLoop);

      shiva.update();
      shiva.render();
   }

   function sprite (options) {

       var that = {},
           frameIndex = 0,
           tickCount = 0,
           ticksPerFrame = options.ticksPerFrame || 0,
           numberOfFrames = options.numberOfFrames || 1;

       that.context = options.context;
       that.width = options.width;
       that.height = options.height;
       that.image = options.image;

       that.update = function () {

            tickCount += 1;

            if (tickCount > ticksPerFrame) {

               tickCount = 0;

                // If the current frame index is in range
                if (frameIndex < numberOfFrames - 1) {
                    // Go to the next frame
                    frameIndex += 1;
                } else {
                    frameIndex = 0;
                }
            }
        };

       that.render = function () {

          // Clear the canvas
          that.context.clearRect(0, 0, that.width, that.height);

          // Draw the animation
          that.context.drawImage(
            that.image,
            frameIndex * that.width / numberOfFrames,
            0,
            that.width / numberOfFrames,
            that.height,
            0,
            0,
            that.width / numberOfFrames,
            that.height);
       };

       return that;
   }

   // Get canvas
   canvas = document.getElementById("ShivaAnimation");
   canvas.width = 100;
   canvas.height = 100;

   // Create sprite sheet
   shivaImage = new Image();

   // Create sprite
   shiva = sprite({
       context: canvas.getContext("2d"),
       width: 1000,
       height: 100,
       image: shivaImage,
       numberOfFrames: 10,
       ticksPerFrame: 4
   });

   // Load sprite sheet
   shivaImage.addEventListener("load", gameLoop);
   shivaImage.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqFXJRlcf4Uk_Ljuw7pQpDgUCm91cXid8QqRn1em1zt-ds6lBg4O0ayVOtFG1tP7bV-yNcfUMHVniSEYcgsAxG1ulNzpOy9h3Mo8Cj6pdJ5MjtbbON0u_19gtRRz6bqgXRZK5kL4NqLTMB/h36/shiva.png";

} ());

Nah itulah kode html untuk membuat animasi shiva untuk melihat hasil dari script di atas adalah seperti demo di bawah ini

0 komentar: