ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve example legibility

Browse Source
This commit is contained in:
Tim Schaub
2016-11-06 09:47:15 -07:00
parent 3455686734
commit 337c6bb73e
1 changed files with 39 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
examples/animation.js
View File

@@ -4,34 +4,6 @@ goog.require('ol.layer.Tile');
goog.require('ol.proj');
goog.require('ol.source.OSM');
// from https://github.com/DmitryBaranovskiy/raphael
function bounce(t) {
var s = 7.5625, p = 2.75, l;
if (t < (1 / p)) {
l = s * t * t;
} else {
if (t < (2 / p)) {
t -= (1.5 / p);
l = s * t * t + 0.75;
} else {
if (t < (2.5 / p)) {
t -= (2.25 / p);
l = s * t * t + 0.9375;
} else {
t -= (2.625 / p);
l = s * t * t + 0.984375;
}
}
}
return l;
}
// from https://github.com/DmitryBaranovskiy/raphael
function elastic(t) {
return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
}
var london = ol.proj.fromLonLat([-0.12755, 51.507222]);
var moscow = ol.proj.fromLonLat([37.6178, 55.7517]);
var istanbul = ol.proj.fromLonLat([28.9744, 41.0128]);
@@ -57,33 +29,64 @@ var map = new ol.Map({
view: view
});
document.getElementById('rotate-left').addEventListener('click', function() {
// A bounce easing method (from https://github.com/DmitryBaranovskiy/raphael).
function bounce(t) {
var s = 7.5625, p = 2.75, l;
if (t < (1 / p)) {
l = s * t * t;
} else {
if (t < (2 / p)) {
t -= (1.5 / p);
l = s * t * t + 0.75;
} else {
if (t < (2.5 / p)) {
t -= (2.25 / p);
l = s * t * t + 0.9375;
} else {
t -= (2.625 / p);
l = s * t * t + 0.984375;
}
}
}
return l;
}
// An elastic easing method (from https://github.com/DmitryBaranovskiy/raphael).
function elastic(t) {
return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
}
function onClick(id, callback) {
document.getElementById(id).addEventListener('click', callback);
}
onClick('rotate-left', function() {
view.animate({
rotation: view.getRotation() + Math.PI / 2
});
});
document.getElementById('rotate-right').addEventListener('click', function() {
onClick('rotate-right', function() {
view.animate({
rotation: view.getRotation() - Math.PI / 2
});
});
document.getElementById('rotate-around-rome').addEventListener('click', function() {
onClick('rotate-around-rome', function() {
view.animate({
rotation: view.getRotation() + 2 * Math.PI,
anchor: rome
});
});
document.getElementById('pan-to-london').addEventListener('click', function() {
onClick('pan-to-london', function() {
view.animate({
center: london,
duration: 2000
});
});
document.getElementById('elastic-to-moscow').addEventListener('click', function() {
onClick('elastic-to-moscow', function() {
view.animate({
center: moscow,
duration: 2000,
@@ -91,7 +94,7 @@ document.getElementById('elastic-to-moscow').addEventListener('click', function(
});
});
document.getElementById('bounce-to-istanbul').addEventListener('click', function() {
onClick('bounce-to-istanbul', function() {
view.animate({
center: istanbul,
duration: 2000,
@@ -99,7 +102,7 @@ document.getElementById('bounce-to-istanbul').addEventListener('click', function
});
});
document.getElementById('spin-to-rome').addEventListener('click', function() {
onClick('spin-to-rome', function() {
view.animate({
center: rome,
rotation: 2 * Math.PI,
@@ -107,7 +110,7 @@ document.getElementById('spin-to-rome').addEventListener('click', function() {
});
});
document.getElementById('fly-to-bern').addEventListener('click', function() {
onClick('fly-to-bern', function() {
var duration = 2000;
view.animate({
center: bern,