diff --git a/examples/side-by-side.js b/examples/side-by-side.js index 411c0d0df3..017b072750 100644 --- a/examples/side-by-side.js +++ b/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( - view.getCenter(), undefined, undefined, ol.easing.elastic); + var panFrom = ol.animation.createPanFrom({ + 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( - 2 * view.getResolution(), duration, start); - var panFrom = ol.animation.createPanFrom(view.getCenter(), duration, start); - var spin = ol.animation.createSpin(duration, 2, start); + var bounce = ol.animation.createBounce({ + resolution: 2 * view.getResolution(), + start: 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( - view.getCenter(), 1000, undefined, ol.easing.bounce); + var panFrom = ol.animation.createPanFrom({ + 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( - 2 * view.getResolution(), duration, start); - var panFrom = ol.animation.createPanFrom(view.getCenter(), duration, start); - var spin = ol.animation.createSpin(duration, -2, start); + var bounce = ol.animation.createBounce({ + resolution: 2 * view.getResolution(), + start: 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); diff --git a/src/objectliterals.exports b/src/objectliterals.exports index f22ef20690..5dddcaba8b 100644 --- a/src/objectliterals.exports +++ b/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 diff --git a/src/ol/animation.js b/src/ol/animation.js index 73dfebbe57..958817aa2e 100644 --- a/src/ol/animation.js +++ b/src/ol/animation.js @@ -9,25 +9,22 @@ goog.require('ol.easing'); /** - * @param {number} resolution Resolution. - * @param {number=} opt_duration Duration. - * @param {number=} opt_start Start. - * @param {function(number): number=} opt_easingFunction Easing function. + * @param {ol.animation.BounceOptions} options Options. * @return {ol.PreRenderFunction} Pre-render function. */ -ol.animation.createBounce = - function(resolution, opt_duration, opt_start, opt_easingFunction) { - var start = goog.isDef(opt_start) ? opt_start : goog.now(); - var duration = goog.isDef(opt_duration) ? opt_duration : 1000; - var easingFunction = goog.isDef(opt_easingFunction) ? - opt_easingFunction : ol.easing.upAndDown; +ol.animation.createBounce = function(options) { + var resolution = options.resolution; + var start = goog.isDef(options.start) ? options.start : goog.now(); + var duration = goog.isDef(options.duration) ? options.duration : 1000; + var easing = goog.isDef(options.easing) ? + 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 {number=} opt_duration Duration. - * @param {number=} opt_start Start. - * @param {function(number): number=} opt_easingFunction Easing function. + * @param {ol.animation.PanFromOptions} options Options. * @return {ol.PreRenderFunction} Pre-render function. */ -ol.animation.createPanFrom = - function(source, opt_duration, opt_start, opt_easingFunction) { - var start = goog.isDef(opt_start) ? opt_start : goog.now(); +ol.animation.createPanFrom = function(options) { + var source = options.source; + 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 easingFunction = goog.isDef(opt_easingFunction) ? - opt_easingFunction : goog.fx.easing.inAndOut; + var duration = goog.isDef(options.duration) ? options.duration : 1000; + var easing = goog.isDef(options.easing) ? + 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 {number=} opt_turns Turns. - * @param {number=} opt_start Start. - * @param {function(number): number=} opt_easingFunction Easing function. + * @param {ol.animation.SpinOptions} options Options. * @return {ol.PreRenderFunction} Pre-render function. */ -ol.animation.createSpin = - function(opt_duration, opt_turns, opt_start, opt_easingFunction) { - var start = goog.isDef(opt_start) ? opt_start : goog.now(); - var duration = goog.isDef(opt_duration) ? opt_duration : 1000; - var turns = goog.isDef(opt_turns) ? opt_turns : 1; - var deltaTheta = 2 * turns * Math.PI; - var easingFunction = goog.isDef(opt_easingFunction) ? - opt_easingFunction : goog.fx.easing.inAndOut; +ol.animation.createSpin = function(options) { + var start = goog.isDef(options.start) ? options.start : goog.now(); + var duration = goog.isDef(options.duration) ? options.duration : 1000; + var easing = goog.isDef(options.easing) ? + options.easing : goog.fx.easing.inAndOut; + var deltaTheta = 2 * options.turns * Math.PI; + 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 {number=} opt_duration Duration. - * @param {number=} opt_start Start. - * @param {function(number): number=} opt_easingFunction Easing function. + * @param {ol.animation.ZoomFromOptions} options Options. * @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 : goog.now(); - var duration = goog.isDef(opt_duration) ? opt_duration : 1000; - var easingFunction = goog.isDef(opt_easingFunction) ? - opt_easingFunction : ol.easing.linear; +ol.animation.createZoomFrom = function(options) { + var sourceResolution = options.resolution; + var start = goog.isDef(options.start) ? options.start : goog.now(); + var duration = goog.isDef(options.duration) ? options.duration : 1000; + var easing = goog.isDef(options.easing) ? + 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; diff --git a/src/ol/view2d.js b/src/ol/view2d.js index 0ea5977c43..ad4af94932 100644 --- a/src/ol/view2d.js +++ b/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( - currentResolution, opt_duration)); + map.addPreRenderFunction(ol.animation.createZoomFrom({ + resolution: currentResolution, + duration: opt_duration + })); } var resolution = this.constraints_.resolution(currentResolution, delta); this.zoom_(map, resolution, opt_anchor);