Cesium handle viewer animation playing/pause

There is a few ways that i see to handle playing/pause animation in Cesium. First - is to bind event listeners to all buttons that could start/stop animation, like this:

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

But I think it is a little brutal.

Another way is to use cesium clock and its onTick event

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

This decision would be good if not lodash in the attribute title, which says that the developers of cesium let us know, not to use this.

So, Im interested what is really proper way to handle animation playing/pause in Cesium.

Solution

In addition to the Clock, Cesium Viewer also maintains a ClockViewModel, which is the UI binding for the clock. ClockViewModel has a Boolean property called shouldAnimate that indicates whether the clock is currently animating. The documentation for shouldAnimate has a little note at the end that says:

This property is observable.

Internally, Cesium is using Knockout observables to bind view models to the UI. So we need to go get that observable, and observe it.

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.');
    }
});

In addition to this, you can add your own play/pause controls of any type, that write a Boolean value to shouldAnimate, like this:

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

When doing this, your own play/pause controls will do more than just control the play/pause state, they will affect the visual highlights of the original play/pause controls as well, because those controls are also listening to the observable. Thanks to Knockout, the subscription only fires when the state actually changes, so a user repeatedly clicking the play button will not generate multiple callbacks.