Merge pull request #133 from fredj/options-obj

ol.animation.create* functions should use options objects rather than positional arguments

examples/side-by-side.js

@@ -107,26 +107,41 @@ keyboardInteraction.addCallback('H', function() {
   layer.setHue(layer.getHue() + (Math.PI / 5));
 });
 keyboardInteraction.addCallback('j', function() {
-  var bounce = ol.animation.createBounce(2 * view.getResolution());
+  var bounce = ol.animation.createBounce({
+    resolution: 2 * view.getResolution()
+  });
   domMap.addPreRenderFunction(bounce);
   webglMap.addPreRenderFunction(bounce);
   canvasMap.addPreRenderFunction(bounce);
 });
 keyboardInteraction.addCallback('l', function() {
-  var panFrom = ol.animation.createPanFrom(
+  var panFrom = ol.animation.createPanFrom({
-      view.getCenter(), undefined, undefined, ol.easing.elastic);
+    source: view.getCenter(),
+    easing: ol.easing.elastic
+  });
   domMap.addPreRenderFunction(panFrom);
   webglMap.addPreRenderFunction(panFrom);
   canvasMap.addPreRenderFunction(panFrom);
   view.setCenter(LONDON);
 });
 keyboardInteraction.addCallback('L', function() {
-  var start = Date.now();
+  var start = goog.now();
   var duration = 5000;
-  var bounce = ol.animation.createBounce(
+  var bounce = ol.animation.createBounce({
-      2 * view.getResolution(), duration, start);
+    resolution: 2 * view.getResolution(),
-  var panFrom = ol.animation.createPanFrom(view.getCenter(), duration, start);
+    start: start,
-  var spin = ol.animation.createSpin(duration, 2, start);
+    duration: duration
+  });
+  var panFrom = ol.animation.createPanFrom({
+    source: view.getCenter(),
+    start: start,
+    duration: duration
+  });
+  var spin = ol.animation.createSpin({
+    turns: 2,
+    start: start,
+    duration: duration
+  });
   var preRenderFunctions = [bounce, panFrom, spin];
   domMap.addPreRenderFunctions(preRenderFunctions);
   webglMap.addPreRenderFunctions(preRenderFunctions);
@@ -134,20 +149,34 @@ keyboardInteraction.addCallback('L', function() {
   view.setCenter(LONDON);
 });
 keyboardInteraction.addCallback('m', function() {
-  var panFrom = ol.animation.createPanFrom(
+  var panFrom = ol.animation.createPanFrom({
-      view.getCenter(), 1000, undefined, ol.easing.bounce);
+    source: view.getCenter(),
+    duration: 1000,
+    easing: ol.easing.bounce
+  });
   domMap.addPreRenderFunction(panFrom);
   webglMap.addPreRenderFunction(panFrom);
   canvasMap.addPreRenderFunction(panFrom);
   view.setCenter(MOSCOW);
 });
 keyboardInteraction.addCallback('M', function() {
-  var start = Date.now();
+  var start = goog.now();
   var duration = 5000;
-  var bounce = ol.animation.createBounce(
+  var bounce = ol.animation.createBounce({
-      2 * view.getResolution(), duration, start);
+    resolution: 2 * view.getResolution(),
-  var panFrom = ol.animation.createPanFrom(view.getCenter(), duration, start);
+    start: start,
-  var spin = ol.animation.createSpin(duration, -2, start);
+    duration: duration
+  });
+  var panFrom = ol.animation.createPanFrom({
+    source: view.getCenter(),
+    start: start,
+    duration: duration
+  });
+  var spin = ol.animation.createSpin({
+    turns: -2,
+    start: start,
+    duration: duration
+  });
   var preRenderFunctions = [bounce, panFrom, spin];
   domMap.addPreRenderFunctions(preRenderFunctions);
   webglMap.addPreRenderFunctions(preRenderFunctions);
@@ -174,13 +203,19 @@ keyboardInteraction.addCallback('vV', function() {
   layer.setVisible(!layer.getVisible());
 });
 keyboardInteraction.addCallback('x', function() {
-  var spin = ol.animation.createSpin(2000, 2);
+  var spin = ol.animation.createSpin({
+    turns: 2,
+    duration: 2000
+  });
   domMap.addPreRenderFunction(spin);
   webglMap.addPreRenderFunction(spin);
   canvasMap.addPreRenderFunction(spin);
 });
 keyboardInteraction.addCallback('X', function() {
-  var spin = ol.animation.createSpin(2000, -2);
+  var spin = ol.animation.createSpin({
+    turns: -2,
+    duration: 2000
+  });
   domMap.addPreRenderFunction(spin);
   webglMap.addPreRenderFunction(spin);
   canvasMap.addPreRenderFunction(spin);

src/objectliterals.exports

@@ -26,6 +26,30 @@
 @exportObjectLiteralProperty ol.View2DOptions.zoom number|undefined
 @exportObjectLiteralProperty ol.View2DOptions.zoomFactor number|undefined
 
+@exportObjectLiteral ol.animation.BounceOptions
+@exportObjectLiteralProperty ol.animation.BounceOptions.resolution number
+@exportObjectLiteralProperty ol.animation.BounceOptions.start number|undefined
+@exportObjectLiteralProperty ol.animation.BounceOptions.duration number|undefined
+@exportObjectLiteralProperty ol.animation.BounceOptions.easing function(number):number|undefined
+
+@exportObjectLiteral ol.animation.PanFromOptions
+@exportObjectLiteralProperty ol.animation.PanFromOptions.source ol.Coordinate
+@exportObjectLiteralProperty ol.animation.PanFromOptions.start number|undefined
+@exportObjectLiteralProperty ol.animation.PanFromOptions.duration number|undefined
+@exportObjectLiteralProperty ol.animation.PanFromOptions.easing function(number):number|undefined
+
+@exportObjectLiteral ol.animation.SpinOptions
+@exportObjectLiteralProperty ol.animation.SpinOptions.turns number
+@exportObjectLiteralProperty ol.animation.SpinOptions.start number|undefined
+@exportObjectLiteralProperty ol.animation.SpinOptions.duration number|undefined
+@exportObjectLiteralProperty ol.animation.SpinOptions.easing function(number):number|undefined
+
+@exportObjectLiteral ol.animation.ZoomFromOptions
+@exportObjectLiteralProperty ol.animation.ZoomFromOptions.resolution number
+@exportObjectLiteralProperty ol.animation.ZoomFromOptions.start number|undefined
+@exportObjectLiteralProperty ol.animation.ZoomFromOptions.duration number|undefined
+@exportObjectLiteralProperty ol.animation.ZoomFromOptions.easing function(number):number|undefined
+
 @exportObjectLiteral ol.control.AttributionOptions
 @exportObjectLiteralProperty ol.control.AttributionOptions.map ol.Map|undefined
 @exportObjectLiteralProperty ol.control.AttributionOptions.target Element|undefined

src/ol/animation.js

@@ -9,25 +9,22 @@ goog.require('ol.easing');
 
 
 /**
- * @param {number} resolution Resolution.
+ * @param {ol.animation.BounceOptions} options Options.
- * @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.createBounce =
+ol.animation.createBounce = function(options) {
-    function(resolution, opt_duration, opt_start, opt_easingFunction) {
+  var resolution = options.resolution;
-  var start = goog.isDef(opt_start) ? opt_start : goog.now();
+  var start = goog.isDef(options.start) ? options.start : goog.now();
-  var duration = goog.isDef(opt_duration) ? opt_duration : 1000;
+  var duration = goog.isDef(options.duration) ? options.duration : 1000;
-  var easingFunction = goog.isDef(opt_easingFunction) ?
+  var easing = goog.isDef(options.easing) ?
-      opt_easingFunction : ol.easing.upAndDown;
+      options.easing : ol.easing.upAndDown;
   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 = easingFunction((frameState.time - start) / duration);
+      var delta = easing((frameState.time - start) / duration);
       var deltaResolution = resolution - frameState.view2DState.resolution;
       frameState.animate = true;
       frameState.view2DState.resolution += delta * deltaResolution;
@@ -41,27 +38,24 @@ ol.animation.createBounce =
 
 
 /**
- * @param {ol.Coordinate} source Source.
+ * @param {ol.animation.PanFromOptions} options Options.
- * @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.createPanFrom =
+ol.animation.createPanFrom = function(options) {
-    function(source, opt_duration, opt_start, opt_easingFunction) {
+  var source = options.source;
-  var start = goog.isDef(opt_start) ? opt_start : goog.now();
+  var start = goog.isDef(options.start) ? options.start : goog.now();
   var sourceX = source.x;
   var sourceY = source.y;
-  var duration = goog.isDef(opt_duration) ? opt_duration : 1000;
+  var duration = goog.isDef(options.duration) ? options.duration : 1000;
-  var easingFunction = goog.isDef(opt_easingFunction) ?
+  var easing = goog.isDef(options.easing) ?
-      opt_easingFunction : goog.fx.easing.inAndOut;
+      options.easing : goog.fx.easing.inAndOut;
   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 delta = 1 - easing((frameState.time - start) / duration);
       var deltaX = sourceX - frameState.view2DState.center.x;
       var deltaY = sourceY - frameState.view2DState.center.y;
       frameState.animate = true;
@@ -77,27 +71,23 @@ ol.animation.createPanFrom =
 
 
 /**
- * @param {number=} opt_duration Duration.
+ * @param {ol.animation.SpinOptions} options Options.
- * @param {number=} opt_turns Turns.
- * @param {number=} opt_start Start.
- * @param {function(number): number=} opt_easingFunction Easing function.
  * @return {ol.PreRenderFunction} Pre-render function.
  */
-ol.animation.createSpin =
+ol.animation.createSpin = function(options) {
-    function(opt_duration, opt_turns, opt_start, opt_easingFunction) {
+  var start = goog.isDef(options.start) ? options.start : goog.now();
-  var start = goog.isDef(opt_start) ? opt_start : goog.now();
+  var duration = goog.isDef(options.duration) ? options.duration : 1000;
-  var duration = goog.isDef(opt_duration) ? opt_duration : 1000;
+  var easing = goog.isDef(options.easing) ?
-  var turns = goog.isDef(opt_turns) ? opt_turns : 1;
+      options.easing : goog.fx.easing.inAndOut;
-  var deltaTheta = 2 * turns * Math.PI;
+  var deltaTheta = 2 * options.turns * Math.PI;
-  var easingFunction = goog.isDef(opt_easingFunction) ?
+
-      opt_easingFunction : goog.fx.easing.inAndOut;
   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 = easingFunction((frameState.time - start) / duration);
+      var delta = easing((frameState.time - start) / duration);
       frameState.animate = true;
       frameState.view2DState.rotation += delta * deltaTheta;
       frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
@@ -110,25 +100,22 @@ ol.animation.createSpin =
 
 
 /**
- * @param {number} sourceResolution Source resolution.
+ * @param {ol.animation.ZoomFromOptions} options Options.
- * @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 =
+ol.animation.createZoomFrom = function(options) {
-    function(sourceResolution, opt_duration, opt_start, opt_easingFunction) {
+  var sourceResolution = options.resolution;
-  var start = goog.isDef(opt_start) ? opt_start : goog.now();
+  var start = goog.isDef(options.start) ? options.start : goog.now();
-  var duration = goog.isDef(opt_duration) ? opt_duration : 1000;
+  var duration = goog.isDef(options.duration) ? options.duration : 1000;
-  var easingFunction = goog.isDef(opt_easingFunction) ?
+  var easing = goog.isDef(options.easing) ?
-      opt_easingFunction : ol.easing.linear;
+      options.easing : 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 delta = 1 - easing((frameState.time - start) / duration);
       var deltaResolution =
           sourceResolution - frameState.view2DState.resolution;
       frameState.animate = true;

src/ol/view2d.js

@@ -296,8 +296,10 @@ ol.View2D.prototype.zoom = function(map, delta, opt_anchor, opt_duration) {
   var currentResolution = this.getResolution();
   if (goog.isDef(currentResolution) && goog.isDef(opt_duration)) {
     map.requestRenderFrame();
-    map.addPreRenderFunction(ol.animation.createZoomFrom(
+    map.addPreRenderFunction(ol.animation.createZoomFrom({
-        currentResolution, opt_duration));
+      resolution: currentResolution,
+      duration: opt_duration
+    }));
   }
   var resolution = this.constraints_.resolution(currentResolution, delta);
   this.zoom_(map, resolution, opt_anchor);