Membuat Animasi dengan Sprite css html

Pada tutorial-tutorial sebelumnya sudah ditampilkan bagaimana animasi sprite itu bekerja ada beberapa animasi sprite css yang telah saya posting, namun pada waktu itu tidak dijelaskan bagaimana secara detail animasi sprite itu bekerja.

Tutorial-tutorial yang ada animasi spritenya adalah game sentuh coin, membuat animasi kucing berjalan, pergerakan kucing itu menggunakan metoda sprite css. apa sih sebenarnya animasi sprite? animasi sprite merupakan penggabungan beberapa gambar yang disatukan kedalam satu gambar dengan tujuan untuk mempercepat loading gambar itu sendiri.

Dengan menggunakan metoda sprite animasi css, gambar yang satu terdiri dari beberapa gambar yang berukuran sama besar namun dengan tipe gambar atau posisi gambar yang berbeda. berikut adalah contoh gambar yang digunakan untuk membuat animasi sprite css.

gambar di atas memilik ukuran yang sama atau jarak yang sama antar gambar coin yang satu dan yang lainnya. dengan metoda animasi sprite css ini gambar yang satu akan bertukar dengan gambar yang lainnya.

Untuk menggerakan atau memutar coin tersebut dengan menggunakan javascript. berikut adalah script untuk animasi sprite.

(function() {
    // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
    // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
    // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
    // MIT license

    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 coin,
        coinImage,
        canvas;                   

    function gameLoop () {
   
      window.requestAnimationFrame(gameLoop);

      coin.update();
      coin.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("coinAnimation");
    canvas.width = 100;
    canvas.height = 100;
   
    // Create sprite sheet
    coinImage = new Image();   
   
    // Create sprite
    coin = sprite({
        context: canvas.getContext("2d"),
        width: 1000,
        height: 100,
        image: coinImage,
        numberOfFrames: 10,
        ticksPerFrame: 4
    });
   
    // Load sprite sheet
    coinImage.addEventListener("load", gameLoop);
    coinImage.src = "images/coin-sprite-animation.png";

} ());

simpat file di atas dengan nama sprite.js

untuk langkah selanjutnya membuat file html untuk menjalankan coin tersebut dengan menggunkan html 5 yang menyediakan tag canvas. berikut adalah kode html untuk animasi sprite.

<html>
    <head>
        <title>Sprite Animation Demo</title>
    </head>
    <body>
        <canvas id="coinAnimation"></canvas>
        <script src="sprite.js"></script>
    </body>
</html>

Simpan file di atas dengan nama index.html. kemudian jalankan file tersbut. dan demo dari animasi coin dengan menggunakan metoda sprite akan di tampilkan di bawah ini.

• Tweet
• Share
• Share
• Share
• Share