JS帧动画

const drawImage = (requireModule, file, cb, customW, customH) => {
  let count = 0;
  let ctx = null;
  let timeout = null;
  const imgSrcs = [];
  const images = [];
  const delay = 100;
  const canvas = document.getElementById('canvas');
  for (var j = 0; j < requireModule.keys().length; j++) {
    imgSrcs.push(`${file}` + requireModule.keys()[j].substr(2, requireModule.keys()[j].length));
  }
  const animation = (i) => {
    ctx = canvas.getContext('2d');
    if (!ctx) return
    const w = customW || Math.floor(images[0].width / 2);
    const h = customH || Math.floor(images[0].height / 2);
    canvas.width = w;
    canvas.height = h;
    ctx.clearRect(0, 0, w, h);
    ctx.drawImage(images[i], 0, 0, w, h);
    if (i === imgSrcs.length - 1) {
      timeout = setTimeout(() => {
        animation(0);
      }, delay);
    } else {
      timeout = setTimeout(() => {
        animation(i + 1);
      }, delay);
    }
  }
  for (let i = 0; i < imgSrcs.length; i += 1) {
    images[i] = new Image();
    images[i].src = require(`${imgSrcs[i]}`).default;
    images[i].onload = () => {
      count += 1;
      if (count === imgSrcs.length) {
        animation(0);
        if(cb) {
          cb(Math.floor(images[0].height / 2));
        }
      }
    }
  }
}