图片帧动画

Posted on

切换img图片完成帧动画效果

1
2
3
4
5
6
7
8
9
10
11
12
13
// 加载所有图片资源
await Promise.all(
  this.layerConfig.map(async (v) => {
    console.log("v", v);
    return Promise.all(
      v.images.map(async (i, index) => {
        const img = document.createElement("img");
        img.src = i.src;
        await new Promise((resolve) => (img.onload = resolve));
        v.images[index].img = img;
      })
    );
  })

利用Promise先加载完所有图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 初始化图层
const layers = layerConfig.map((v) => {
  const layer = document.createElement("div");
  layer.classList.add("layer");
  container.appendChild(layer);
  return layer;
});

// 切换下一帧的方法
const changeToNextFrame = (layer, images, i) => {
  setTimeout(() => {
    const next = i === images.length - 1 ? 0 : i + 1;
    layer.removeChild(layer.firstChild);
    layer.appendChild(images[next].img);
    changeToNextFrame(layer, images, next);
  }, images[i].duration);
};

// 初始化图层内图片和帧动画
layerConfig.map((v, i) => {
  const a = v.images[0].img;
  layers[i].appendChild(a);
  if (v.images.length > 1 && v.loopTime > 0) {
    changeToNextFrame(layers[i], v.images, 0);
  }
});
  1. 生成图层添加到页面
  2. 添加图层图片和动画
  3. 用SetTimeout切换图片