Cesium自定义动画

在Cesium中，我想做一个半径动态增大和缩小的圆。一开始我考虑使用requestAnimationFrame，不断的调整半径的大小，也就是直接更改Ellipsoid对象的长短轴大小。但是效果不理想，半径调整后这个圆会消失，然后出现调整之后的圆，给人的感觉就是“卡顿”。

直到我看到了这篇文章 Cesium的Property机制总结， 完整了这个功能。

效果图

实现原理

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机制总结，这个对动画的描述很全面。
2. 在评论区发言，我会尽量提供我所知道的答案。