From 3d26d3bdc6d4669987ebd7edec27cc743b4de82d Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 5 Nov 2016 13:23:45 -0600 Subject: [PATCH] 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); +});