Cesium自定义动画

谁借莪１个温暖的怀抱￠ 2022-12-08 05:10 293阅读 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