Use centerZoomEase for smoother walkthrough transitions

This commit is contained in:
Bryan Housel
2019-01-16 01:32:15 -05:00
parent 91bfac5861
commit 460d144c66
5 changed files with 30 additions and 37 deletions
+1 -1
View File
@@ -55,7 +55,7 @@ export function uiIntroArea(context, reveal) {
var msec = transitionTime(playground, context.map().center());
if (msec) { reveal(null, null, { duration: 0 }); }
context.map().zoom(19).centerEase(playground, msec);
context.map().centerZoomEase(playground, 19, msec);
timeout(function() {
var tooltip = reveal('button.add-area',
+7 -9
View File
@@ -80,7 +80,7 @@ export function uiIntroBuilding(context, reveal) {
var msec = transitionTime(house, context.map().center());
if (msec) { reveal(null, null, { duration: 0 }); }
context.map().zoom(19).centerEase(house, msec);
context.map().centerZoomEase(house, 19, msec);
timeout(function() {
var tooltip = reveal('button.add-area',
@@ -328,13 +328,11 @@ export function uiIntroBuilding(context, reveal) {
context.enter(modeBrowse(context));
context.history().reset('hasHouse');
context.map().centerEase(house, 500);
timeout(function() {
if (context.map().zoom() < 20) {
context.map().zoomEase(20, 500);
}
}, 520);
var zoom = context.map().zoom();
if (zoom < 20) {
zoom = 20;
}
context.map().centerZoomEase(house, zoom, 500);
context.on('enter.intro', function(mode) {
if (mode.id !== 'select') return;
@@ -456,7 +454,7 @@ export function uiIntroBuilding(context, reveal) {
var msec = transitionTime(tank, context.map().center());
if (msec) { reveal(null, null, { duration: 0 }); }
context.map().zoom(19.5).centerEase(tank, msec);
context.map().centerZoomEase(tank, 19.5, msec);
timeout(function() {
reveal('button.add-area',
+7 -7
View File
@@ -80,7 +80,7 @@ export function uiIntroLine(context, reveal) {
var msec = transitionTime(tulipRoadStart, context.map().center());
if (msec) { reveal(null, null, { duration: 0 }); }
context.map().zoom(18.5).centerEase(tulipRoadStart, msec);
context.map().centerZoomEase(tulipRoadStart, 18.5, msec);
timeout(function() {
var tooltip = reveal('button.add-line',
@@ -383,7 +383,7 @@ export function uiIntroLine(context, reveal) {
var msec = transitionTime(woodRoadDragMidpoint, context.map().center());
if (msec) { reveal(null, null, { duration: 0 }); }
context.map().zoom(19).centerEase(woodRoadDragMidpoint, msec);
context.map().centerZoomEase(woodRoadDragMidpoint, 19, msec);
timeout(function() {
var padding = 250 * Math.pow(2, context.map().zoom() - 19);
@@ -606,7 +606,7 @@ export function uiIntroLine(context, reveal) {
var msec = transitionTime(deleteLinesLoc, context.map().center());
if (msec) { reveal(null, null, { duration: 0 }); }
context.map().zoom(18).centerEase(deleteLinesLoc, msec);
context.map().centerZoomEase(deleteLinesLoc, 18, msec);
timeout(function() {
var padding = 200 * Math.pow(2, context.map().zoom() - 18);
@@ -649,7 +649,7 @@ export function uiIntroLine(context, reveal) {
context.history().reset('doneUpdateLine');
context.enter(modeBrowse(context));
context.map().zoom(18).centerEase(eleventhAvenueEnd, 500);
context.map().centerZoomEase(eleventhAvenueEnd, 18, 500);
timeout(function() {
var padding = 60 * Math.pow(2, context.map().zoom() - 18);
@@ -747,7 +747,7 @@ export function uiIntroLine(context, reveal) {
function retrySplit() {
context.enter(modeBrowse(context));
context.map().zoom(18).centerEase(eleventhAvenueEnd, 500);
context.map().centerZoomEase(eleventhAvenueEnd, 18, 500);
var advance = function() { continueTo(rightClickIntersection); };
var padding = 60 * Math.pow(2, context.map().zoom() - 18);
@@ -792,7 +792,7 @@ export function uiIntroLine(context, reveal) {
);
timeout(function() {
context.map().zoom(18).centerEase(twelfthAvenue, 500);
context.map().centerZoomEase(twelfthAvenue, 18, 500);
context.map().on('move.intro drawn.intro', function() {
var padding = 200 * Math.pow(2, context.map().zoom() - 18);
@@ -849,7 +849,7 @@ export function uiIntroLine(context, reveal) {
return continueTo(didSplit);
}
context.map().zoom(18).centerEase(twelfthAvenue, 500);
context.map().centerZoomEase(twelfthAvenue, 18, 500);
timeout(function() {
var selected, other, padding, box;
+14 -19
View File
@@ -51,7 +51,7 @@ export function uiIntroNavigation(context, reveal) {
var msec = transitionTime(townHall, context.map().center());
if (msec) { reveal(null, null, { duration: 0 }); }
context.map().zoom(19).centerEase(townHall, msec);
context.map().centerZoomEase(townHall, 19, msec);
timeout(function() {
var centerStart = context.map().center();
@@ -172,34 +172,29 @@ export function uiIntroNavigation(context, reveal) {
context.enter(modeBrowse(context));
context.history().reset('initial');
var entity = context.hasEntity(hallId);
if (!entity) return;
reveal(null, null, { duration: 0 });
context.map().zoomEase(19, 500);
context.map().centerZoomEase(entity.loc, 19, 500);
timeout(function() {
var entity = context.hasEntity(hallId);
if (!entity) return;
context.map().centerEase(entity.loc, 500);
var box = pointBox(entity.loc, context);
reveal(box, t('intro.navigation.click_townhall'));
timeout(function() {
context.map().on('move.intro drawn.intro', function() {
var entity = context.hasEntity(hallId);
if (!entity) return;
var box = pointBox(entity.loc, context);
reveal(box, t('intro.navigation.click_townhall'));
reveal(box, t('intro.navigation.click_townhall'), { duration: 0 });
});
context.map().on('move.intro drawn.intro', function() {
var entity = context.hasEntity(hallId);
if (!entity) return;
var box = pointBox(entity.loc, context);
reveal(box, t('intro.navigation.click_townhall'), { duration: 0 });
});
context.on('enter.intro', function() {
if (isTownHallSelected()) continueTo(selectedTownHall);
});
context.on('enter.intro', function() {
if (isTownHallSelected()) continueTo(selectedTownHall);
});
}, 550); // after centerEase
}, 550); // after zoomEase
}, 550); // after centerZoomEase
context.history().on('change.intro', function() {
if (!context.hasEntity(hallId)) {
@@ -395,7 +390,7 @@ export function uiIntroNavigation(context, reveal) {
var msec = transitionTime(springStreet, context.map().center());
if (msec) { reveal(null, null, { duration: 0 }); }
context.map().zoom(19).centerEase(springStreet, msec); // ..and user can see it
context.map().centerZoomEase(springStreet, 19, msec); // ..and user can see it
timeout(function() {
reveal('.search-header input',
+1 -1
View File
@@ -60,7 +60,7 @@ export function uiIntroPoint(context, reveal) {
var msec = transitionTime(intersection, context.map().center());
if (msec) { reveal(null, null, { duration: 0 }); }
context.map().zoom(19).centerEase(intersection, msec);
context.map().centerZoomEase(intersection, 19, msec);
timeout(function() {
var tooltip = reveal('button.add-point',