使用PIXI制作简单canvas逐帧动画的心得

//在我们的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;
    }

还可以针对sprite添加事件监听

 //将我们精灵示例的interactive属性设置为true就可以开启对其的事件监听，默认为false 不监听
	我们的精灵.interactive = true;
		//监听之后处理事件
		js.on("pointertap", (e)=>{
			//做些什么
		});

鼠标常用事件

只能通过鼠标操作触发的事件

事件	作用
mousedown	在元素中按下鼠标左键
mouseup	在元素中松开鼠标左键
mouseover	当鼠标指针移入某个元素中时
mouseout	当鼠标指针离开某个元素时
mousemove	当鼠标移动时
mouseover	当鼠标指针移入某个元素中时

移动端常用事件【兼用鼠标】

事件名称	触发操作
pointertap	触碰元素时
pointerdown	按住元素时
pointerup	松开元素时
pointerover	当触碰点移入到元素中时
pointerout	当触碰点移除某个元素时
pointermove	在应用中移动时