The panning and zoom effects are very important actions that are related to the user navigation experience. In Chapter 1, Web Mapping Basics, the Moving around the map view recipe shows you how you can control and animate the way the map can be panned, zoomed, and rotated.
By default, OpenLayers animates the zoom transitions. In order to customize this ourselves, OpenLayers comes with a series of different animation methods that are available from
ol.animation object. For this recipe, we'll use the
ol.animation.zoom methods to customize the zoom effects.
We will have a panel on the right so that you can choose the animation-easing algorithm, the duration and whether or not to use the bounce effect.
Here's a screenshot of what we'll end up with (the source code can be found in