Update the animation example

examples/animation.html

@@ -3,8 +3,8 @@ layout: example.html
 title: View Animation
 shortdesc: Demonstrates animated pan, zoom, and rotation.
 docs: >
-  This example shows how to use the beforeRender function on the Map to run one
-  or more animations.
+  This example shows how to use the <code>view.animate()</code> method to run
+  one or more animations.
 tags: "animation"
 ---
 <div id="map" class="map"></div>
@@ -16,4 +16,3 @@ tags: "animation"
 <button id="bounce-to-istanbul">Bounce to Istanbul</button>
 <button id="spin-to-rome">Spin to Rome</button>
 <button id="fly-to-bern">Fly to Bern</button>
-<button id="spiral-to-madrid">Spiral to Madrid</button>

examples/animation.js

@@ -1,7 +1,5 @@
 goog.require('ol.Map');
 goog.require('ol.View');
-goog.require('ol.animation');
-goog.require('ol.control');
 goog.require('ol.layer.Tile');
 goog.require('ol.proj');
 goog.require('ol.source.OSM');
@@ -39,15 +37,14 @@ var moscow = ol.proj.fromLonLat([37.6178, 55.7517]);
 var istanbul = ol.proj.fromLonLat([28.9744, 41.0128]);
 var rome = ol.proj.fromLonLat([12.5, 41.9]);
 var bern = ol.proj.fromLonLat([7.4458, 46.95]);
-var madrid = ol.proj.fromLonLat([-3.683333, 40.4]);
 
 var view = new ol.View({
-  // the view's initial state
   center: istanbul,
   zoom: 6
 });
 
 var map = new ol.Map({
+  target: 'map',
   layers: [
     new ol.layer.Tile({
       preload: 4,
@@ -57,131 +54,70 @@ var map = new ol.Map({
   // Improve user experience by loading tiles while animating. Will make
   // animations stutter on mobile or slow devices.
   loadTilesWhileAnimating: true,
-  target: 'map',
-  controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
-      collapsible: false
-    })
-  }),
   view: view
 });
 
-var rotateLeft = document.getElementById('rotate-left');
-rotateLeft.addEventListener('click', function() {
-  var rotateLeft = ol.animation.rotate({
-    duration: 2000,
-    rotation: -4 * Math.PI
+document.getElementById('rotate-left').addEventListener('click', function() {
+  view.animate({
+    rotation: view.getRotation() + Math.PI / 2
   });
-  map.beforeRender(rotateLeft);
-}, false);
-var rotateRight = document.getElementById('rotate-right');
-rotateRight.addEventListener('click', function() {
-  var rotateRight = ol.animation.rotate({
-    duration: 2000,
-    rotation: 4 * Math.PI
-  });
-  map.beforeRender(rotateRight);
-}, false);
+});
 
-var rotateAroundRome = document.getElementById('rotate-around-rome');
-rotateAroundRome.addEventListener('click', function() {
-  var currentRotation = view.getRotation();
-  var rotateAroundRome = ol.animation.rotate({
-    anchor: rome,
-    duration: 1000,
-    rotation: currentRotation
+document.getElementById('rotate-right').addEventListener('click', function() {
+  view.animate({
+    rotation: view.getRotation() - Math.PI / 2
   });
-  map.beforeRender(rotateAroundRome);
-  view.rotate(currentRotation + (Math.PI / 2), rome);
-}, false);
+});
 
-var panToLondon = document.getElementById('pan-to-london');
-panToLondon.addEventListener('click', function() {
-  var pan = ol.animation.pan({
+document.getElementById('rotate-around-rome').addEventListener('click', function() {
+  view.animate({
+    rotation: view.getRotation() + 2 * Math.PI,
+    rotationAnchor: rome
+  });
+});
+
+document.getElementById('pan-to-london').addEventListener('click', function() {
+  view.animate({
+    center: london,
+    duration: 2000
+  });
+});
+
+document.getElementById('elastic-to-moscow').addEventListener('click', function() {
+  view.animate({
+    center: moscow,
     duration: 2000,
-    source: /** @type {ol.Coordinate} */ (view.getCenter())
+    easing: elastic
   });
-  map.beforeRender(pan);
-  view.setCenter(london);
-}, false);
+});
 
-var elasticToMoscow = document.getElementById('elastic-to-moscow');
-elasticToMoscow.addEventListener('click', function() {
-  var pan = ol.animation.pan({
+document.getElementById('bounce-to-istanbul').addEventListener('click', function() {
+  view.animate({
+    center: istanbul,
     duration: 2000,
-    easing: elastic,
-    source: /** @type {ol.Coordinate} */ (view.getCenter())
+    easing: bounce
   });
-  map.beforeRender(pan);
-  view.setCenter(moscow);
-}, false);
+});
 
-var bounceToIstanbul = document.getElementById('bounce-to-istanbul');
-bounceToIstanbul.addEventListener('click', function() {
-  var pan = ol.animation.pan({
-    duration: 2000,
-    easing: bounce,
-    source: /** @type {ol.Coordinate} */ (view.getCenter())
-  });
-  map.beforeRender(pan);
-  view.setCenter(istanbul);
-}, false);
-
-var spinToRome = document.getElementById('spin-to-rome');
-spinToRome.addEventListener('click', function() {
-  var duration = 2000;
-  var start = +new Date();
-  var pan = ol.animation.pan({
-    duration: duration,
-    source: /** @type {ol.Coordinate} */ (view.getCenter()),
-    start: start
-  });
-  var rotate = ol.animation.rotate({
-    duration: duration,
+document.getElementById('spin-to-rome').addEventListener('click', function() {
+  view.animate({
+    center: rome,
     rotation: 2 * Math.PI,
-    start: start
+    duration: 2000
   });
-  map.beforeRender(pan, rotate);
-  view.setCenter(rome);
-}, false);
+});
 
-var flyToBern = document.getElementById('fly-to-bern');
-flyToBern.addEventListener('click', function() {
+document.getElementById('fly-to-bern').addEventListener('click', function() {
   var duration = 2000;
-  var start = +new Date();
-  var pan = ol.animation.pan({
-    duration: duration,
-    source: /** @type {ol.Coordinate} */ (view.getCenter()),
-    start: start
+  view.animate({
+    center: bern,
+    duration: duration
   });
-  var bounce = ol.animation.bounce({
-    duration: duration,
-    resolution: 4 * view.getResolution(),
-    start: start
+  view.animate({
+    zoom: view.getZoom() - 0.5,
+    duration: duration / 2
+  }, {
+    zoom: view.getZoom() + 1,
+    duration: duration / 2
   });
-  map.beforeRender(pan, bounce);
-  view.setCenter(bern);
-}, false);
-
-var spiralToMadrid = document.getElementById('spiral-to-madrid');
-spiralToMadrid.addEventListener('click', function() {
-  var duration = 2000;
-  var start = +new Date();
-  var pan = ol.animation.pan({
-    duration: duration,
-    source: /** @type {ol.Coordinate} */ (view.getCenter()),
-    start: start
-  });
-  var bounce = ol.animation.bounce({
-    duration: duration,
-    resolution: 2 * view.getResolution(),
-    start: start
-  });
-  var rotate = ol.animation.rotate({
-    duration: duration,
-    rotation: -4 * Math.PI,
-    start: start
-  });
-  map.beforeRender(pan, bounce, rotate);
-  view.setCenter(madrid);
-}, false);
+});