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、成果展示

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

Android 高清加载巨图方案拒绝压缩图片
Android 高清加载巨图方案拒绝压缩图片转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/49300989: 本文出自: ...
高清加载巨图方案-拒绝压缩图片
Android 高清加载巨图方案拒绝压缩图片转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/49300989: 本文出自:[张 ...
Fresco本地加载【圆角，圆形，比例，渐进，加载动图】
导入依赖 implementation 'com.facebook.fresco:fresco:0.13.0'//fresco依赖implementation 'com.facebook.fresco ...
Android_高清加载巨图方案拒绝压缩图片
原文出处:http://blog.csdn.net/lmj623565791/article/details/49300989 一.概述距离上一篇博客有段时间没更新了,主要是最近有些私事导致的,那么 ...
Android 高清加载巨图方案拒绝压缩图片避免oom
一.概述距离上一篇博客有段时间没更新了,主要是最近有些私事导致的,那么就先来一篇简单一点的博客脉动回来. 对于加载图片,大家都不陌生,一般为了尽可能避免OOM都会按照如下做法: 对于图片显示:根据需 ...
python 加载动图_在浏览器中使用TensorFlow.js和Python构建机器学习模型（附代码）...
大数据文摘授权转载自数据派THU 作者:MOHD SANAD ZAKI RIZVI 本文主要介绍了: TensorFlow.js (deeplearn.js)使我们能够在浏览器中构建机器学习和深度学习 ...
vue +websocket 加载动图并实现暂停与播放
需求一:页面有小动图点击放大并实现暂停与播放 1.页面调用+点击放大以及调用组件时实现标题效果 <div class="" v-show="WRFgif" ...
加载动图的实现及属性动画的使用
昨天在一个APP上面看见一个吃东西的加载图,感觉挺简单的,于是打算去实现.但是在实现的过程中踩了一些坑,那个图也不能找到做参考了,于是自己琢磨了一个下午,终于实现了效果.因此这里将整个过程做一个复盘, ...
推荐一个加载动图的网站loading.io
推荐一个非常好玩的loading gif的资源网站:https://loading.io/ 里面有各种loading的动图. 转载于:https://www.cnblogs.com/zifeiy/p/ ...

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

1、项目场景

2、解决方案

3、编码实现

4、成果展示

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

最新文章

热门文章