fabric.js 封装雪碧动图

看到的效果如下：

图片来源： 

1.  fabric.js官网示例里----自己去下载png，

2. Knova 官网雪碧图示例里面的---自己去下载png。

说明下：

①  实现原理和fabric.js官网上雪碧图例子里面是不一样的，雪碧图切取是借鉴了 Knova中animation坐标模式----这样就可以实现非规则雪碧图的运动啦

② sprite 返回的是fabric.group，其实大家可以试一下，如果不放在组里面直接返回图，那么你后续无法对这个雪碧图拖动的，因为它每一帧都重新定位了，你设置的位置就会被覆盖。

  /**
   * 生成雪碧图工具
   * @param {ISprite} pload   雪碧图参数对象 ISprite是ts定义的接口
   * @returns {fabric.Group}   雪碧图group对象
   */

  let Sprite = function (pload) {
    let arrS = [];
    let pre = null;//前一帧
    let index = pload.index || 0;
    let len = pload.animations.length || 0;
    let endIndex = pload.endIndex || len;
    let orw = pload.animations[0][2];//起始 width
    let orh = pload.animations[0][3];//起始 height
    this.group = new fabric.Group();
    this.group.set({
      left: pload.x,
      top: pload.y,
      width: orw,
      height: orh,
    });
    let _this = this;
    //创建静态canvas 把雪碧每一帧绘制 并维护在arrS中
    fabric.Image.fromURL(pload.url, function (mainimg) {
      let tempCanvas = new fabric.StaticCanvas();
      tempCanvas.setDimensions({
        width: orw,
        height: orh,
      });
      mainimg.originX = 'left';
      mainimg.originY = 'top';

      tempCanvas.add(mainimg);

      for (let i = 0; i < len; i++) {

        mainimg.left = - pload.animations[i][0];
        mainimg.top = - pload.animations[i][1];
        mainimg.setCoords();

        tempCanvas.set({
          width: pload.animations[i][2],
          height: pload.animations[i][3],
        })
        tempCanvas.renderAll();

        let domimg = new fabric.Image(tempCanvas.toCanvasElement(),);
        arrS.push(domimg);
      }
      setInterval(() => {
        pre = arrS[index];
        index++;
        if (index > endIndex - 1) index = 0;
        arrS[index].set({
          left: -pload.animations[index][2] / 2,
          top: -pload.animations[index][3] / 2,
        });
        _this.group.remove(pre);
        _this.group.add(arrS[index]);
      }, pload.framTime);

    })
    return this.group;
  }

接口 如下

interface ISprite{
 url: string, 
 animations: [number, number, number, number][], 
 index: number, 
 framTime: number, 
 x: number, 
 y: number, 
 endIndex: number; 
}

下面就是使用了

    let startIndex = 0;
    let endIndex = animations.length;
    let framTime = 200;
    let x = 50;
    let y = 50;
     // x, y, width, height 每行数组的规则
    let animations2 = [
      [0, 0, 50, 72],
      [50, 0, 50, 72],
      [100, 0, 50, 72],
      [150, 0, 50, 72],
      [200, 0, 50, 72],
      [250, 0, 50, 72],
      [300, 0, 50, 72],
      [350, 0, 50, 72],
      [400, 0, 50, 72],
      [450, 0, 50, 72],
    ];
    let animations3 = [
      [2, 2, 70, 119],
      [71, 2, 74, 119],
      [146, 2, 81, 119],
      [226, 2, 76, 119],
      [2, 138, 74, 122],
      [76, 138, 84, 122],
      [346, 138, 120, 122]
    ];
    
    let dd = { url: '../assets/hi~.png', animations: animations2, index: startIndex, framTime, x, y,  };
    
    let ee = { url: '../assets/blob-sprite.png', animations: animations3, index: startIndex, framTime, x, y,  };

    let sayHi = new Sprite(dd);
    let monster = new Sprite(ee);

    canvas.add(sayHi, monster);
    renderThis();

    function renderThis() {
      canvas.renderAll();
      requestAnimationFrame(renderThis);
    }