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

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

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

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

实现的源码如下：

 

var app = new PIXI.Application(800, 600, {
    backgroundColor: 0x1099bb
});
document.body.appendChild(app.view);

var movieClip = null;
// 加载图片
var loader = new PIXI.loaders.Loader();
loader.add('../img/walk.png', "../img/walk.png");
loader.on("progress", function(target, resource) {
    console.log("progress:", target.progress); //加载进度
});
loader.once('complete', function(target, resource) {
    onComplete();
});
loader.load();

//加载完成
function onComplete() {
    var texture = PIXI.Texture.fromImage("../img/walk.png");
    var cutnum = 8;
    //将图片拆分为8帧
    var width = parseInt(texture.width / cutnum);
    var height = parseInt(texture.height);
    var frameArray = [];
    for(var i = 0; i < cutnum; i++) {
        var rectangle = new PIXI.Rectangle(i * width, 0, width, height);
        var frame = new PIXI.Texture(texture, rectangle);
        frameArray.push(frame);
    }
    //播放动画
    movieClip = new PIXI.extras.AnimatedSprite(frameArray);
    movieClip.position.x = 100;
    movieClip.position.y = 100;
    movieClip.animationSpeed = parseFloat((20 / 120).toFixed(2));
    movieClip.play();
    app.stage.addChild(movieClip);
}

显示效果：