Merge pull request #669 from twpayne/more-animations

Minor changes to the animation example

examples/animation.html

@@ -30,15 +30,20 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
-          <button id="rotate-left"><i class="icon-arrow-left"></i></button>
-          <button>Rotate</button>
-          <button id="rotate-right"><i class="icon-arrow-right"></i></button>
         </div>
-        <button id="pan-to-london">Pan to London</button>
+      </div>
-        <button id="elastic-to-moscow">Elastic to Moscow</button>
+
-        <button id="bounce-to-istanbul">Bounce to Istanbul</button>
+      <div class="row-fluid">
-        <button id="spin-to-rome">Spin to Rome</button>
+        <div class="span12">
-        <button id="fly-to-bern">Fly to Bern</button>
+          <button id="rotate-left"><i class="icon-arrow-left"></i></button>
+          <button id="rotate-right"><i class="icon-arrow-right"></i></button>
+          <button id="pan-to-london">Pan to London</button>
+          <button id="elastic-to-moscow">Elastic to Moscow</button>
+          <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>
+        </div>
       </div>
 
       <div class="row-fluid">

examples/animation.js

@@ -18,6 +18,8 @@ var rome = ol.projection.transform(
     [12.5, 41.9], 'EPSG:4326', 'EPSG:3857');
 var bern = ol.projection.transform(
     [7.4458, 46.95], 'EPSG:4326', 'EPSG:3857');
+var madrid = ol.projection.transform(
+    [-3.683333, 40.4], 'EPSG:4326', 'EPSG:3857');
 
 var view = new ol.View2D({
   // the view's initial state
@@ -37,7 +39,6 @@ var map = new ol.Map({
   view: view
 });
 
-
 var rotateLeft = document.getElementById('rotate-left');
 rotateLeft.addEventListener('click', function() {
   var rotateLeft = ol.animation.rotate({
@@ -123,3 +124,26 @@ flyToBern.addEventListener('click', function() {
   map.addPreRenderFunctions([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: 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.addPreRenderFunctions([pan, bounce, rotate]);
+  view.setCenter(madrid);
+}, false);