PixiJS学习（9）动画序列帧 |
您所在的位置：网站首页 › 逐帧动画和补间动画的区别 › PixiJS学习（9）动画序列帧 |
PixiJS学习（9）动画序列帧
|
简介
序列帧动画是一种常见的动画形式之一，其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放从而形成动画。 用简单的话来说，就是一直在替换图片内容，在人眼的视觉感受中好像是连续在播放，就像那种“小人书”，进行翻动的时候就是一段连续的动画在播放。 就像下面的这个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);其实使用雪碧图和一张张加载序列帧，从技术实现的角度来看，没有多少区别。但是从实际资源优化的角度来说看确实有很多提升。 注意事项：序列帧的播放在实际的生产过程中，可能会遇到很多的问题。下面有几个比较常见的问题： 序列帧素材过大的问题，可以通过删帧（间隔删除）、批量缩放的方式处理；序列帧比较模糊的问题，需要查看原图尺寸以及 canvas 像素是否符合需求；播放过程有跳帧的现象出现，素材本身连续性的问题，以及硬件 cpu 的问题； |
【本文地址】
今日新闻 |
推荐新闻 |