PixiJS学习（9）动画序列帧

简介

帧动画是一种常见的动画形式，其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。

用简单的话来说，就是一直在替换图片，在人视觉的感受中好像是连续在播放，就像那种“小人书”，进行翻动的时候好像是一段连续的动画在播放。

就像下面的这个GIF图片一样，也可以做成序列帧的方式。

素材需求

序列帧图片：

一般需要实现序列帧的动画都是稍微比较复杂的动画，会有一些形变，不是简单的刚体的变化，像一个物体简单的平移旋转效果直接用CSS就可以了。因此需要设计出一些序列帧图片。

一般的序列帧图片会是PNG的透明图片。

处理图片：

在 PIXI 中使用序列帧，在序列帧图片比较多的情况下需要将图片打包成雪碧图的形式，进行处理，这样可以优化性能，节省开销。常用的打包工具是 https://www.codeandweb.com/texturepacker

如果不打包成雪碧图，一张张的图片处理也是可以的。

一张一张图片的序列帧

在 PixiJs 中使用一张张图片制作序列帧，是比较简单的。只需要加载这些图片纹理，将纹理添加到一个数组里面，再使用 AnimatedSprite 动画精灵这个类即可控制它的播放。

// 组装纹理
let array = [];
for (let i = 0; i < 62; i++) {array.push(resources[`A000${i>9?i:'0'+i}`].texture);
}// 创建一个动画序列帧
let animatedSprite = new PIXI.AnimatedSprite(array);
// 设置位置
animatedSprite.x = 0;
animatedSprite.y = 0;
animatedSprite.animationSpeed = 0.2; // 动画播放的速度，默认为1,每秒播放60张图片
animatedSprite.loop = true; // 动画是否循环
animatedSprite.onComplete = () => {console.log("播放完成");
}; // 动画完成的回调函数
animatedSprite.gotoAndPlay(0); // 从第几帧开始播放
this.frameStage.stage.addChild(animatedSprite);

雪碧图序列帧

在动画图片比较多，但是页面加载又需要兼顾性能的情况下，我们可以考虑使用雪碧图的方式，来实现素材的加载。

// 收集加载完成的图片纹理
let textures = Object.assign(resources.cat.textures);// 组装纹理
let array = [];
Object.keys(textures).sort().forEach((key) => {array.push(textures[key]);
});// 创建一个动画序列帧
let animatedSprite = new PIXI.AnimatedSprite(array);
animatedSprite.x = 0;
animatedSprite.y = 0;
animatedSprite.animationSpeed = 0.2; // 动画播放的速度，默认为1,每秒播放60张图片
animatedSprite.loop = true; // 动画是否循环
animatedSprite.onComplete = () => {console.log("播放完成");
}; // 动画完成的回调函数
animatedSprite.gotoAndPlay(0); // 从第几帧开始播放
this.frameStage.stage.addChild(animatedSprite);

其实使用雪碧图和一张张加载序列帧，从实现的角度来看：没有什么区别。但是从资源优化的角度来说：确实有很多提升。

注意事项：

序列帧的播放在实际的生产过程中，可能会有很多的问题。常见的大概有一下几个：

素材过大的问题，可以通过删帧、缩放的方式处理；
模糊的问题，需要查看图片以及 canvas 像素是否 ok ；
播放过程有调整的现象出现，素材本身的问题，以及 cpu 的问题；