Question

我认为有几种方法可以处理Cesium中的播放/暂停动画。首先 - 将事件侦听器绑定到可以启动/停止动画的所有按钮，如下所示：

let ctrls = document.getElementsByClassName("CONTROLS_THAT_COULD_CHANGE_ANIMATING_STATE");
Array.from(classname).forEach(function(ctrls) {
  element.addEventListener('click', () => {
    /* handle change animating state */
  });
});

但我认为这有点残酷。

另一种方法是使用cesium clock及其onTick事件

viewer.clock.onTick.addEventListener((clock) => {
  console.log(clock._shouldAnimate);
});

如果不是属性标题中的lodash，这个决定将是好的，该标题说铯的开发者告诉我们，不要使用它。

所以，我很感兴趣在Cesium处理动画播放/暂停的真正方法。

Answer 1

除了Clock之外，Cesium Viewer还维护一个ClockViewModel，它是时钟的UI绑定。 ClockViewModel有一个名为shouldAnimate的布尔属性，用于指示时钟当前是否为动画。 documentation for shouldAnimate最后有一点说明：

此属性是可观察的。

在内部，Cesium使用Knockout observables将视图模型绑定到UI。所以我们需要去观察它，观察它。

Live Demo - Sandcastle

var viewer = new Cesium.Viewer('cesiumContainer');

Cesium.knockout.getObservable(viewer.clockViewModel,
                              'shouldAnimate').subscribe(function(isAnimating) {
    if (isAnimating) {
        console.log('Cesium clock is animating.');
    } else {
        console.log('Cesium clock is paused.');
    }
});

除此之外，您还可以添加自己的任何类型的播放/暂停控件，将布尔值写入shouldAnimate，如下所示：

function onMyCustomPlayButtonClicked() {
    viewer.clockViewModel.shouldAnimate = true;
}

执行此操作时，您自己的播放/暂停控件不仅可以控制播放/暂停状态，还会影响原始播放/暂停控件的视觉高光，因为这些控件也会监听可观察的。感谢Knockout，订阅仅在状态实际更改时触发，因此用户反复单击播放按钮将不会生成多个回调。

铯处理查看器动画播放/暂停

1 个答案: