From 16954f8df0503d479effaf94a2b6c85b3e164e8e Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 5 Nov 2016 12:15:45 -0600 Subject: [PATCH 01/33] New view animation options --- externs/olx.js | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) diff --git a/externs/olx.js b/externs/olx.js index ee532d33a5..f6aea8c754 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -661,6 +661,81 @@ olx.ViewOptions.prototype.zoom; olx.ViewOptions.prototype.zoomFactor; +/** + * @typedef {{ + * center: (ol.Coordinate|undefined), + * zoom: (number|undefined), + * resolution: (number|undefined), + * rotation: (number|undefined), + * rotationAnchor: (ol.Coordinate|undefined), + * duration: (number|undefined), + * easing: (function(number):number|undefined) + * }} + */ +olx.AnimationOptions; + + +/** + * The center of the view at the end of the animation. + * @type {ol.Coordinate|undefined} + * @api + */ +olx.AnimationOptions.prototype.center; + + +/** + * The zoom level of the view at the end of the animation. This takes + * precedence over `resolution`. + * @type {number|undefined} + * @api + */ +olx.AnimationOptions.prototype.zoom; + + +/** + * The resolution of the view at the end of the animation. If `zoom` is also + * provided, this option will be ignored. + * @type {number|undefined} + * @api + */ +olx.AnimationOptions.prototype.resolution; + + +/** + * The rotation of the view at the end of the animation. + * @type {number|undefined} + * @api + */ +olx.AnimationOptions.prototype.rotation; + + +/** + * The rotation anchor of the view during the animation. + * @type {ol.Coordinate|undefined} + * @api + */ +olx.AnimationOptions.prototype.rotationAnchor; + + +/** + * The duration of the animation in milliseconds (defaults to `1000`). + * @type {number|undefined} + * @api + */ +olx.AnimationOptions.prototype.duration; + + +/** + * The easing function used during the animation (defaults to `ol.easing.inAndOut`). + * The function will be called for each frame with a number representing a + * fraction of the animation's duration. The function should return a number + * between 0 and 1 representing the progress toward the destination state. + * @type {function(number):number|undefined} + * @api + */ +olx.AnimationOptions.prototype.easing; + + /** * Namespace. * @type {Object} From e979baa3dccc739888b6c38f99ceaf4233fc2481 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 5 Nov 2016 12:16:11 -0600 Subject: [PATCH 02/33] Stub out view animation --- src/ol/typedefs.js | 20 +++++++++ src/ol/view.js | 109 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 129 insertions(+) diff --git a/src/ol/typedefs.js b/src/ol/typedefs.js index 7901c923f0..95255c5d75 100644 --- a/src/ol/typedefs.js +++ b/src/ol/typedefs.js @@ -652,6 +652,26 @@ ol.TileUrlFunctionType; ol.TransformFunction; +/** + * An animation configuration + * + * @typedef {{ + * sourceCenter: (ol.Coordinate|undefined), + * targetCenter: (ol.Coordinate|undefined), + * sourceResolution: (number|undefined), + * targetResolution: (number|undefined), + * sourceRotation: (number|undefined), + * targetRotation: (number|undefined), + * rotationAnchor: (ol.Coordinate|undefined), + * start: number, + * duration: number, + * easing: function(number):number, + * callback: (function(boolean)|undefined) + * }} + */ +ol.ViewAnimation; + + /** * @typedef {{buf: ol.webgl.Buffer, * buffer: WebGLBuffer}} diff --git a/src/ol/view.js b/src/ol/view.js index a9f1a94732..6e151cb980 100644 --- a/src/ol/view.js +++ b/src/ol/view.js @@ -9,6 +9,7 @@ goog.require('ol.RotationConstraint'); goog.require('ol.array'); goog.require('ol.asserts'); goog.require('ol.coordinate'); +goog.require('ol.easing'); goog.require('ol.extent'); goog.require('ol.geom.Polygon'); goog.require('ol.geom.SimpleGeometry'); @@ -84,6 +85,18 @@ ol.View = function(opt_options) { */ this.hints_ = [0, 0]; + /** + * @private + * @type {boolean} + */ + this.animating_ = false; + + /** + * @private + * @type {Array.>} + */ + this.animations_ = []; + /** * @type {Object.} */ @@ -155,6 +168,93 @@ ol.View = function(opt_options) { ol.inherits(ol.View, ol.Object); +/** + * Animate the view. + * @param {...(olx.AnimationOptions|function(boolean))} var_args Animation + * options. Multiple animations can be run in series by passing multiple + * options objects. To run multiple animations in series, call the method + * multiple times. An optional callback can be provided as a final + * argument. The callback will be called with a boolean indicating whether + * the animation completed without being cancelled. + */ +ol.View.prototype.animate = function(var_args) { + var start = Date.now(); + var center = this.getCenter().slice(); + var resolution = this.getResolution(); + var rotation = this.getRotation(); + var animationCount = arguments.length; + var callback; + if (animationCount > 1 && typeof arguments[animationCount - 1] === 'function') { + callback = arguments[animationCount - 1]; + --animationCount; + } + var series = []; + for (var i = 0; i < animationCount; ++i) { + var options = /** @type olx.AnimationOptions */ (arguments[i]); + + var animation = /** @type {ol.ViewAnimation} */ ({ + start: start, + duration: options.duration || 1000, + easing: options.easing || ol.easing.inAndOut + }); + + if (options.center) { + animation.sourceCenter = center; + animation.targetCenter = options.center; + center = animation.targetCenter; + } + + if (options.zoom !== undefined) { + animation.sourceResolution = resolution; + animation.targetResolution = this.constrainResolution( + this.maxResolution_, options.zoom - this.minZoom_, 0); + resolution = animation.targetResolution; + } else if (options.resolution) { + animation.sourceResolution = this.getResolution(); + animation.targetResolution = options.resolution; + resolution = animation.targetResolution; + } + + if (options.rotation !== undefined) { + animation.sourceRotation = rotation; + animation.targetRotation = options.rotation; + animation.rotationAnchor = options.rotationAnchor; + rotation = animation.targetRotation; + } + + animation.callback = callback; + start += animation.duration; + series.push(animation); + } + this.animations_.push(series); + this.animating_ = true; +}; + + +/** + * Determine if the view is being animated. + * @return {boolean} The view is being animated. + */ +ol.View.prototype.getAnimating = function() { + return this.animating_; +}; + + +/** + * Cancel any ongoing animations. + */ +ol.View.prototype.cancelAnimations_ = function() { + for (var i = 0, ii = this.animations_.length; i < ii; ++i) { + var series = this.animations_[i]; + if (series[0].callback) { + series[0].callback(false); + } + } + this.animations_.length = 0; + this.animating_ = false; +}; + + /** * @param {number} rotation Target rotation. * @param {ol.Coordinate} anchor Rotation anchor. @@ -603,6 +703,9 @@ ol.View.prototype.rotate = function(rotation, opt_anchor) { */ ol.View.prototype.setCenter = function(center) { this.set(ol.View.Property.CENTER, center); + if (this.animating_) { + this.cancelAnimations_(); + } }; @@ -629,6 +732,9 @@ ol.View.prototype.setHint = function(hint, delta) { */ ol.View.prototype.setResolution = function(resolution) { this.set(ol.View.Property.RESOLUTION, resolution); + if (this.animating_) { + this.cancelAnimations_(); + } }; @@ -640,6 +746,9 @@ ol.View.prototype.setResolution = function(resolution) { */ ol.View.prototype.setRotation = function(rotation) { this.set(ol.View.Property.ROTATION, rotation); + if (this.animating_) { + this.cancelAnimations_(); + } }; From 83b7a1e2fc200059e82936279343bc0e1d96f10d Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 5 Nov 2016 13:22:17 -0600 Subject: [PATCH 03/33] View animation --- src/ol/view.js | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) diff --git a/src/ol/view.js b/src/ol/view.js index 6e151cb980..8789964bb4 100644 --- a/src/ol/view.js +++ b/src/ol/view.js @@ -97,6 +97,14 @@ ol.View = function(opt_options) { */ this.animations_ = []; + /** + * @private + * @type {number|undefined} + */ + this.updateAnimationKey_; + + this.updateAnimations_ = this.updateAnimations_.bind(this); + /** * @type {Object.} */ @@ -228,6 +236,7 @@ ol.View.prototype.animate = function(var_args) { } this.animations_.push(series); this.animating_ = true; + this.updateAnimations_(); }; @@ -254,6 +263,67 @@ ol.View.prototype.cancelAnimations_ = function() { this.animating_ = false; }; +/** + * Update all animations. + */ +ol.View.prototype.updateAnimations_ = function() { + if (this.updateAnimationKey_ !== undefined) { + cancelAnimationFrame(this.updateAnimationKey_); + this.updateAnimationKey_ = undefined; + } + if (!this.animating_) { + return; + } + var now = Date.now(); + var more = false; + for (var i = this.animations_.length - 1; i >= 0; --i) { + var series = this.animations_[i]; + var animation; + for (var j = 0, jj = series.length; j < jj; ++j) { + var candidate = series[i]; + if (candidate.duration > now - candidate.start) { + animation = candidate; + break; + } + } + if (animation) { + var progress = animation.easing((now - animation.start) / animation.duration); + if (animation.sourceCenter) { + var x0 = animation.sourceCenter[0]; + var y0 = animation.sourceCenter[1]; + var x1 = animation.targetCenter[0]; + var y1 = animation.targetCenter[1]; + var x = x0 + progress * (x1 - x0); + var y = y0 + progress * (y1 - y0); + this.set(ol.View.Property.CENTER, [x, y]); + } + if (animation.sourceResolution) { + var resolutionDelta = progress * (animation.targetResolution - animation.sourceResolution); + this.set(ol.View.Property.RESOLUTION, animation.sourceResolution + resolutionDelta); + } + if (animation.sourceRotation !== undefined) { + var rotationDelta = progress * (animation.targetRotation - animation.sourceRotation); + this.set(ol.View.Property.ROTATION, animation.sourceRotation + rotationDelta); + if (animation.rotationAnchor) { + var center = this.getCenter().slice(); + ol.coordinate.sub(center, animation.rotationAnchor); + ol.coordinate.rotate(center, rotationDelta); + ol.coordinate.add(center, animation.rotationAnchor); + this.set(ol.View.Property.CENTER, center); + } + } + more = true; + } else { + this.animations_.pop(); + if (this.animations_.length === 0) { + this.animating_ = false; + } + } + } + if (more && this.updateAnimationKey_ === undefined) { + this.updateAnimationKey_ = requestAnimationFrame(this.updateAnimations_); + } +}; /** * @param {number} rotation Target rotation. From 3d26d3bdc6d4669987ebd7edec27cc743b4de82d Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 5 Nov 2016 13:23:45 -0600 Subject: [PATCH 04/33] Update the animation example --- examples/animation.html | 5 +- examples/animation.js | 162 ++++++++++++---------------------------- 2 files changed, 51 insertions(+), 116 deletions(-) diff --git a/examples/animation.html b/examples/animation.html index e0de6e10a9..966b88f68f 100644 --- a/examples/animation.html +++ b/examples/animation.html @@ -3,8 +3,8 @@ layout: example.html title: View Animation shortdesc: Demonstrates animated pan, zoom, and rotation. docs: > - This example shows how to use the beforeRender function on the Map to run one - or more animations. + This example shows how to use the view.animate() method to run + one or more animations. tags: "animation" ---
@@ -16,4 +16,3 @@ tags: "animation" - diff --git a/examples/animation.js b/examples/animation.js index dfdfdb697e..9e2e9544dd 100644 --- a/examples/animation.js +++ b/examples/animation.js @@ -1,7 +1,5 @@ goog.require('ol.Map'); goog.require('ol.View'); -goog.require('ol.animation'); -goog.require('ol.control'); goog.require('ol.layer.Tile'); goog.require('ol.proj'); goog.require('ol.source.OSM'); @@ -39,15 +37,14 @@ var moscow = ol.proj.fromLonLat([37.6178, 55.7517]); var istanbul = ol.proj.fromLonLat([28.9744, 41.0128]); var rome = ol.proj.fromLonLat([12.5, 41.9]); var bern = ol.proj.fromLonLat([7.4458, 46.95]); -var madrid = ol.proj.fromLonLat([-3.683333, 40.4]); var view = new ol.View({ - // the view's initial state center: istanbul, zoom: 6 }); var map = new ol.Map({ + target: 'map', layers: [ new ol.layer.Tile({ preload: 4, @@ -57,131 +54,70 @@ var map = new ol.Map({ // Improve user experience by loading tiles while animating. Will make // animations stutter on mobile or slow devices. loadTilesWhileAnimating: true, - target: 'map', - controls: ol.control.defaults({ - attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ - collapsible: false - }) - }), view: view }); -var rotateLeft = document.getElementById('rotate-left'); -rotateLeft.addEventListener('click', function() { - var rotateLeft = ol.animation.rotate({ - duration: 2000, - rotation: -4 * Math.PI +document.getElementById('rotate-left').addEventListener('click', function() { + view.animate({ + rotation: view.getRotation() + Math.PI / 2 }); - map.beforeRender(rotateLeft); -}, false); -var rotateRight = document.getElementById('rotate-right'); -rotateRight.addEventListener('click', function() { - var rotateRight = ol.animation.rotate({ - duration: 2000, - rotation: 4 * Math.PI - }); - map.beforeRender(rotateRight); -}, false); +}); -var rotateAroundRome = document.getElementById('rotate-around-rome'); -rotateAroundRome.addEventListener('click', function() { - var currentRotation = view.getRotation(); - var rotateAroundRome = ol.animation.rotate({ - anchor: rome, - duration: 1000, - rotation: currentRotation +document.getElementById('rotate-right').addEventListener('click', function() { + view.animate({ + rotation: view.getRotation() - Math.PI / 2 }); - map.beforeRender(rotateAroundRome); - view.rotate(currentRotation + (Math.PI / 2), rome); -}, false); +}); -var panToLondon = document.getElementById('pan-to-london'); -panToLondon.addEventListener('click', function() { - var pan = ol.animation.pan({ +document.getElementById('rotate-around-rome').addEventListener('click', function() { + view.animate({ + rotation: view.getRotation() + 2 * Math.PI, + rotationAnchor: rome + }); +}); + +document.getElementById('pan-to-london').addEventListener('click', function() { + view.animate({ + center: london, + duration: 2000 + }); +}); + +document.getElementById('elastic-to-moscow').addEventListener('click', function() { + view.animate({ + center: moscow, duration: 2000, - source: /** @type {ol.Coordinate} */ (view.getCenter()) + easing: elastic }); - map.beforeRender(pan); - view.setCenter(london); -}, false); +}); -var elasticToMoscow = document.getElementById('elastic-to-moscow'); -elasticToMoscow.addEventListener('click', function() { - var pan = ol.animation.pan({ +document.getElementById('bounce-to-istanbul').addEventListener('click', function() { + view.animate({ + center: istanbul, duration: 2000, - easing: elastic, - source: /** @type {ol.Coordinate} */ (view.getCenter()) + easing: bounce }); - map.beforeRender(pan); - view.setCenter(moscow); -}, false); +}); -var bounceToIstanbul = document.getElementById('bounce-to-istanbul'); -bounceToIstanbul.addEventListener('click', function() { - var pan = ol.animation.pan({ - duration: 2000, - easing: bounce, - source: /** @type {ol.Coordinate} */ (view.getCenter()) - }); - map.beforeRender(pan); - view.setCenter(istanbul); -}, false); - -var spinToRome = document.getElementById('spin-to-rome'); -spinToRome.addEventListener('click', function() { - var duration = 2000; - var start = +new Date(); - var pan = ol.animation.pan({ - duration: duration, - source: /** @type {ol.Coordinate} */ (view.getCenter()), - start: start - }); - var rotate = ol.animation.rotate({ - duration: duration, +document.getElementById('spin-to-rome').addEventListener('click', function() { + view.animate({ + center: rome, rotation: 2 * Math.PI, - start: start + duration: 2000 }); - map.beforeRender(pan, rotate); - view.setCenter(rome); -}, false); +}); -var flyToBern = document.getElementById('fly-to-bern'); -flyToBern.addEventListener('click', function() { +document.getElementById('fly-to-bern').addEventListener('click', function() { var duration = 2000; - var start = +new Date(); - var pan = ol.animation.pan({ - duration: duration, - source: /** @type {ol.Coordinate} */ (view.getCenter()), - start: start + view.animate({ + center: bern, + duration: duration }); - var bounce = ol.animation.bounce({ - duration: duration, - resolution: 4 * view.getResolution(), - start: start + view.animate({ + zoom: view.getZoom() - 0.5, + duration: duration / 2 + }, { + zoom: view.getZoom() + 1, + duration: duration / 2 }); - map.beforeRender(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: /** @type {ol.Coordinate} */ (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.beforeRender(pan, bounce, rotate); - view.setCenter(madrid); -}, false); +}); From c452164b8abded7d9ed8a2b48c8f6f3406964d1a Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 5 Nov 2016 17:31:49 -0600 Subject: [PATCH 05/33] Ensure that all animations complete --- src/ol/typedefs.js | 1 + src/ol/view.js | 31 +++++++++++++++++++---------- test/spec/ol/view.test.js | 42 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 64 insertions(+), 10 deletions(-) diff --git a/src/ol/typedefs.js b/src/ol/typedefs.js index 95255c5d75..86f7d2927c 100644 --- a/src/ol/typedefs.js +++ b/src/ol/typedefs.js @@ -665,6 +665,7 @@ ol.TransformFunction; * rotationAnchor: (ol.Coordinate|undefined), * start: number, * duration: number, + * done: boolean, * easing: function(number):number, * callback: (function(boolean)|undefined) * }} diff --git a/src/ol/view.js b/src/ol/view.js index 8789964bb4..961bc9a6cd 100644 --- a/src/ol/view.js +++ b/src/ol/view.js @@ -202,6 +202,7 @@ ol.View.prototype.animate = function(var_args) { var animation = /** @type {ol.ViewAnimation} */ ({ start: start, + done: false, duration: options.duration || 1000, easing: options.easing || ol.easing.inAndOut }); @@ -278,16 +279,21 @@ ol.View.prototype.updateAnimations_ = function() { var more = false; for (var i = this.animations_.length - 1; i >= 0; --i) { var series = this.animations_[i]; - var animation; + var seriesDone = true; for (var j = 0, jj = series.length; j < jj; ++j) { - var candidate = series[i]; - if (candidate.duration > now - candidate.start) { - animation = candidate; - break; + var animation = series[j]; + if (animation.done) { + continue; } - } - if (animation) { - var progress = animation.easing((now - animation.start) / animation.duration); + var elapsed = now - animation.start; + var fraction = elapsed / animation.duration; + if (fraction > 1) { + animation.done = true; + fraction = 1; + } else { + seriesDone = false; + } + var progress = animation.easing(fraction); if (animation.sourceCenter) { var x0 = animation.sourceCenter[0]; var y0 = animation.sourceCenter[1]; @@ -313,11 +319,16 @@ ol.View.prototype.updateAnimations_ = function() { } } more = true; - } else { - this.animations_.pop(); + } + if (seriesDone) { + var completed = this.animations_.pop(); if (this.animations_.length === 0) { this.animating_ = false; } + var callback = completed[0].callback; + if (callback) { + callback(true); + } } } if (more && this.updateAnimationKey_ === undefined) { diff --git a/test/spec/ol/view.test.js b/test/spec/ol/view.test.js index 2d32a12adb..8affac3187 100644 --- a/test/spec/ol/view.test.js +++ b/test/spec/ol/view.test.js @@ -301,6 +301,48 @@ describe('ol.View', function() { }); + describe('#animate()', function() { + + var originalRequestAnimationFrame = window.requestAnimationFrame; + var originalCancelAnimationFrame = window.cancelAnimationFrame; + + beforeEach(function() { + window.requestAnimationFrame = function(callback) { + return setTimeout(callback, 1); + }; + window.cancelAnimationFrame = function(key) { + return clearTimeout(key); + }; + }); + + afterEach(function() { + window.requestAnimationFrame = originalRequestAnimationFrame; + window.cancelAnimationFrame = originalCancelAnimationFrame; + }); + + it('can be called to animate view properties', function(done) { + var view = new ol.View({ + center: [0, 0], + zoom: 5 + }); + + view.animate({ + zoom: 4, + duration: 25 + }); + expect(view.getAnimating()).to.eql(true); + + setTimeout(function() { + expect(view.getCenter()).to.eql([0, 0]); + expect(view.getZoom()).to.eql(4); + expect(view.getAnimating()).to.eql(false); + done(); + }, 50); + + }); + + }); + describe('#getResolutions', function() { var view; var resolutions = [512, 256, 128, 64, 32, 16]; From 61ef7bf95dcbf794b3fe62a0635be438cc862b00 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 5 Nov 2016 18:05:44 -0600 Subject: [PATCH 06/33] Use view.animate() after drag panning --- src/ol/interaction/dragpan.js | 23 ++++++++--------------- 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/src/ol/interaction/dragpan.js b/src/ol/interaction/dragpan.js index feef87caa5..a8f51e7e82 100644 --- a/src/ol/interaction/dragpan.js +++ b/src/ol/interaction/dragpan.js @@ -3,6 +3,7 @@ goog.provide('ol.interaction.DragPan'); goog.require('ol'); goog.require('ol.View'); goog.require('ol.coordinate'); +goog.require('ol.easing'); goog.require('ol.events.condition'); goog.require('ol.functions'); goog.require('ol.interaction.Pointer'); @@ -33,12 +34,6 @@ ol.interaction.DragPan = function(opt_options) { */ this.kinetic_ = options.kinetic; - /** - * @private - * @type {?ol.PreRenderFunction} - */ - this.kineticPreRenderFn_ = null; - /** * @type {ol.Pixel} */ @@ -105,15 +100,16 @@ ol.interaction.DragPan.handleUpEvent_ = function(mapBrowserEvent) { var distance = this.kinetic_.getDistance(); var angle = this.kinetic_.getAngle(); var center = /** @type {!ol.Coordinate} */ (view.getCenter()); - this.kineticPreRenderFn_ = this.kinetic_.pan(center); - map.beforeRender(this.kineticPreRenderFn_); var centerpx = map.getPixelFromCoordinate(center); var dest = map.getCoordinateFromPixel([ centerpx[0] - distance * Math.cos(angle), centerpx[1] - distance * Math.sin(angle) ]); - dest = view.constrainCenter(dest); - view.setCenter(dest); + view.animate({ + center: view.constrainCenter(dest), + duration: 500, + easing: ol.easing.easeOut + }); } else { // the view is not updated, force a render map.render(); @@ -141,11 +137,8 @@ ol.interaction.DragPan.handleDownEvent_ = function(mapBrowserEvent) { if (!this.handlingDownUpSequence) { view.setHint(ol.View.Hint.INTERACTING, 1); } - if (this.kineticPreRenderFn_ && - map.removePreRenderFunction(this.kineticPreRenderFn_)) { - view.setCenter(mapBrowserEvent.frameState.viewState.center); - this.kineticPreRenderFn_ = null; - } + // stop any current animation + view.setCenter(mapBrowserEvent.frameState.viewState.center); if (this.kinetic_) { this.kinetic_.begin(); } From 0c8c5a003b9cacb1afee955bc220bf31a8762f9a Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 5 Nov 2016 18:08:37 -0600 Subject: [PATCH 07/33] Use view.animate() in zoom control --- src/ol/control/zoom.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/ol/control/zoom.js b/src/ol/control/zoom.js index 8b61d8c92d..390578d332 100644 --- a/src/ol/control/zoom.js +++ b/src/ol/control/zoom.js @@ -3,7 +3,6 @@ goog.provide('ol.control.Zoom'); goog.require('ol'); goog.require('ol.events'); goog.require('ol.events.EventType'); -goog.require('ol.animation'); goog.require('ol.control.Control'); goog.require('ol.css'); goog.require('ol.easing'); @@ -105,14 +104,15 @@ ol.control.Zoom.prototype.zoomByDelta_ = function(delta) { } var currentResolution = view.getResolution(); if (currentResolution) { + var newResolution = view.constrainResolution(currentResolution, delta); if (this.duration_ > 0) { - map.beforeRender(ol.animation.zoom({ - resolution: currentResolution, + view.animate({ + resolution: newResolution, duration: this.duration_, easing: ol.easing.easeOut - })); + }); + } else { + view.setResolution(newResolution); } - var newResolution = view.constrainResolution(currentResolution, delta); - view.setResolution(newResolution); } }; From dd079e915aaf5ae264171d90f555e8eaf34f626d Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 5 Nov 2016 18:11:04 -0600 Subject: [PATCH 08/33] Use view.animate() in the rotation control --- src/ol/control/rotate.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/ol/control/rotate.js b/src/ol/control/rotate.js index 54d5f420c9..bc6cede392 100644 --- a/src/ol/control/rotate.js +++ b/src/ol/control/rotate.js @@ -3,7 +3,6 @@ goog.provide('ol.control.Rotate'); goog.require('ol.events'); goog.require('ol.events.EventType'); goog.require('ol'); -goog.require('ol.animation'); goog.require('ol.control.Control'); goog.require('ol.css'); goog.require('ol.easing'); @@ -131,13 +130,14 @@ ol.control.Rotate.prototype.resetNorth_ = function() { if (currentRotation > Math.PI) { currentRotation -= 2 * Math.PI; } - map.beforeRender(ol.animation.rotate({ - rotation: currentRotation, + view.animate({ + rotation: 0, duration: this.duration_, easing: ol.easing.easeOut - })); + }); + } else { + view.setRotation(0); } - view.setRotation(0); } }; From f6e9c121610a9983b72f0b4038892e1a6fbbc005 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 5 Nov 2016 18:26:24 -0600 Subject: [PATCH 09/33] Use view.animate() in the pan interaction --- src/ol/interaction/interaction.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/ol/interaction/interaction.js b/src/ol/interaction/interaction.js index 5d13ac1947..f86d943725 100644 --- a/src/ol/interaction/interaction.js +++ b/src/ol/interaction/interaction.js @@ -99,16 +99,17 @@ ol.interaction.Interaction.prototype.setMap = function(map) { ol.interaction.Interaction.pan = function(map, view, delta, opt_duration) { var currentCenter = view.getCenter(); if (currentCenter) { - if (opt_duration && opt_duration > 0) { - map.beforeRender(ol.animation.pan({ - source: currentCenter, - duration: opt_duration, - easing: ol.easing.linear - })); - } var center = view.constrainCenter( [currentCenter[0] + delta[0], currentCenter[1] + delta[1]]); - view.setCenter(center); + if (opt_duration) { + view.animate({ + duration: opt_duration, + easing: ol.easing.linear, + center: center + }); + } else { + view.setCenter(center); + } } }; From 8529a740639c45ecc958757dd9888d89dd2157ff Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 5 Nov 2016 18:29:29 -0600 Subject: [PATCH 10/33] Put maps side by side --- examples/side-by-side.css | 7 +++++++ examples/side-by-side.html | 16 ++++++++++------ 2 files changed, 17 insertions(+), 6 deletions(-) create mode 100644 examples/side-by-side.css diff --git a/examples/side-by-side.css b/examples/side-by-side.css new file mode 100644 index 0000000000..aabe991891 --- /dev/null +++ b/examples/side-by-side.css @@ -0,0 +1,7 @@ +@media (min-width: 800px) { + .half { + padding: 0 10px; + width: 50%; + float: left; + } +} diff --git a/examples/side-by-side.html b/examples/side-by-side.html index 4defaff50b..557751535f 100644 --- a/examples/side-by-side.html +++ b/examples/side-by-side.html @@ -6,10 +6,14 @@ docs: > Two maps (one with the Canvas renderer, one with the WebGL renderer) share the same center, resolution, rotation and layers. tags: "side-by-side, canvas, webgl" --- -

Canvas

-
-

WebGL

-
-