Upgrade notes and example update for shortest arc rotation animation

This commit is contained in:
Andreas Hocevar
2017-06-28 15:31:26 +02:00
parent c0e4da6d8c
commit cd4ed759ed
2 changed files with 40 additions and 3 deletions

View File

@@ -1,5 +1,6 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.easing');
goog.require('ol.layer.Tile');
goog.require('ol.proj');
goog.require('ol.source.OSM');
@@ -73,9 +74,16 @@ onClick('rotate-right', function() {
});
onClick('rotate-around-rome', function() {
// Rotation animation takes the shortest arc, so animate in two parts
var rotation = view.getRotation();
view.animate({
rotation: view.getRotation() + 2 * Math.PI,
anchor: rome
rotation: rotation + Math.PI,
anchor: rome,
easing: ol.easing.easeIn
}, {
rotation: rotation + 2 * Math.PI,
anchor: rome,
easing: ol.easing.easeOut
});
});
@@ -103,10 +111,19 @@ onClick('bounce-to-istanbul', function() {
});
onClick('spin-to-rome', function() {
// Rotation animation takes the shortest arc, so animate in two parts
var center = view.getCenter();
view.animate({
center: [
center[0] + (rome[0] - center[0]) / 2,
center[1] + (rome[1] - center[1]) / 2
],
rotation: Math.PI,
easing: ol.easing.easeIn
}, {
center: rome,
rotation: 2 * Math.PI,
duration: 2000
easing: ol.easing.easeOut
});
});