The best way to understand these animation functions is to try them out. Start from the previous example:
First, add some buttons to trigger the animation effects:
<button onclick="doBounce(london);">Bounce To London</button> <button onclick="doBounce(rome);">Bounce To Rome</button <button onclick="doPan(london);">Pan To London</button> <button onclick="doPan(rome);">Pan To Rome</button> <button onclick="doRotate();">Rotate</button> <button onclick="doZoom(2);">Zoom Out</button> <button onclick="doZoom(0.5);">Zoom In</button>
These are regular HTML buttons that call a function when clicked. We'll add the functions in a moment.
Next, add a new location for
Rome
, next to the line where we defined the location ofLondon
:var rome = ol.proj.transform([12.5, 41.9], 'EPSG:4326', 'EPSG:3857');
Now, we'll add functions at the end of our
<script>
tag to handle the button clicks...