前端动画渲染引擎pixi.js系列（8）动画精灵AnimatedSprite实现逐帧动画效果

现在很Flash动画，很大程度上都是逐帧动画。PIXI.extras.AnimatedSprite精灵实现逐帧动画的原理跟Flash的大致一样。现在有以下这张图片：它的分辨率是 1040 * 296 ，共有8帧，那么每帧的分辨率就是 130 * 296 。

按照逐帧动画的实现原理，我们只要把这张图片拆分成8帧后，按照一定帧频循环切换，那么就可以形成一个人物在走路的动画。

实现的源码如下：

 

[javascript] view plain copy

 

1. var app = new PIXI.Application(800, 600, {  
2.     backgroundColor: 0x1099bb  
3. });  
4. document.body.appendChild(app.view);  
5.   
6. var movieClip = null;  
7. // 加载图片  
8. var loader = new PIXI.loaders.Loader();  
9. loader.add('../img/walk.png', "../img/walk.png");  
10. loader.on("progress", function(target, resource) {  
11.     console.log("progress:", target.progress); //加载进度  
12. });  
13. loader.once('complete', function(target, resource) {  
14.     onComplete();  
15. });  
16. loader.load();  
17.   
18. //加载完成  
19. function onComplete() {  
20.     var texture = PIXI.Texture.fromImage("../img/walk.png");  
21.     var cutnum = 8;  
22.     //将图片拆分为8帧  
23.     var width = parseInt(texture.width / cutnum);  
24.     var height = parseInt(texture.height);  
25.     var frameArray = [];  
26.     for(var i = 0; i < cutnum; i++) {  
27.         var rectangle = new PIXI.Rectangle(i * width, 0, width, height);  
28.         var frame = new PIXI.Texture(texture, rectangle);  
29.         frameArray.push(frame);  
30.     }  
31.     //播放动画  
32.     movieClip = new PIXI.extras.AnimatedSprite(frameArray);  
33.     movieClip.position.x = 100;  
34.     movieClip.position.y = 100;  
35.     movieClip.animationSpeed = parseFloat((20 / 120).toFixed(2));  
36.     movieClip.play();  
37.     app.stage.addChild(movieClip);  
38. }  

显示效果：