申明
看完官方教程中提到的这本书 — Learn Pixi.js ，预备写写读后感了，官方教程中所说的内容，基础上就是书的前4章，所以我就从第5章最先写写吧。
动画精灵指的是按递次运用一系列略有不同的图象，建立的精灵，以后一帧一帧的播放这些图象，就能够发生活动的幻觉。
也就是说用这类图片
做出如许的结果 
要制造动画精灵我们须要用到 PixiJS 的 AnimatedSprite 要领。
PIXI.extras.AnimatedSprite
定义：
运用纹理数组建立动画精灵的要领。
用法：
new PIXI.extras.AnimatedSprite(textures,autoUpdate)参数 :
| 称号 | 范例 | 默认值 | 形貌 |
|---|---|---|---|
| textures | array | 用一系列略有不同的图象做的纹理数组。 | |
| autoUpdate | boolean | true | 用来推断是不是运用 PIXI.ticker.shared 自动更新动画时刻。 |
返回值：
返回一个对象，对象会有一些属性和要领，用于掌握动画精灵。
返回值对象的属性：
| 称号 | 范例 | 形貌 |
|---|---|---|
| animationSpeed | number | 动画精灵的播放速率。越高越快，越低越慢，默认值是1 |
| currentFrame | number（只读） | 正在显现的当前帧编号 |
| onComplete | function | 当loop属性为false时，一个动画精灵完成播放时挪用 |
| playing | Boolean | 肯定当前动画精灵是不是正在播放 |
| onFrameChange | function | 当一个动画精灵更改要显现的纹理时挪用 |
| loop | boolean | 动画精灵是不是在播放后反复播放 |
| onLoop | function | 当loop属性为true时挪用的函数 |
| textures | array | 用于这个动画精灵的纹理数组 |
| totalFrames | number （只读） | 动画中的帧总数 |
返回值对象的要领：
| 称号 | 参数 | 形貌 |
|---|---|---|
| play | 播放动画精灵 | |
| gotoAndPlay | frameNumber，number范例，最先帧的索引 | 转到特定的帧并最先播放动画精灵 |
| stop | 住手播放动画精灵 | |
| gotoAndStop | frameNumber，number范例，住手帧的索引 | 转到特定的帧并住手播放动画精灵 |
运用返回值中的这些属性和要领，我们就能够掌握动画精灵了，比方播放动画精灵，设置动画的速率，设置是不是轮回播放等，除此之外，还要晓得就是 PIXI.extras.AnimatedSprite 要领继续自 PIXI.Sprite 要领，所以动画精灵也能够用一般精灵的属性和要领，比方x，y，width，height，scale，rotation 。
好的，我们最先尝尝这个要领。
<!doctype html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<title>动画精灵</title>
</head>
<body>
<div id="px-render"></div>
<script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
<script>
// 建立一个 Pixi运用 须要的一些参数
let option = {
width: 400,
height: 300,
transparent: true,
}
// 建立一个 Pixi运用
let app = new PIXI.Application(option);
// 猎取渲染器
let renderer = app.renderer;
let playground = document.getElementById('px-render');
// 把 Pixi 建立的 canvas 添加到页面上
playground.appendChild(renderer.view);
//设置别号
let TextureCache = PIXI.utils.TextureCache;
let Texture = PIXI.Texture;
let Rectangle = PIXI.Rectangle;
let AnimatedSprite = PIXI.extras.AnimatedSprite;
//须要加载的雪碧图的地点（该图片服务器端已做跨域处置惩罚）
let imgURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.png";
//加载图象，加载完成后实行setup函数
PIXI.loader.add(imgURL).load(setup);
function setup() {
//猎取纹理
let base = TextureCache[imgURL];
//第一个纹理
let texture0 = new Texture(base);
texture0.frame = new Rectangle(0, 0, 80, 143);
//第二个纹理
let texture1 = new Texture(base);
texture1.frame = new Rectangle(80, 0, 80, 143);
//第三个纹理
let texture2 = new Texture(base);
texture2.frame = new Rectangle(160, 0, 80, 143);
//第四个纹理
let texture3 = new Texture(base);
texture3.frame = new Rectangle(240, 0, 80, 143);
//建立纹理数组
let textures = [texture0, texture1, texture2,texture3];
//建立动画精灵
let pixie = new PIXI.extras.AnimatedSprite(textures);
//设置动画精灵的速率
pixie.animationSpeed=0.1;
//把动画精灵添加到舞台
app.stage.addChild(pixie);
//播放动画精灵
pixie.play();
}
</script>
</body>
</html>上面这个例子中，建立纹理数组时好像点贫苦，要处理这个题目，我们能够用名叫 SpriteUtilities 的库，该库包括很多有效的函数，用于建立Pixi精灵并使它们更易于运用。
装置：
直接用 script 标签，引入js 文件就能够
<script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>装置好以后，我们须要建立一个新实例，代码以下
let su = new SpriteUtilities(PIXI);以后就能够用 su 对象接见一切要领了。
我们这里须要用到的就是 su 对象的 filmstrip 要领。
定义：
filmstrip 要领能够自动将雪碧图转换为可用于制造精灵的纹理数组
用法：
su.filmstrip("anyTilesetImage.png", frameWidth, frameHeight, optionalPadding);参数：
| 称号 | 范例 | 形貌 |
|---|---|---|
| anyTilesetImage | string | 雪碧图的途径 |
| frameWidth | number | 每帧的宽度（以像素为单元） |
| frameHeight | number | 每帧的高度（以像素为单元） |
| optionalPadding | number | 每帧四周的添补量（可选值，以像素为单元） |
返回值：
返回一个数组，可用于制造动画精灵的纹理数组。
如今我们运用 SpriteUtilities 来改写下适才的示例代码。
<!doctype html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<title>动画精灵</title>
</head>
<body>
<div id="px-render"></div>
<script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
<script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
<script>
//建立一个 Pixi运用 须要的一些参数
let option = {
width: 400,
height: 300,
transparent: true,
}
//建立一个 Pixi运用
let app = new PIXI.Application(option);
//猎取渲染器
let renderer = app.renderer;
let playground = document.getElementById('px-render');
//把 Pixi 建立的 canvas 添加到页面上
playground.appendChild(renderer.view);
let su = new SpriteUtilities(PIXI);
//须要加载的雪碧图的地点（该图片服务器端已做跨域处置惩罚）
let imgURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.png";
PIXI.loader.add(imgURL).load(setup);
function setup() {
//建立纹理数组
let frames = su.filmstrip(imgURL, 80, 143);
//建立动画精灵
let pixie = new PIXI.extras.AnimatedSprite(frames);
//设置动画精灵的速率
pixie.animationSpeed=0.1;
//把动画精灵添加到舞台
app.stage.addChild(pixie);
//播放动画精灵
pixie.play();
}
</script>
</body>
</html>filmstrip 要领自动将全部雪碧图转换为可用于制造动画精灵的纹理数组。然则，假如我们只想运用雪碧图中的一部分帧呢？这时刻须要用到 frames 要领了。
定义：
frames 要领运用雪碧图中的一组子帧，来建立纹理数组。
用法：
su.frames(source, coordinates, frameWidth, frameHeight)参数：
| 称号 | 范例 | 形貌 |
|---|---|---|
| source | string | 雪碧图的途径 |
| coordinates | array | 包括每帧的 x 和 y 坐标的二维数组 |
| frameWidth | number | 每帧的宽度（以像素为单元） |
| frameHeight | number | 每帧和高度（以像素为单元） |
返回值：
返回一个数组，可用于制造动画精灵的纹理数组。
示例代码：
<!doctype html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<title>动画精灵</title>
</head>
<body>
<div id="px-render"></div>
<script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
<script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
<script>
//建立一个 Pixi运用 须要的一些参数
let option = {
width: 400,
height: 300,
transparent: true,
}
//建立一个 Pixi运用
let app = new PIXI.Application(option);
//猎取渲染器
let renderer = app.renderer;
let playground = document.getElementById('px-render');
//把 Pixi 建立的 canvas 添加到页面上
playground.appendChild(renderer.view);
let su = new SpriteUtilities(PIXI);
//须要加载的雪碧图的地点（该图片服务器端已做跨域处置惩罚）
let imgURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.png";
PIXI.loader.add(imgURL).load(setup);
function setup() {
//建立纹理数组
let frames = su.frames(imgURL, [[0,0],[80,0],[160,0],[240,0]],80, 143);
//建立动画精灵
let pixie = new PIXI.extras.AnimatedSprite(frames);
//设置动画精灵的速率
pixie.animationSpeed=0.1;
//把动画精灵添加到舞台
app.stage.addChild(pixie);
//播放动画精灵
pixie.play();
}
</script>
</body>
</html>除了上面提到的体式格局，还能够用纹理贴图集来建立动画精灵。
运用纹理贴图集来建立动画精灵，就是先经由过程json文件，加载一切纹理，然后把须要的纹理再放进一个数组中，末了把这个数组当参数，传入PIXI.extras.AnimatedSprite 要领中，来建立动画精灵。
代码：
<!doctype html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<title>动画精灵</title>
</head>
<body>
<div id="px-render"></div>
<script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
<script>
//建立一个 Pixi运用 须要的一些参数
let option = {
width: 400,
height: 300,
transparent: true,
}
//建立一个 Pixi运用
let app = new PIXI.Application(option);
//猎取渲染器
let renderer = app.renderer;
let playground = document.getElementById('px-render');
//把 Pixi 建立的 canvas 添加到页面上
playground.appendChild(renderer.view);
//须要加载的纹理贴图集的地点
let textureURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.json";
//加载纹理贴图集，加载完成后实行setup函数
PIXI.loader.add(textureURL).load(setup);
function setup() {
let id = PIXI.loader.resources[textureURL].textures;
//建立纹理数组
let frames = [
id["dnf0.png"],
id["dnf1.png"],
id["dnf2.png"],
id["dnf3.png"]
];
//建立动画精灵
let pixie = new PIXI.extras.AnimatedSprite(frames);
//设置动画精灵的速率
pixie.animationSpeed=0.1;
//把动画精灵添加到舞台
app.stage.addChild(pixie);
//播放动画精灵
pixie.play();
}
</script>
</body>
</html>上面的代码建立纹理数组时，是把纹理一个一个的放进数组中，假如数目比较少还好，多一点呢？假如有100个呢？一个一个的放就太贫苦了，这时刻我们能够用 SpriteUtilities 库中供应的 frameSeries 要领。
定义：
frameSeries 要领能够经由过程已加载的纹理贴图集，运用一系列编号的帧ID来建立动画精灵。
用法：
su.frameSeries(startNumber, endNumber, baseName, extension)参数：
| 称号 | 范例 | 形貌 |
|---|---|---|
| startNumber | number | 肇端帧序列号（默认值是0） |
| endNumber | number | 完毕帧序列号（默认值是1） |
| baseName | string | 可选的基础文件名 |
| extension | string | 可选的文件扩展名 |
返回值：
返回一个数组，可用于制造动画精灵的纹理数组。
注重：
运用 frameSeries 要领时，要确保在 json 文件中，定义的每帧的称号都是按递次来的，比方 frame0.png frame1.png frame2.png 这类。由于 frameSeries 要领的源码是如许写的
frameSeries(startNumber = 0, endNumber = 1, baseName = "", extension = "") {
//建立一个数组来存储帧名
let frames = [];
for (let i = startNumber; i < endNumber + 1; i++) {
let frame = this.TextureCache[`${baseName + i + extension}`];
frames.push(frame);
}
return frames;
}源码中实际上是用 for 轮回把帧名拼接起来的。所以要保证帧名是按递次来的，不然就猎取不到了。
下来我们就尝尝 frameSeries 要领吧。
<!doctype html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<title>动画精灵</title>
</head>
<body>
<div id="px-render"></div>
<script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
<script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
<script>
//建立一个 Pixi运用 须要的一些参数
let option = {
width: 400,
height: 300,
transparent: true,
}
//建立一个 Pixi运用
let app = new PIXI.Application(option);
//猎取渲染器
let renderer = app.renderer;
let playground = document.getElementById('px-render');
//把 Pixi 建立的 canvas 添加到页面上
playground.appendChild(renderer.view);
let su = new SpriteUtilities(PIXI);
//须要加载的纹理贴图集的地点
let textureURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.json";
PIXI.loader.add(textureURL).load(setup);
function setup() {
//建立纹理数组
debugger;
let frames = su.frameSeries(0,7,"dnf",".png");
//建立动画精灵
let pixie = new PIXI.extras.AnimatedSprite(frames);
//设置动画精灵的速率
pixie.animationSpeed=0.1;
//把动画精灵添加到舞台
app.stage.addChild(pixie);
//播放动画精灵
pixie.play();
}
</script>
</body>
</html>注重版本题目：
1、PIXI.extras.AnimatedSprite 这个要领本来叫PIXI.extras.MovieClip ，是在 4.2.1 版本的时刻修正的，本文示例代码顶用 PixiJS 的版本是 4.8.2，所以没有题目，假如你在运用过程中发明挪用PIXI.extras.AnimatedSprite 这个要领有题目，能够先搜检下版本是不是准确。
2、 SpriteUtilities 现在支撑的 PixiJS 的版本是 3.0.11，而 SpriteUtilities 顶用的就是PIXI.extras.MovieClip 要领，所以你假如用了比较高的 PixiJS 的版本，须要在SpriteUtilities 中修正下要领的别号。
在 spriteUtilities.js 文件中须要把 renderingEngine.extras.MovieClip 改成renderingEngine.extras.AnimatedSprite，把 renderingEngine.ParticleContainer 改成 PIXI.particles.ParticleContainer 。
这个 spriteUtilities.js 就是修正后的。
固然你也能够运用低版本的 PixiJS，如许就不必改 spriteUtilities.js 的代码了。
总结
动画精灵就是逐帧动画，经由过程一帧一帧的播放图象来发生活动的幻觉。
本文就是聊了聊建立动画精灵的一些体式格局和怎样运用动画精灵。
假如文中有毛病的处所，还请小伙伴们指出，万分谢谢。
