关于前端:PixiJs创建精灵动画

明天将应用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轴的值即为 (画布的宽度 - 动画精灵缩放后的宽度) / 2

let 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>

筹备工作

创立一个宽750，高500像素的粉色画布，在浏览器中程度居中显示

应用PIXI.loader加载所需图片

素材加载结束开始创立精灵

闪电动画精灵解决