Openlayers 3 ol.animation.pan with timeout? - openlayers-3

Question

I have created a map with ol3 and added ol.animation to "fly" from one city to another. The Animation should start some seconds after clicking the start button. So, it should work like this:
The map is centered on a point called "Eifel"
Click start-button
After three seconds the flight to "Berlin" starts (it will take 2 seconds)
Stay in Berlin for 1 second and then fly to "Stuttgart"
The following code nearly works, but it switches to "Stuttgart" directly. I think the problem ist the "map.getView().setCenter(Stuttgart);" at the End. How can I make it work as expected?
// Klick auf Button -> Start
var startflight = document.getElementById('start-flight');
// Flug 1: Eifel > Berlin
startflight.addEventListener('click', function() {
var duration = 2000;
var start = (new Date()).getTime()+3000;
var pan = ol.animation.pan({
source: (view.getCenter(Eifel)),
start: start
});
map.beforeRender(pan);
map.getView().setCenter(Berlin);
},
true);
// Flug 2: Berlin > Stuttgart
startflight.addEventListener('click', function() {
var duration = 2000;
var start = (new Date()).getTime()+6000;
var pan = ol.animation.pan({
source: (view.getCenter(Berlin)),
start: start
});
map.beforeRender(pan);
map.getView().setCenter(Stuttgart);
},
true);
Looking forward to your answers,
jsc

Answer 1

You could do something like this:
startflight.addEventListener('click', function() {
var duration = 2000;
var start = Date.now() + 3000; // use Date.now()
var pan = ol.animation.pan({
duration: duration,
source: (view.getCenter(Eifel)),
start: start
});
map.beforeRender(pan);
map.getView().setCenter(Berlin);
}, true);
But this will fire immediately when you render, after that setCenter() call is made. So the map will just go blank and then render. Probably a better approach would be to wrap the whole thing in a setTimeout.
startflight.addEventListener('click', function() {
var duration = 2000;
setTimeout(function () {
var pan = ol.animation.pan({
duration: duration,
source: view.getCenter()
});
map.beforeRender(pan);
map.getView().setCenter(Berlin);
}, 3000);
}, true);
If you want to then fly to another city, you can just add another panning function. I would say that if you have a lot of these multi-city pans you'll want to abstract this some more though.