PixiJS学习（9）动画序列帧

幻蝶Love

已于 2023-04-04 14:36:59 修改

阅读量4.6k

点赞数 1

分类专栏： PixiJs 文章标签： canvas html5

于 2020-06-16 16:06:44 首次发布

本文链接：https://blog.csdn.net/xiechao_5800/article/details/106789012

版权

PixiJs 专栏收录该内容

14 篇文章 8 订阅

订阅专栏

简介

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

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

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

素材需求

序列帧图片：

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

一般的序列帧图片会提供尺寸大小一致的图片。可以是 JPG 也可以是 PNG 图片。下面就是上述动画提供的原始图片。

处理图片：

在 PixiJs 中使用序列帧，在序列帧图片比较多的情况下可以将图片打包成雪碧图，这样进行处理，可以优化性能，节省开销。

常用的打包工具是 TexturePacker - Create Sprite Sheets for your game!

如果不进行处理，一张张的图片处理也是可以的。

一张一张图片的序列帧

在 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);

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