//在我们的html模板中有我们的代码块 主要使用ref属性 来进行动态添加canvas节点
 <div class="Index_container" id="Index_container" ref="container">
//首先在Vue项目中导入我们的PIXI库
import * as PIXI from "pixi.js"
//可以在mounted中调用我们的方法createCanvas来初始化PIXI画布；
mounted(){
	this.createCanvas()
}
createCanvas() {
      this.App = new PIXI.Application({
        width: 750, //宽
        height: 1200, //高
        transparent: true, //开启背景透明
        antialias: true, //开启抗锯齿 不开启部分机型显示不清晰
        resolution: 1 //像素比 不为1的话部分安卓手机会有兼容问题
        // forceCanvas: true, //js-legacy或@pixi/canvas-renderer模块可用 只用	canvas 不用webGl
        //招行APP是内置浏览器一般不用担心这个问题
      });
      //将canvas添加到dom中
      this.$refs.container.appendChild(this.App.view);
    },
 

• 如果只是添加一张图片那么我们可以直接创建一个精灵Sprite；

方法一：

• 在实例化Sprite时构造参数只能是一个纹理对象texture或者是调用静态方法from传入一个require方法导入的文件

//
 addPicture() {
      let bgSpirit = new PIXI.Sprite.from(require("../assets/img/green/1.png"));
      //   bgSpirit.width = 80; //也可以设置宽度和高度
      //   bgSpirit.height = 160;
      //   bgSpirit.position.set(60, 60); //设置图片在画布中的初始位置或也可以直接通过.x 与.y来设置如下
      //   bgSpirit.x = 60; 
      //   bgSpirit.y = 60；
	
      //bgSpirit.interactive = true; //监听该精灵的事件
      //bgSpirit.on("touchstart", () => {
        //bgSpirit.x += 10;
      //});
      //this.App.stage.addChild(bgSpirit); //可以直接将我们的精灵添加的场景中，
      //也可以创建一个容器，该容器类似于一个group组，控制容器可以控制容器中所有的精灵
       let container = new PIXI.Container();
       //将精灵添加到容器中，可以添加多个精灵
       container.addChild(bgSpirit);
       //将容器渲染到画布中
       this.App.stage.addChild(container1)
      //   container1.addChild(bgSpirit2);
      //   container1.setChildIndex(bgSpirit, 0);
      //   container1.setChildIndex(bgSpirit2, 0);
      //   this.App.stage.addChild(container1);
   }

方法二：

• 在构造sprite时构造参数传入一个PIXI.Loader.shared.resources[require("../assets/img/green/1.png")].texture纹理对象

• require后面的文件名要和下方的一致，因为下面的resources是从缓存中取的

//在loader读完文件后会执行load方法回调，因此在load回调中传一个函数等待回调
 PIXI.Loader.shared.add(require("../assets/img/green/1.png")).load(setup);
      let self = this;
 function setup() {
     let bgSprite = new PIXI.Sprite(PIXI.Loader.shared.resources[require("../assets/img/green/1.png")].texture);
        bgSprite.width = 600;//可以设置该sprite的宽高
        bgSprite.height = 600;
        self.App.stage.addChild(bgSprite);
      }

• 动画帧的创建

   animationFrame() {
	  //创建一个纹理对象
      const feed = this.createAnimatedTexture(40, "feed"); 
      //将纹理对象创建动画帧精灵
      this.feed = new PIXI.AnimatedSprite(feed); 
      //设置动画帧的速度，默认为1
      this.feed.animationSpeed = 0.2;
      //是否需要无限循环，默认为true
      this.feed.loop = false;
      // this.feed,play()//开始动画
      // this.feed.stop() //结束动画
      //每次从指定位置开始动画帧
      this.feed.gotoAndPlay(0) // 如指定从0开始动画帧
      // this.feed.gotoAndStop(xxxx) //指定位置结束动画帧
      //监听该动画帧的完成事件，只有当loop为false时该事件才会执行
      this.feed.onComplete = () => {
       //做些什么，可以用来移除场景中的精灵等工作
      };
	 // 将这个动画帧添加到场景中
      this.App.stage.addChild(this.feed);
    },
        /**
     * 创建序列帧动画
     * @frames 帧数
     * @imgUrl 序列帧文件名
     *
     */
     
    createAnimatedTexture(frames, imgUrl) {
   // 创建动画帧文理对象数组
      const framesTextures = [];
      for (let i = 1; i <= frames; i++) {
        let imgSprArrItem = PIXI.Texture.from(require(`../assets/img/${imgUrl}/${i}.png`));
        framesTextures.push(imgSprArrItem);
      }
      return framesTextures;
    }

标签：feed,动画,canvas,addChild,bgSpirit,PIXI,逐帧,App
来源： https://blog.csdn.net/qq_15506981/article/details/118937629