Merge pull request #127 from twpayne/animated-zoom

Animated zoom

src/ol/animation.js

@@ -1,10 +1,10 @@
 // FIXME works for View2D only
+// FIXME dependency on ol.View2D suppressed to prevent dependency loop
 
 goog.provide('ol.animation');
 
 goog.require('goog.fx.easing');
 goog.require('ol.PreRenderFunction');
-goog.require('ol.View2D');
 goog.require('ol.easing');
 
 
@@ -107,3 +107,36 @@ ol.animation.createSpin =
     }
   };
 };
+
+
+/**
+ * @param {number} sourceResolution Source resolution.
+ * @param {number=} opt_duration Duration.
+ * @param {number=} opt_start Start.
+ * @param {function(number): number=} opt_easingFunction Easing function.
+ * @return {ol.PreRenderFunction} Pre-render function.
+ */
+ol.animation.createZoomFrom =
+    function(sourceResolution, opt_duration, opt_start, opt_easingFunction) {
+  var start = goog.isDef(opt_start) ? opt_start : Date.now();
+  var duration = goog.isDef(opt_duration) ? opt_duration : 1000;
+  var easingFunction = goog.isDef(opt_easingFunction) ?
+      opt_easingFunction : ol.easing.linear;
+  return function(map, frameState) {
+    if (frameState.time < start) {
+      frameState.animate = true;
+      frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
+      return true;
+    } else if (frameState.time < start + duration) {
+      var delta = 1 - easingFunction((frameState.time - start) / duration);
+      var deltaResolution =
+          sourceResolution - frameState.view2DState.resolution;
+      frameState.animate = true;
+      frameState.view2DState.resolution += delta * deltaResolution;
+      frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
+      return true;
+    } else {
+      return false;
+    }
+  };
+};

src/ol/control/zoomcontrol.js

@@ -11,6 +11,12 @@ goog.require('ol.Projection');
 goog.require('ol.control.Control');
 
 
+/**
+ * @define {number} Zoom duration.
+ */
+ol.control.ZOOM_DURATION = 250;
+
+
 
 /**
  * @constructor
@@ -61,8 +67,9 @@ ol.control.Zoom.prototype.handleIn_ = function(browserEvent) {
   // prevent #zoomIn anchor from getting appended to the url
   browserEvent.preventDefault();
   var map = this.getMap();
+  map.requestRenderFrame();
   // FIXME works for View2D only
-  map.getView().zoom(map, this.delta_);
+  map.getView().zoom(map, this.delta_, undefined, ol.control.ZOOM_DURATION);
 };
 
 
@@ -74,6 +81,7 @@ ol.control.Zoom.prototype.handleOut_ = function(browserEvent) {
   // prevent #zoomOut anchor from getting appended to the url
   browserEvent.preventDefault();
   var map = this.getMap();
+  map.requestRenderFrame();
   // FIXME works for View2D only
-  map.getView().zoom(map, -this.delta_);
+  map.getView().zoom(map, -this.delta_, undefined, ol.control.ZOOM_DURATION);
 };

src/ol/easing.js

@@ -1,6 +1,15 @@
 goog.provide('ol.easing');
 
 
+/**
+ * @param {number} t Input between 0 and 1.
+ * @return {number} Output between 0 and 1.
+ */
+ol.easing.linear = function(t) {
+  return t;
+};
+
+
 /**
  * @param {number} t Input between 0 and 1.
  * @return {number} Output between 0 and 1.

src/ol/interaction/keyboardzoominteraction.js

@@ -8,6 +8,12 @@ goog.require('ol.View2D');
 goog.require('ol.interaction.Interaction');
 
 
+/**
+ * @define {number} Zoom duration.
+ */
+ol.interaction.KEYBOARD_ZOOM_DURATION = 100;
+
+
 
 /**
  * @constructor
@@ -31,10 +37,11 @@ ol.interaction.KeyboardZoom.prototype.handleMapBrowserEvent =
     if (charCode == '+'.charCodeAt(0) || charCode == '-'.charCodeAt(0)) {
       var map = mapBrowserEvent.map;
       var delta = (charCode == '+'.charCodeAt(0)) ? 4 : -4;
+      map.requestRenderFrame();
       // FIXME works for View2D only
       var view = map.getView();
       goog.asserts.assert(view instanceof ol.View2D);
-      view.zoom(map, delta);
+      view.zoom(map, delta, undefined, ol.interaction.KEYBOARD_ZOOM_DURATION);
       keyEvent.preventDefault();
       mapBrowserEvent.preventDefault();
     }

src/ol/view2d.js

@@ -12,6 +12,7 @@ goog.require('ol.Projection');
 goog.require('ol.ResolutionConstraint');
 goog.require('ol.RotationConstraint');
 goog.require('ol.View');
+goog.require('ol.animation');
 
 
 /**
@@ -289,9 +290,16 @@ ol.View2D.prototype.zoom_ = function(map, resolution, opt_anchor) {
  * @param {ol.Map} map Map.
  * @param {number} delta Delta from previous zoom level.
  * @param {ol.Coordinate=} opt_anchor Anchor coordinate.
+ * @param {number=} opt_duration Duration.
  */
-ol.View2D.prototype.zoom = function(map, delta, opt_anchor) {
+ol.View2D.prototype.zoom = function(map, delta, opt_anchor, opt_duration) {
-  var resolution = this.constraints_.resolution(this.getResolution(), delta);
+  var currentResolution = this.getResolution();
+  if (goog.isDef(currentResolution) && goog.isDef(opt_duration)) {
+    map.requestRenderFrame();
+    map.addPreRenderFunction(ol.animation.createZoomFrom(
+        currentResolution, opt_duration));
+  }
+  var resolution = this.constraints_.resolution(currentResolution, delta);
   this.zoom_(map, resolution, opt_anchor);
 };