Cesium自定义动画 谁借莪1个温暖的怀抱¢ 2022-12-08 05:10 258阅读 0赞 在Cesium中,我想做一个半径动态增大和缩小的圆。一开始我考虑使用`requestAnimationFrame`,不断的调整半径的大小,也就是直接更改`Ellipsoid`对象的长短轴大小。但是效果不理想,半径调整后这个圆会消失,然后出现调整之后的圆,给人的感觉就是“卡顿”。 直到我看到了这篇文章 [Cesium的Property机制总结][Cesium_Property], 完整了这个功能。 ### 效果图 ### ![在这里插入图片描述][2020091809515985.gif_pic_center] ### 实现原理 ### 1. 动态圆 `semiMinorAxis`和`semiMajorAxis`指定一个`CallbackProperty`对象,并返回半径大小。由于要做的是要给圆,长短轴相同,可以抽出一个共同的方法`getRadius()`。 在`CallbackProperty`的回调函数中,不断的调整半径的大小,这个就和我们平时常用的`requestAnimationFrame`一样了。 2. 颜色渐变 使用`ColorMaterialProperty`,根据半径的大小,调整透明度。半径越大,透明度越高。 ### 源码 ### var r = 0, up = true const pos = Cesium.Cartesian3.fromDegrees([120.191, 30.255, 100]) const maxRadius = 50 const minRadius = 10 const step = 1 function getRadius() { return new Cesium.CallbackProperty(function (time, result) { if (up) { r += step } else { r -= step } if (r >= maxRadius) { up = false } if (r <= minRadius) { up = true } return r }, false) } viewer.entities.add({ position: pos, ellipse: { semiMinorAxis: getRadius(), semiMajorAxis: getRadius(), material: new Cesium.ColorMaterialProperty( new Cesium.CallbackProperty(function (time, result) { return new Cesium.Color(1, 0, 0, 1 - r / maxRadius) }) ), height: this.target[2], outline: false } }) ### 其他 ### 如果你还有什么问题: 1. 查看 [Cesium的Property机制总结][Cesium_Property],这个对动画的描述很全面。 2. 在评论区发言,我会尽量提供我所知道的答案。 [Cesium_Property]: https://zhuanlan.zhihu.com/p/50534090 [2020091809515985.gif_pic_center]: /images/20221123/52537fd77317447ca10c38f4d8f004ef.png
还没有评论,来说两句吧...