利用pixi.js制作精靈動畫

CSS Sprites 技術對於廣大的前端工程師來說應該是一點也不陌生。國內開發者昵稱為CSS精靈，通過一定的技術手段，讓精靈動起來，我稱其為精靈動畫，那么目前有哪些實現方式 呢？下面讓我們詳細的聊聊。

  關於實現精靈動畫的方式有很多種，我自己實踐過的主要有三種：

    1： 把動作分解成一系列連續的編號的圖片，如img0.jpg,img1.jpg,img2.jpg...,然后利用setIntval等定時器不斷的去更換圖片地址。

    2： 把動作按照一定的間距排列在一張圖片上，利用css3的動畫幀，做出動畫效果。

    3： 利用pixi.js 精靈庫來實現該效果

 我們先分析一下上面三種實現方式的優缺點：

    第一種，優點是簡單粗暴，兼容性好，學習成本低。缺點是要加載的圖片多，效率低，定時器本身也有不少問題。

    第二種，優點是實現方便，充份利用了css3的動畫特性，避免了使用定時器的各種原始問題。缺點是需要優賴css3，兼容性差，如果是動態生成的樣式，同樣有效率問題。

    第三種，優點是充份利了cavas/webgl來實現，可以利用硬件加速，功能強大。缺點是學習成本高，同樣有兼容性問題。

前面兩種，我在項目中都有運應用，今天我要重點討論的是第三種方案。在前面我介紹過pixi.js的簡單用法，當時只說明了一些基本概念和靜態圖片的用法，沒有講到用它做動畫。

官網有一個精靈動畫的例子，但是用的是josn格式的配置，看的是一頭霧水，顯然對於一個簡單的精靈動畫，顯得太過復雜了。我下面的例子是要實現一個類似小鳥飛舞翅膀或人跑步的動畫，我們一起來看看利用pixi.js該怎么做。

            var i=0;
            var x = 0;
            var data = [];
            var width = 300;
            var width = 300;
            var stage = new PIXI.Stage(0xFFFFFF);
            var renderer = PIXI.autoDetectRenderer(width, height);
            document.body.appendChild(renderer.view);
            var sprite = new PIXI.Sprite.fromImage('bird.png');
            //對圖片進行縮放
            //sprite.scale.x = .5;
           // sprite.scale.y = .5;

            for(var i = 0; i < count; i++){
                  data.push(i*width);
            }

            stage.addChild(sprite);

            requestAnimFrame(animate);

            function animate(){
               //控制刷新頻率
               if( i % 15 == 0){
                  sprite.position.x = -data[x];
                  renderer.render(stage);
                  x++;
                  if(x > data.length -1){
                        x = 0;
                        i = 0;
                  }
               }
               i++;
               requestAnimFrame(animate);
            }

                參數使用前： 

通過上面的代碼，可以看到小龍已經在歡快的舞動它的翅膀了。一切看起來很美好，當我把它移到我的項目中的時候，發現小龍有一個白色背景。這個確實很可惡，翻遍了官方提供的api,沒有找到可以控制舞台透明的參數。 於是我不得不去翻看pixi的源碼了，好在終於被我找到了:

/**
 * @author Mat Groves http://matgroves.com/ @Doormat23
 */
 
/**
 * This helper function will automatically detect which renderer you should be using.
 * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by
 * the browser then this function will return a canvas renderer
 * @class autoDetectRenderer
 * @static
 * @param width=800 {Number} the width of the renderers view
 * @param height=600 {Number} the height of the renderers view
 * @param [view] {Canvas} the canvas to use as a view, optional 
 * @param [transparent=false] {Boolean} the transparency of the render view, default false
 * @param [antialias=false] {Boolean} sets antialias (only applicable in webGL chrome at the moment)
 *
 */
PIXI.autoDetectRenderer = function(width, height, view, transparent, antialias)
{

第四個參數就是控制透明的，於是趕緊用上。

參數使用后：