OpenLayers: Animate fitExtent call by passing extent

Question

How can you animate the fitExtent call, so the map slowly zooms and scrolls to the newly set extent.

What I have is similar to this answer: https://stackoverflow.com/a/23401232/639035

var source = new ol.source.Vector();
...

map.getView().fitExtent(source.getExtent(), map.getSize());

Now I have a "button", which sets a new fitExtent, where I want to have a smooth animation.

What I found so far: OpenLayers Animation example http://openlayers.org/en/v3.1.0/examples/animation.html

However this doesn't use ol.Extent and fit(extent

Answer 1

You need pan and zoom to make the animation work. The pan animation may not be so obvious but, if you don't use it, the view will move to the center of the extent and then starts zooming out.

Here is a working fiddle you can try:

http://jsfiddle.net/bttmprm2/1/

Notice that I've manually set the extent, that's because 'getExtent()' function is only available for vector sources.

Edit: This answer is only for OpenLayers 3. The question is tagged as OL2 but the code example in the question and the link to the documentation refers to OL3.