import parseAPNG from "apng-js";
  // 图片转成buffer流
  const getImgBuffer = (url) => {
    return new Promise(async (resolve) => {
      const blob = await fetch(url).then((res) => res.blob());
      const reader = new FileReader();
      reader.readAsArrayBuffer(blob);
      reader.onload = () => {
        resolve(reader.result);
      };
    });
  };
  // 动画开始播放
  const createApngPlayer = async (url, ctx, options = {}) => {
    const imgBuffer = await getImgBuffer(url);
    const apng = parseAPNG(imgBuffer);
    Object.keys(options).forEach((key) => {
      apng[key] = options[key];
    });

    const player = await apng.getPlayer(ctx);
    return player;
  };

  // 手指移动上去，页面动画
  const handlerTouchStart = () => {
    console.log("手指移动上去");
  };
  // 手指离开页面动画
  const handlerTouchEnd = async () => {
    // 谈起的动画A
    const jumpPlayer = await createApngPlayer(pigJump, pigEle, { numPlays: 1 });
    jumpPlayer.play();

    // 动画A执行到一半加入动画B
    setTimeout(async () => {
      const coinPlayer = await createApngPlayer(coin, coinEle, { numPlays: 1 });
      coinPlayer.play();
    }, 400);

    // 动画A执行到某一帧的时候
    jumpPlayer.on("frame", async (values) => {
      if (values == 16) {
        
        console.log("这里要做别的操作了");
      }
    });
    // 动画A完了
    jumpPlayer.on("end", async () => {
      
    });
  };

  // 长按操作
  const handlerPress = async () => {

    const pressPlayer = await createApngPlayer(
      pigPress,
      pigEle,
      { numPlays: 1 },
      "time"
    );

    pressPlayer.play();

    pressPlayer.on("end", async () => {
     console.log('长按操作动画完成')
    });
  };