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

逐帧动画是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样，不但给制作增加了负担而且最终输出的文件量也很大，但它的优势也很明显：逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。例如：人物或动物急剧转身、 头发及衣服的飘动、走路、说话以及精致的3D效果等等。

现在很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. }  

显示效果：

转载于:https://www.cnblogs.com/chenzhiling/p/8580955.html