首先,查阅相关资料,容易得知:动图的格式有很多种,主要有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动画效果就可以正常显示