Merge pull request #1100 from twpayne/animation-duration-control

Animation duration control

src/objectliterals.jsdoc

@@ -217,6 +217,7 @@
 
 /**
  * @typedef {Object} ol.control.ZoomOptions
+ * @property {number|undefined} duration Animation duration. Default is 250ms.
  * @property {string|undefined} className CSS class name. Default is `ol-zoom`.
  * @property {number|undefined} delta The zoom delta applied on each click.
  * @property {Element|undefined} target Target.
@@ -239,6 +240,7 @@
 
 /**
  * @typedef {Object} ol.interaction.DoubleClickZoomOptions
+ * @property {number|undefined} duration Animation duration. Default is 250ms.
  * @property {number|undefined} delta The zoom delta applied on each double
  *     click, default is 1.
  */
@@ -291,6 +293,7 @@
  * @property {boolean|undefined} touchRotate Whether touch rotate is desired.
  * @property {boolean|undefined} touchZoom Whether touch zoom is desired.
  * @property {number|undefined} zoomDelta Zoom delta.
+ * @property {number|undefined} zoomDuration Zoom duration.
  */
 
 /**
@@ -304,12 +307,18 @@
 
 /**
  * @typedef {Object} ol.interaction.KeyboardZoomOptions
+ * @property {number|undefined} duration Animation duration. Default is 100ms.
  * @property {ol.interaction.ConditionType|undefined} condition A conditional
  *     modifier (i.e. Shift key) that determines if the interaction is active
  *     or not, default is no modifiers.
  * @property {number|undefined} delta The amount to zoom on each key press.
  */
 
+/**
+ * @typedef {Object} ol.interaction.MouseWheelZoomOptions
+ * @property {number|undefined} duration Animation duration. Default is 250ms.
+ */
+
 /**
  * @typedef {Object} ol.interaction.SelectOptions
  * @property {ol.interaction.ConditionType|undefined} addCondition A conditional
@@ -335,6 +344,11 @@
  * @property {number|undefined} threshold Minimal angle to start a rotation.
  */
 
+/**
+ * @typedef {Object} ol.interaction.TouchZoomOptions
+ * @property {number|undefined} duration Animation duration. Default is 400ms.
+ */
+
 /**
  * @typedef {Object} ol.layer.BaseOptions
  * @property {number|undefined} brightness Brightness.

src/ol/control/zoomcontrol.js

@@ -12,12 +12,6 @@ goog.require('ol.css');
 goog.require('ol.easing');
 
 
-/**
- * @define {number} Zoom duration.
- */
-ol.control.ZOOM_DURATION = 250;
-
-
 
 /**
  * Create a new control with 2 buttons, one for zoom in and one for zoom out.
@@ -62,6 +56,12 @@ ol.control.Zoom = function(opt_options) {
     target: options.target
   });
 
+  /**
+   * @type {number}
+   * @private
+   */
+  this.duration_ = goog.isDef(options.duration) ? options.duration : 250;
+
 };
 goog.inherits(ol.control.Zoom, ol.control.Control);
 
@@ -79,11 +79,13 @@ ol.control.Zoom.prototype.zoomByDelta_ = function(delta, browserEvent) {
   var view = map.getView().getView2D();
   var currentResolution = view.getResolution();
   if (goog.isDef(currentResolution)) {
-    map.beforeRender(ol.animation.zoom({
+    if (this.duration_ > 0) {
-      resolution: currentResolution,
+      map.beforeRender(ol.animation.zoom({
-      duration: ol.control.ZOOM_DURATION,
+        resolution: currentResolution,
-      easing: ol.easing.easeOut
+        duration: this.duration_,
-    }));
+        easing: ol.easing.easeOut
+      }));
+    }
     var newResolution = view.constrainResolution(currentResolution, delta);
     view.setResolution(newResolution);
   }

src/ol/interaction/doubleclickzoominteraction.js

@@ -8,12 +8,6 @@ goog.require('ol.MapBrowserEvent.EventType');
 goog.require('ol.interaction.Interaction');
 
 
-/**
- * @define {number} Animation duration.
- */
-ol.interaction.DOUBLECLICKZOOM_ANIMATION_DURATION = 250;
-
-
 
 /**
  * Allows the user to zoom by double-clicking on the map.
@@ -34,6 +28,12 @@ ol.interaction.DoubleClickZoom = function(opt_options) {
 
   goog.base(this);
 
+  /**
+   * @private
+   * @type {number}
+   */
+  this.duration_ = goog.isDef(options.duration) ? options.duration : 250;
+
 };
 goog.inherits(ol.interaction.DoubleClickZoom, ol.interaction.Interaction);
 
@@ -52,8 +52,8 @@ ol.interaction.DoubleClickZoom.prototype.handleMapBrowserEvent =
     var delta = browserEvent.shiftKey ? -this.delta_ : this.delta_;
     // FIXME works for View2D only
     var view = map.getView().getView2D();
-    ol.interaction.Interaction.zoomByDelta(map, view, delta, anchor,
+    ol.interaction.Interaction.zoomByDelta(
-        ol.interaction.DOUBLECLICKZOOM_ANIMATION_DURATION);
+        map, view, delta, anchor, this.duration_);
     mapBrowserEvent.preventDefault();
     stopEvent = true;
   }

src/ol/interaction/interaction.js

@@ -35,7 +35,7 @@ ol.interaction.Interaction.pan = function(
     map, view, delta, opt_duration) {
   var currentCenter = view.getCenter();
   if (goog.isDef(currentCenter)) {
-    if (goog.isDef(opt_duration)) {
+    if (goog.isDef(opt_duration) && opt_duration > 0) {
       map.beforeRender(ol.animation.pan({
         source: currentCenter,
         duration: opt_duration,
@@ -77,7 +77,7 @@ ol.interaction.Interaction.rotateWithoutConstraints =
     var currentRotation = view.getRotation();
     var currentCenter = view.getCenter();
     if (goog.isDef(currentRotation) && goog.isDef(currentCenter) &&
-        goog.isDef(opt_duration)) {
+        goog.isDef(opt_duration) && opt_duration > 0) {
       map.beforeRender(ol.animation.rotate({
         rotation: currentRotation,
         duration: opt_duration,
@@ -156,7 +156,7 @@ ol.interaction.Interaction.zoomWithoutConstraints =
     var currentResolution = view.getResolution();
     var currentCenter = view.getCenter();
     if (goog.isDef(currentResolution) && goog.isDef(currentCenter) &&
-        goog.isDef(opt_duration)) {
+        goog.isDef(opt_duration) && opt_duration > 0) {
       map.beforeRender(ol.animation.zoom({
         resolution: currentResolution,
         duration: opt_duration,

src/ol/interaction/interactiondefaults.js

@@ -45,7 +45,8 @@ ol.interaction.defaults = function(opt_options) {
       options.doubleClickZoom : true;
   if (doubleClickZoom) {
     interactions.push(new ol.interaction.DoubleClickZoom({
-      delta: options.zoomDelta
+      delta: options.zoomDelta,
+      duration: options.zoomDuration
     }));
   }
 
@@ -66,7 +67,9 @@ ol.interaction.defaults = function(opt_options) {
   var touchZoom = goog.isDef(options.touchZoom) ?
       options.touchZoom : true;
   if (touchZoom) {
-    interactions.push(new ol.interaction.TouchZoom());
+    interactions.push(new ol.interaction.TouchZoom({
+      duration: options.zoomDuration
+    }));
   }
 
   var dragPan = goog.isDef(options.dragPan) ?
@@ -82,14 +85,17 @@ ol.interaction.defaults = function(opt_options) {
   if (keyboard) {
     interactions.push(new ol.interaction.KeyboardPan());
     interactions.push(new ol.interaction.KeyboardZoom({
-      delta: options.zoomDelta
+      delta: options.zoomDelta,
+      duration: options.zoomDuration
     }));
   }
 
   var mouseWheelZoom = goog.isDef(options.mouseWheelZoom) ?
       options.mouseWheelZoom : true;
   if (mouseWheelZoom) {
-    interactions.push(new ol.interaction.MouseWheelZoom());
+    interactions.push(new ol.interaction.MouseWheelZoom({
+      duration: options.zoomDuration
+    }));
   }
 
   var shiftDragZoom = goog.isDef(options.shiftDragZoom) ?

src/ol/interaction/keyboardzoominteraction.js

@@ -9,12 +9,6 @@ goog.require('ol.interaction.Interaction');
 goog.require('ol.interaction.condition');
 
 
-/**
- * @define {number} Zoom duration.
- */
-ol.interaction.KEYBOARD_ZOOM_DURATION = 100;
-
-
 
 /**
  * Allows the user to zoom the map using keyboard + and -.
@@ -41,6 +35,12 @@ ol.interaction.KeyboardZoom = function(opt_options) {
    */
   this.delta_ = goog.isDef(options.delta) ? options.delta : 1;
 
+  /**
+   * @private
+   * @type {number}
+   */
+  this.duration_ = goog.isDef(options.duration) ? options.duration : 100;
+
 };
 goog.inherits(ol.interaction.KeyboardZoom, ol.interaction.Interaction);
 
@@ -62,8 +62,8 @@ ol.interaction.KeyboardZoom.prototype.handleMapBrowserEvent =
       map.requestRenderFrame();
       // FIXME works for View2D only
       var view = map.getView().getView2D();
-      ol.interaction.Interaction.zoomByDelta(map, view, delta, undefined,
+      ol.interaction.Interaction.zoomByDelta(
-          ol.interaction.KEYBOARD_ZOOM_DURATION);
+          map, view, delta, undefined, this.duration_);
       mapBrowserEvent.preventDefault();
       stopEvent = true;
     }

src/ol/interaction/mousewheelzoominteraction.js

@@ -10,12 +10,6 @@ goog.require('ol.Coordinate');
 goog.require('ol.interaction.Interaction');
 
 
-/**
- * @define {number} Animation duration.
- */
-ol.interaction.MOUSEWHEELZOOM_ANIMATION_DURATION = 250;
-
-
 /**
  * @define {number} Maximum delta.
  */
@@ -33,8 +27,11 @@ ol.interaction.MOUSEWHEELZOOM_TIMEOUT_DURATION = 80;
  * Allows the user to zoom the map by scrolling the mouse wheel.
  * @constructor
  * @extends {ol.interaction.Interaction}
+ * @param {ol.interaction.MouseWheelZoomOptions=} opt_options Options.
  */
-ol.interaction.MouseWheelZoom = function() {
+ol.interaction.MouseWheelZoom = function(opt_options) {
+
+  var options = goog.isDef(opt_options) ? opt_options : {};
 
   goog.base(this);
 
@@ -44,6 +41,12 @@ ol.interaction.MouseWheelZoom = function() {
    */
   this.delta_ = 0;
 
+  /**
+   * @private
+   * @type {number}
+   */
+  this.duration_ = goog.isDef(options.duration) ? options.duration : 250;
+
   /**
    * @private
    * @type {?ol.Coordinate}
@@ -113,7 +116,7 @@ ol.interaction.MouseWheelZoom.prototype.doZoom_ = function(map) {
 
   map.requestRenderFrame();
   ol.interaction.Interaction.zoomByDelta(map, view, -delta, this.lastAnchor_,
-      ol.interaction.MOUSEWHEELZOOM_ANIMATION_DURATION);
+      this.duration_);
 
   this.delta_ = 0;
   this.lastAnchor_ = null;

src/ol/interaction/touchzoominteraction.js

@@ -9,20 +9,17 @@ goog.require('ol.interaction.Interaction');
 goog.require('ol.interaction.Touch');
 
 
-/**
- * @define {number} Animation duration.
- */
-ol.interaction.TOUCHZOOM_ANIMATION_DURATION = 400;
-
-
 
 /**
  * Allows the user to zoom the map by pinching with two fingers
  * on a touch screen.
  * @constructor
  * @extends {ol.interaction.Touch}
+ * @param {ol.interaction.TouchZoomOptions=} opt_options Options.
  */
-ol.interaction.TouchZoom = function() {
+ol.interaction.TouchZoom = function(opt_options) {
+
+  var options = goog.isDef(opt_options) ? opt_options : {};
 
   goog.base(this);
 
@@ -32,6 +29,12 @@ ol.interaction.TouchZoom = function() {
    */
   this.anchor_ = null;
 
+  /**
+   * @private
+   * @type {number}
+   */
+  this.duration_ = goog.isDef(options.duration) ? options.duration : 400;
+
   /**
    * @private
    * @type {number|undefined}
@@ -107,7 +110,7 @@ ol.interaction.TouchZoom.prototype.handleTouchEnd =
     // Direction is > 0 if pinching out, and < 0 if pinching in.
     var direction = this.lastScaleDelta_ - 1;
     ol.interaction.Interaction.zoom(map, view, view2DState.resolution,
-        this.anchor_, ol.interaction.TOUCHZOOM_ANIMATION_DURATION, direction);
+        this.anchor_, this.duration_, direction);
     return false;
   } else {
     return true;