利用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)

{

第四个参数就是控制透明的，于是赶紧用上。

参数使用后：