前言
最近做项目的过程中，碰到一些不太寻常的需求——将 gif 图贴到三维球上。
首先我们分析下这一需求，朝 cesium 三维球上贴图并非难事，很多方式都能做到。
采用多边形、方形、甚至于 SingleTileImageryProvider api，都能做到。
但是问题最麻烦的地方在于，不仅仅要贴图片，而是需要贴 gif 动图。
如果不是动图，而是一系列静态图片的话，实现起来的难度反而小一些。
无非是，设置一些定时器，定时将当前加载的图片切换为下一张。笔者之前，就做过这种轮播效果。
test.gif
但是现在，问题的难点在于，如何针对一张 gif 也实现这种播放的效果呢？
一些思考
稍微梳理一下思路，便不难得出，我们需要考虑以下几点问题：
- 浏览器是否提供现成的api，直接让 canvas 支持 gif 动图的加载。
- 如果 canvas 不支持动图，那么前端是否有现成的工具，可以将 gif 里的每一帧拆分出来，拆分出每一帧后，我们就可以像上面的做法，控制这些帧来实现轮播的效果了。
- 如果找不到现成的可以拆分 gif 帧的工具，那么就只有采用将 gif 处理成一系列的图片的方式来实现了。
按照这样的思路，我们来一条条的寻找解决方案。
第一条，直接可以从原理上否决掉，目前没有任何一个浏览器会支持该功能。原因，其实也很容易能想明白。canvas 其实就是一个画布，它被设计出来就是干类似于绘画的工作。你要是想要在画布上实现动画效果，就只有通过改变每一帧画布上要绘制的内容，来实现。
canvas 的 api 只提供较为底层，较为基础的绘画功能，绘制点线面等等，webgl 也不提供动图的支持，因为无论是 canvas 还是 webgl，通俗意义上讲，都是一张画布，它实质是不变的，想要变化，则需要人为的去控制。
既然第一条思路行不通，那么第二条思路，可以解决我们的问题么？
着手解决问题
带着这个思路，笔者在网上找寻了一番，果然找到了一个有力的工具：https://themadcreator.github.io/gifler/
image.png
它可以支持将 gif 解析成帧，并且还封装了一些动画接口，方便供我们调用。
默认情况下，直接调用 animate 方法即可为我们在目标的 canvas 上绘制出该 gif 动画。
https://codepen.io/wuzhiqin/pen/vYZabwy
当然，还有另外的使用方式，通过调用 frame api 或者 get api。
下面这个 demo，是使用 frame api 调用的方式。
https://codepen.io/wuzhiqin/pen/YzQjgyZ
可以看出来，两种使用方式，大同小异，结果也并无差别，唯一不同的是，第二种方式，方便我们去控制每一帧数据。
那么怎么将该工具应用于我们 cesium 贴图中去，实现动画效果呢？
首先，结合 gifler 和 cesium，不难写出如下代码
let canvas = document.createElement("canvas");
let url =
"https://media.giphy.com/media/VbEq7lhC0gVMFUX819/giphy-downsized.gif?cid=ecf05e471i9fq42unyxtjoci88jd019z2aana25ytggjay33&rid=giphy-downsized.gif&ct=g";
let gifImageLayer;
let rectangle = Cesium.Rectangle.fromDegrees(...[92.07, 27.67, 118.66, 39.45]);
function onDrawFrame(ctx, frame) {
ctx.canvas.width = frame.width;
ctx.canvas.height = frame.height;
ctx.drawImage(frame.buffer, 0, 0);
const provider = new Cesium.SingleTileImageryProvider({
url: canvas.toDataURL(),
rectangle
});
gifImageLayer = viewer.imageryLayers.addImageryProvider(provider);
}
gifler(url).frames(canvas, onDrawFrame);
基本逻辑就是，在动图每一帧调用的时候，都将像素点绘制在 canvas 上，然后将 canvas 导出成图片，然后再调用 cesium 的 SingleTileImageryProvider api，将该帧以图层的方式，贴到球面上。
最终呈现出来的效果是这样的：
cesium上贴gif.gif
虽然看起来还不错，但是这段代码，实质上是有一些问题的。
比如，频繁的添加新的 layer，却没有处理之前重复的 layer，短期内好像看不出大问题，但是当页面运行时间长了，会占用大量的内存，造成页面内存泄漏。
那有没有改进的方案呢？
世界上本没有路，走的人多了也便成了路。
对于解决问题的方案，同样如此一般。
方案当然有很多，但是唯有不断尝试，才能找到问题的最佳解决方案。
既然一直增加不行，那么，为了防止内存泄漏，每次增加之前，将上一个删除不就行了么？
function onDrawFrame(ctx, frame) {
// 不断地将之前添加的 layer 从 imageryLayers 中删除掉
viewer.imageryLayers.remove(gifImageLayer, true);
ctx.canvas.width = frame.width;
ctx.canvas.height = frame.height;
ctx.drawImage(frame.buffer, 0, 0);
const provider = new Cesium.SingleTileImageryProvider({
url: canvas.toDataURL(),
rectangle
});
gifImageLayer = viewer.imageryLayers.addImageryProvider(provider);
}
如上所示，改改我们的代码，看看运行以后，会出现什么结果：
cesium上贴gif2.gif
结果发现，这个效果完全不行，因为切换帧的时候，没有过渡，会导致出现闪屏的效果。
既然先移除再增加不行，那么先增加再移除是否可行呢？
按照思路，再改改我们的代码：
function onDrawFrame(ctx, frame) {
ctx.canvas.width = frame.width;
ctx.canvas.height = frame.height;
ctx.drawImage(frame.buffer, 0, 0);
const provider = new Cesium.SingleTileImageryProvider({
url: canvas.toDataURL(),
rectangle
});
let layer = viewer.imageryLayers.addImageryProvider(provider);
// 不断地将之前添加的 layer 从 imageryLayers 中删除掉
viewer.imageryLayers.remove(gifImageLayer, true);
gifImageLayer = layer;
}
没想到，再次运行我们的代码，结果比之前反而闪烁的更严重了：
cesium上贴gif3.gif
不要气馁，按照道理来说，这个思路并没有问题，问题，应该出现在，增加上一个图层和删除下一个图层这两步操作，应该并不是同步操作，而是异步的。
对于这个问题，不要着急，我们也有好的解决方案，每次增加一帧后，不再删除上一帧了，而是改成，删除倒数第二帧、倒数第三帧......
一个个试下去，不愁试不出比较理想的方案。
实际在操作的过程中，你会发现，其实，在每次删除倒数第二帧的时候，过渡就已经很自然了，但是为了效果更好，我们每次删除倒数第三帧：
function onDrawFrame(ctx, frame) {
ctx.canvas.width = frame.width;
ctx.canvas.height = frame.height;
ctx.drawImage(frame.buffer, 0, 0);
const provider = new Cesium.SingleTileImageryProvider({
url: canvas.toDataURL(),
rectangle
});
let layer = viewer.imageryLayers.addImageryProvider(provider);
// 不断地将之前添加的 layer 从 imageryLayers 中删除掉
viewer.imageryLayers.remove(gifImageLayer3, true);
gifImageLayer3 = gifImageLayer2;
gifImageLayer2 = gifImageLayer;
gifImageLayer = layer;
}
改进以后，最终的效果是这样的：
cesium上贴gif4.gif
可以看出来，效果已经很自然了。
下面是完整的 demo：
https://codepen.io/wuzhiqin/pen/xxrJBgV
精益求精
一般情况下，按照套路来说，童鞋们可能会觉得我这篇文章这就写完了。
但是，其实细细的思索一番，还有一种方式，可以把代码写的更优雅一些。
为什么要不断的移除之前的图层，再重复创建新的图层，而不将之前的图层缓存起来呢？
我们知道的是，js 里面不能手动释放内存，即使将对象设置为 null，它也会在之后的某次垃圾回收的时候才会被清除掉。如果加一层缓存，就可以减少创建新的对象，使我们的代码性能更高效。
所以，我们可以再次修改下我们的代码，将每个新图层做一个缓存：
function onDrawFrame(ctx, frame) {
let { data_offset } = frame;
// 如果有缓存，则直接将缓存的图层顶到最上面；否则，将创建新的图层，并加入缓存
if (gifImageLayerList[data_offset]) {
viewer.imageryLayers.raiseToTop(gifImageLayerList[data_offset]);
} else {
ctx.canvas.width = frame.width;
ctx.canvas.height = frame.height;
ctx.drawImage(frame.buffer, 0, 0);
const provider = new Cesium.SingleTileImageryProvider({
url: canvas.toDataURL(),
rectangle
});
let layer = viewer.imageryLayers.addImageryProvider(provider);
gifImageLayerList[data_offset] = layer;
}
}
可以看到，最后的效果其实跟之前的一般无二，但是效率比之前肯定要高一些。
https://codepen.io/wuzhiqin/pen/oNwPboM
后记
既然我们采用第二种方式，实现了我们想要的效果，那么前面的第三点思考到这里，就不用再深入下去了。
虽然，看起来，这篇文章写下来，实现这个功能好像很轻松，但是事实上，在解决这个问题的过程中，还是碰到了一些特别需要思考的问题。
- gif 贴上去，动画速度太快，怎么控制
- gif 图片太大的时候，加载速度很慢，该怎么处理
第二个问题，其实没有太好的解决方案，毕竟资源摆在那儿，靠前端不太好整出合理的解决方案。
而第一个问题其实挺有意思的，一开始，博主以为是 gifler 框架里面没有处理时间间隔的问题，于是想了很多方案，比如将 onDrawFrame 改成 async/await 函数，里面插入一个自己封装的 sleep 函数，开始 sleep 的时候，暂停动画，sleep 结束以后再恢复执行动画。这一过程，就达到了将后面的进程阻塞一段时间再切换 layer，似乎能达到比较理想的效果。
但是这个解决方案，在需要不断切换 gif 图片的时候，就失效了。切换的时候，直接就没有办法阻塞住进程，这个问题困扰了我很久，最后还是没找到太好的解决方案。
就在我以为进行不下去的时候，没想到抓到了问题的症结所在。
看了 gifler 工具的源码，才发现，gif 播放的太快，本质上是 gif 图片本身的问题。
可以看到，在源码里面，作者其实想到了这个问题，做了细致的处理的。
image.png
所以，这个问题最方便的解决方案，其实是，调整下 gif， 将 gif 每一帧播放的间隔时间拉长一些就行了。
当然，上面我采用的方案是使用 layer 的方式来解决的，其实用 polygon 或者 rectangle 也能实现。
亦或者推广一下，不用在 cesium 里面，而用在其他 webgl 框架或者 canvas 框架中，采用上面的思路，都能实现这样的效果。
网友评论