cesium加载动图方案三：通过apng-js库实现

1、项目场景

实际开发中我们经常会有动图加载的需求，而Cesium不支持纹理贴动图，怎么样基于Cesium实现动图的加载，值得我们研究一波。cesium加载gif格式的动图有些场景能够满足我们的需求，但是有时候，图像的质量不高，颗粒感很明显，会有杂边，如何解决这个难题，又值得我们进入深层次的研究。

---

2、解决方案

首先，查阅相关资料，容易得知：动图的格式有很多种，主要有gif、png、flv、swf等格式。而gif是我们最常见的动图格式，它的原理是通过对多帧图片按时间序列进行切换，从而达到动画的效果。apng格式动画原理和gif差不多。gif的特点是牺牲质量来降低大小，图像信息比较多的情况下，颗粒感明显，会有杂边。apng是普通png图片的升级版，它的后缀依然是.png，包含动态的情况下大小会比普通静态png大出数倍，但是可以做到无损动态展示。

其次，了解了apng动图优势过后，考虑到Cesium的Billboard支持单帧纹理贴图，如果能够将apng动图进行解析，获得时间序列对应的每帧图片，然后按照时间序列动态更新Billboard的纹理，即可实现动图纹理效果。

然后，我们如何进行apng动图的解析？经过不懈的探寻，发现apng-js第三方库能够将apng转化为一帧帧图像，正好能够满足我们的需求！！！

注：apng-js第三方库需要经过优化，才能通过script标签直接引用，优化后的链接已奉上！

---

3、编码实现

/**
 * 加载apng
 */
async function loadApng() {
  let url = '../../assets/images/wind.png'
  let canvas = document.createElement('canvas')
  let ctx = canvas.getContext('2d')
  let blob = await loaderURL(url)
  let arrayBuffer = await blobToArrayBuffer(blob)
  let apng = apngjs.parseAPNG(arrayBuffer)
  let player = await apng.getPlayer(ctx)
  player.play()

  let entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(point[0], point[1]),
    billboard: {
      scale: 2
    }
  })

  entity.billboard.image = new Cesium.CallbackProperty(() => {
    return player.currentFrame.imageElement
  }, false)
}

​完整demo可参见practicalCesiumDemos中loadApng。

---

4、成果展示