使用pixi绘制呼吸灯

Posted 2023-02-04 zlzbt

呼吸灯处理

import  Graphics, Sprite  from 'pixi.js';
import  allPointTexture  from '@/utils/controlUtil/getSocketTextures';

declare interface borderType 
  x: number;
  y: number;
  width: number;
  height: number;
  code: string;
  visible?: boolean;


export default class RobotBorder extends Graphics 
  borderFlag: boolean;
  robotCode: string;
  timer: number | null | undefined;
  animId: number = 0;
  animStartTime: number = 0;

  constructor(options: borderType) 
    super();
    this.visible = true;
    this.borderFlag = true;
    this.scale.y = this.scale.y * -1;
    this.robotCode = options.code;
    this.resetSize(options);
  

//  动画处理主要核心
  animloop = (time: number) => 
    if (!this.animStartTime) 
      this.animStartTime = time;
    
    // time - this.animStartTime  时间差
    // (time - this.animStartTime) / 16.6  总共有多少帧
    // frame 代表是值范围 保证循环范围在 0-119  帧
    //  Math.abs(60 - frame) * 0.016 保证前 一半是  从暗到名  后一半是由明到暗
    const frame: number = Math.floor((time - this.animStartTime) / 16.6) % 120;
    this.alpha = Math.abs(60 - frame) * 0.016;
    // console.log(this.alpha, frame);
    this.animId = window.requestAnimationFrame(this.animloop);
  ;

  resetSize(options: borderType) 
    const  x, y, width, height  = options;
    const children = this.children;
    window.cancelAnimationFrame(this.animId);
    this.clear();
    this.removeChild(...children);

    const  texture  = allPointTexture.ROBOT_BORDER;
    const sprite = new Sprite(texture);
    // console.log(x, y);
    const [realW, realH] = [width * 1.4, height * 1.4];
    const size = Math.max(realW, realH);
    sprite.width = size;
    sprite.height = size;
    sprite.position.set(x - size / 2, -y - size / 2);
    this.addChild(sprite);
    this.animId = window.requestAnimationFrame(this.animloop);