关于前端: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>

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

筹备工作

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

应用PIXI.loader加载所需图片

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

闪电动画精灵解决

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

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

筹备工作

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

应用PIXI.loader加载所需图片

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

闪电动画精灵解决

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复