在Cesium中,我想做一个半径动态增大和缩小的圆。一开始我考虑使用requestAnimationFrame
,不断的调整半径的大小,也就是直接更改Ellipsoid
对象的长短轴大小。但是效果不理想,半径调整后这个圆会消失,然后出现调整之后的圆,给人的感觉就是“卡顿”。
直到我看到了这篇文章 Cesium的Property机制总结, 完整了这个功能。
效果图
实现原理
-
动态圆
semiMinorAxis
和semiMajorAxis
指定一个CallbackProperty
对象,并返回半径大小。由于要做的是要给圆,长短轴相同,可以抽出一个共同的方法getRadius()
。 在CallbackProperty
的回调函数中,不断的调整半径的大小,这个就和我们平时常用的requestAnimationFrame
一样了。 -
颜色渐变
使用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
}
})
其他
如果你还有什么问题:
- 查看 Cesium的Property机制总结,这个对动画的描述很全面。
- 在评论区发言,我会尽量提供我所知道的答案。