Making Sprite animations with Pixi.js

CSS Sprites Technology for the vast number of front-end engineers should be a little unfamiliar. Domestic developers nickname for the CSS Wizard, through a certain technical means, let the elves move up, I call it a sprite animation, then what is the current implementation of the way? Let's talk about it in detail below.

There are a number of ways to implement sprite animations, and there are three main things I've practiced myself:

1: Decomposition of the action into a series of sequential numbered pictures, such as img0.jpg,img1.jpg,img2.jpg ..., and then use the Setintval and other timers constantly to change the image address.

2: The action according to a certain distance in a picture, using CSS3 animation frame, make animation effect.

3: Use the Pixi.js Wizard Library to achieve this effect

Let's examine the pros and cons of the above three implementations:

First, the advantages are simple and rough, good compatibility, low learning costs. The disadvantage is to load more pictures, low efficiency, the timer itself has a lot of problems.

The second, the advantage is to achieve convenience, fully utilize the CSS3 animation characteristics, to avoid the use of the timer of the various original problems. Disadvantage is the need to CSS3, poor compatibility, if it is a dynamically generated style, the same efficiency problems.

The third, the advantage is to fully benefit the CAVAS/WEBGL to achieve, can take advantage of hardware acceleration, powerful features. The disadvantage is the high cost of learning, the same compatibility problem.

The first two kinds, I have the application in the project, today I will focus on the third option. I introduced the simple usage of pixi.js in the previous article, which only explained some basic concepts and the use of static pictures, not to use it for animation.

The official website has an example of a sprite animation, but with the configuration of the josn format, see confused, obviously for a simple sprite animation, it seems too complicated. My following example is to achieve a similar bird flying wings or people running animation, we look at the use of pixi.js what to do.

            varI=0; varx = 0; vardata = [];
var width = 300;
var width = 300; varstage =NewPIXI. Stage (0xFFFFFF); varRenderer =pixi.autodetectrenderer (width, height);            $element. Empty (). append (Renderer.view); varSprite =NewPIXI. Sprite.fromimage (' bird.png ');
Zooming a picture//sprite.scale.x=. 5; Sprite.scale.y=. 5;  for(vari = 0; I < count; i++) {Data.push (i*width);            } stage.addchild (Sprite);            Requestanimframe (animate); functionAnimate () {//Control Refresh Frequency               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); }

With the code above, you can see that the bird has been dancing its wings merrily. It looked nice, and when I moved it to my project, I found a white background. This is really hateful, through the official API, did not find the parameters to control the stage transparency. Tomorrow to see the source code to see if there is a solution, if there is known to the great God, please let me know.

Making Sprite animations with Pixi.js