Creating custom animations

In a WebGIS application, animations do not play serious roles; however, in some web mapping applications that are focused on user experience, they can really come in handy. In the last example, called ch06_animation, we will go through the process of making our own special camera effects. The theory behind animations is very important but quite mathematical, so try to keep up with me. First, we declare some CSS rules for our custom animation control:

.ol-rocket {
    top: 20px;
    right: 20px;
}
.ol-rocket button {
    background-image: url(../../res/button_rocket.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
}

Building the control

Next, we create a simple control, which will trigger the animation process. Let's make a little revision first. Animations can be triggered by calling the map object's beforeRender method with one or more animation functions. We can provide a start time and, occasionally, source, resolution...