pause animation by Clock settings or Event settings

CesiumJS
1

Good evening all,

I have reached my last big piece (I hope) of the project for history nuts (War of Movement). I want to control the ANIMATION TIME. Perhaps someone can point me in the right direction?

I want to add time periods so that the animation pauses at the end of a period and waits for an input action before continuing.

For example, I would like the above animation to “pause” (and wait for some user interaction) at the end of several time periods Concentration (up to August 15), Battles of the Frontier (to August 24), Pursuit and Counterattack (September 10), Race to the Sea (October 20), and Trench Warfare (October 31). Of course these pauses should come with html updates/camera events/etc to add context to the events on screen.

My first solution involves setting the timeInterval and then rebuilding the viewer.clock settings for each time period. It doesn’t feel good.

My second strategy creates an event listener for each date, at which time viewer.clock.shouldAnimate is set to false. It is going nowhere.

var myListener = function(clock){
if(clock.currentTime.equals(‘1914-08-15Z00:00:00T’)){
stopAnimation();
}
}

viewer.clock.onTick.addEventListener(myListener);

function stopAnimation() {

viewer.clock.shouldAnimate = false;

}

``

Which of these is the right approach (or a third)? Thoughts about this eventListener setup?

Best Friday, erik

2

Hello Erik,

Your app looks like it’s coming along great!

I think your event listener approach seems fine.

To pause the animation, you can do

viewer.animation.viewModel.pauseViewModel.command();

That will hit the pause button on the Animation widget.

Hope this helps!

Hannah