PixiJs创建精灵动画

今天将使用PixiJs的动画精灵实现闪电划过的效果，效果如下：

准备工作

1. 创建项目并引入PixiJs，详细介绍可以访问PixiJS起步
2. 使用PixiJs创建应用，并将应用插入舞台区域，详细介绍可以访问PixiJS创建应用

3. 准备需要的图片素材
   我这边在项目文件夹pixi-demo下新建了imgs文件夹用于存放所需的全部图片（ani_1.png - ani_17.png 就是闪电所需图片），如下：
   
   完整项目目录如下：
   

   创建一个宽750，高500像素的粉色画布，在浏览器中水平居中显示

使用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 获取
  完整代码如下：

效果如下：

至此图片就在画布中居中显示啦

闪电动画精灵处理

1. 首先需要加载所需的闪电图片
   由于我们图片名称大致相同，因此我们可以使用for循环处理

let imgArr = [];
for (let i = 1; i <= 17; i++) {
  let temp = "imgs/ani_" + i + ".png";
  imgArr.push(temp);
}

然后使用PIXI.loader.add(imgArr)加载图片

打开浏览器开发者工具Network选项，可以看到刚刚加入的图片

2. 创建动画精灵
   需要使用纹理数组创建动画精灵的方法：
   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);

   至此项目完成，完整代码如下：