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

JavaScript017

cesium加载动图方案三:通过apng-js库实现,第1张

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

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

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

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

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

完整demo可参见 practicalCesiumDemos 中loadApng。

出现这样的情况是这样的:

你的ajax-loader.gif文件没有放到项目下 会显示404,地址不对

或者 你的js或者css引用 ajax-loader.gif地址错误,导致加载动画不显示

你可以把ajax-loader.gif放入你项目正确的目录下,css或js地址引用正确

这样你的ajax-loader.gif动画效果就可以正常显示