今天将使用PixiJs的动画精灵实现闪电划过的效果，效果如下：
准备工作
- 创建项目并引入PixiJs，详细介绍可以访问PixiJS起步
- 使用PixiJs创建应用，并将应用插入舞台区域，详细介绍可以访问PixiJS创建应用
准备需要的图片素材
我这边在项目文件夹pixi-demo下新建了imgs文件夹用于存放所需的全部图片（ani_1.png - ani_17.png 就是闪电所需图片），如下：
完整项目目录如下：创建一个宽750，高500像素的粉色画布，在浏览器中水平居中显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>pixi-demo</title>
<style>
body {
margin: 0;
overflow: hidden;
}
#demo_stage {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="demo_stage"></canvas>
<!-- 引入pixi -->
<script src="js/pixi.min.js"></script>
<script type="text/javascript">
let app = new PIXI.Application({
width: 750, // default: 800 宽度
height: 500, // default: 600 高度
view: document.getElementById("demo_stage"),
});
app.renderer.backgroundColor = 0xfddcea; // 设置画布背景色为粉色。0x表示16进制
</script>
</body>
</html>
使用PIXI.loader加载所需图片
- 设置画布背景色代码后面继续插入下面代码
- PIXI.loader.add('图片相对路径或者图片数组')：加载图片
- on方法可以监听图片加载进度
- load用于所有图片加载完毕后执行回调
PIXI.loader
.add("imgs/p1.jpg")
.on("progress", function (loader, resource) {
console.log("加载数据进度", loader.progress);
})
.load(imgsLoadDone);
function imgsLoadDone() {
console.log("图片素材加载完毕啦");
}代码加入完毕，浏览器控制台可以看到如下输出：
素材加载完毕开始创建精灵
- 创建精灵并保存在变量sprite中：PIXI.Sprite.from("图片相对路径")
let sprite = PIXI.Sprite.from("imgs/p1.jpg"); // p1.jpg原始大小256*256- 将sprite精灵添加到画布中
app.stage.addChild(sprite);
此时可以看到画布中出现一个宽高均为256像素的图片，位于画布的左上角 在将精灵添加到画布之前还可以设置精灵相关属性，比如宽高
sprite.width = "400"; sprite.height = "400";设置后图片的宽高将由原来的256像素变成400像素
- 接下来我们让图片居中显示
可以设置精灵的position属性，sprite.position.set(x, y) 试试将x,y分别改为30，表示图片将显示在距离画布左边30像素，顶部30像素的地方sprite.position.set(30, 30);
可是我们不能写死x,y的值，因为要是换一张大小不一样的图片后我们又需要手动去调整x,y的值，因此这里我们最好做成动态计算的，要想图片在画布中水平居中显示，首先我们需要知道画布的宽度和图片的宽度，画布的宽度 - 图片的宽度就是剩余的间隙，剩余间隙的一半即为x的值；高度逻辑同理。
画布宽度可以通过 app.screen.width 获取
图片宽度可以通过 sprite.width 获取
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>pixi-demo</title>
<style>
body {
margin: 0;
overflow: hidden;
}
#demo_stage {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="demo_stage"></canvas>
<!-- 引入pixi -->
<script src="js/pixi.min.js"></script>
<script type="text/javascript">
let app = new PIXI.Application({
width: 750, // default: 800 宽度
height: 500, // default: 600 高度
view: document.getElementById("demo_stage"),
});
app.renderer.backgroundColor = 0xfddcea; // 设置画布背景色为粉色。0x表示16进制
PIXI.loader
.add("imgs/p1.jpg")
.on("progress", function (loader, resource) {
console.log("加载数据进度", loader.progress);
})
.load(imgsLoadDone);
function imgsLoadDone() {
console.log("图片素材加载完毕啦");
// 创建图片精灵
let sprite = PIXI.Sprite.from("imgs/p1.jpg"); // 原始大小256*256
sprite.width = "400";
sprite.height = "400";
let canvasW = app.screen.width;
let canvasH = app.screen.height;
let x = (canvasW - sprite.width) / 2;
let y = (canvasH - sprite.height) / 2;
sprite.position.set(x, y);
app.stage.addChild(sprite);
}
</script>
</body>
</html>
效果如下：
至此图片就在画布中居中显示啦
闪电动画精灵处理
- 首先需要加载所需的闪电图片
由于我们图片名称大致相同，因此我们可以使用for循环处理
let imgArr = [];
for (let i = 1; i <= 17; i++) {
let temp = "imgs/ani_" + i + ".png";
imgArr.push(temp);
}然后使用PIXI.loader.add(imgArr)加载图片
打开浏览器开发者工具Network选项，可以看到刚刚加入的图片
创建动画精灵
需要使用纹理数组创建动画精灵的方法：
new PIXI.extras.AnimatedSprite(textures,autoUpdate)，第一个参数是用一系列略有不同的图像做的纹理数组，第二个参数是用来判断是否使用 PIXI.ticker.shared 自动更新动画时间，默认为true- 创建纹理数组：
let imgSprArr = []; for (let n = 1; n <= 17; n++) { let tempspr = new PIXI.Texture.fromImage("imgs/ani_" + n + ".png"); // 创建纹理，参数是用于创建纹理的源或源数组 let temprect = new PIXI.Rectangle(0, 0, 750, 750); // 创建矩形对象，前两个参数定义了x 和y轴坐标位置，后两个参数定义了矩形的width 和 height let imgSprArrItem = new PIXI.Texture(tempspr, temprect); // 创建纹理。第一个参数是创建纹理的基础纹理源，第二个参数是要显示的纹理的矩形框 imgSprArr.push(imgSprArrItem); }- 创建动画精灵并添加到画布中
let animatedSpr = new PIXI.extras.AnimatedSprite(imgSprArr); app.stage.addChild(animatedSpr);- 播放动画并设置动画速度
animatedSpr.animationSpeed = 0.4; // 动画速度，数字越大，运行速度越快；反之，速度越慢； animatedSpr.play();效果如下：
可以看到闪电的位置不对，是因为闪电相关的图片的大小是750，而我们的画布大小是750*500，闪电图片的高度超出了画布的高度，因此我们需要对闪电精灵进行缩放，缩放比例根据高度进行计算，并保留小数点后4位，也就是：
console.log("animatedSpr缩放前的宽高===", animatedSpr.width, animatedSpr.height); let _scale = parseFloat(500 / 750).toFixed(4); animatedSpr.scale.set(_scale, _scale); console.log("animatedSpr缩放后的宽高===", animatedSpr.width, animatedSpr.height);缩放后效果如下：
缩放后动画精灵的宽度发生了变化，因此需要通过设置position进行水平居中处理：x轴的值即为 (画布的宽度 - 动画精灵缩放后的宽度) / 2let x2 = animatedSpr.width; // let x2 = parseFloat(_scale * 750).toFixed(2); // 根据缩放比例计算动画精灵的真实宽度 animatedSpr.position.set((canvasW - x2) / 2, 0);至此项目完成，完整代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>pixi-demo</title> <style> body { margin: 0; overflow: hidden; } #demo_stage { display: block; margin: 0 auto; } </style> </head> <body> <canvas id="demo_stage"></canvas> <!-- 引入pixi --> <script src="js/pixi.min.js"></script> <script type="text/javascript"> let app = new PIXI.Application({ width: 750, // default: 800 宽度 height: 500, // default: 600 高度 view: document.getElementById("demo_stage"), }); app.renderer.backgroundColor = 0xfddcea; // 设置画布背景色为粉色。0x表示16进制 let imgArr = []; for (let i = 1; i <= 17; i++) { let temp = "imgs/ani_" + i + ".png"; imgArr.push(temp); } PIXI.loader .add("imgs/p1.jpg") .add(imgArr) .on("progress", function (loader, resource) { console.log("加载数据进度", loader.progress); }) .load(imgsLoadDone); function imgsLoadDone() { console.log("图片素材加载完毕啦"); // 创建图片精灵 let sprite = PIXI.Sprite.from("imgs/p1.jpg"); // 原始大小256*256 sprite.width = "400"; sprite.height = "400"; let canvasW = app.screen.width; let canvasH = app.screen.height; let x = (canvasW - sprite.width) / 2; let y = (canvasH - sprite.height) / 2; sprite.position.set(x, y); app.stage.addChild(sprite); // 获取17张图片的纹理数组 let imgSprArr = []; for (let n = 1; n <= 17; n++) { let tempspr = new PIXI.Texture.fromImage("imgs/ani_" + n + ".png"); // 创建纹理，参数是用于创建纹理的源或源数组 let temprect = new PIXI.Rectangle(0, 0, 750, 750); // 创建矩形对象，前两个参数定义了x 和y轴坐标位置，后两个参数定义了矩形的width 和 height let imgSprArrItem = new PIXI.Texture(tempspr, temprect); // 创建纹理。第一个参数是创建纹理的基础纹理源，第二个参数是要显示的纹理的矩形框 imgSprArr.push(imgSprArrItem); } // 创建动画精灵 let animatedSpr = new PIXI.extras.AnimatedSprite(imgSprArr); console.log( "animatedSpr缩放前的宽高===", animatedSpr.width, animatedSpr.height ); let _scale = parseFloat(500 / 750).toFixed(4); animatedSpr.scale.set(_scale, _scale); console.log( "animatedSpr缩放后的宽高===", animatedSpr.width, animatedSpr.height ); let x2 = animatedSpr.width; // let x2 = parseFloat(_scale * 750).toFixed(2); animatedSpr.position.set((canvasW - x2) / 2, 0); app.stage.addChild(animatedSpr); animatedSpr.animationSpeed = 0.4; animatedSpr.play(); // 动画播放 } </script> </body> </html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。