Animated transition between views

patch to add transition effect support framework and a resize effect.

This patch provides the framework for implementing transition effects when zooming (as opposed to panning which is being addressed in #110). In essence, we are create a clone of every tile and use that clone as a placeholder while the tile loads.

The basic framework does not change the existing behaviour if no transitionEffect is specified for the layer.

The code adds a 'resize' effect which immediately resizes the clone tile when it is redrawn and the resolution has changed. The resize puts the cloned image in the right place and sizes it correctly to display the old geographic extent at the new resolution, effectively stretching or shrinking the image. When the new tiles have loaded, the clones are hidden and reset to be ready for the next zoom.

A nice side effect of this patch is that cloned tile can be used to provide visual continuity when panning singleTile layers. Currently, when a singleTile layer is panned to the point where it needs to load a new image, the image is hidden and you typically get a flash of the background color of the map container while the image loads. With this patch, the cloned version of the image can be 'left behind' while the new singleTile is requested.

Many thanks to Erik for helping me with the original framework.

Any review/comment/discussion would be appreciated.

New patch has less unrelated crap. Paul, for faster reviews, in general, it's better to ensure that your patch doesn't change files that are unrelated to your changes, or make unneccesary syntax changes, since it slows down reviewing.

This isn't ready to go yet by any means: this was just a syntax review. I'm still in the process of looking through the code; this patch was just a first step.

fewer bits, more clean

crschmidt has found a problem with backBufferTiles requesting content even when they are outside maxExtent.

Problem with maxExtent is fixed.

There is a new problem, there is a noticeable flash in ff2 with caching enabled when using the singleTile resize example. I think the problem exists when the tile loadend and layer loadend are triggered immediately because the image is ready immediately. This is probably indicative of a problem in the sequence that things happen.

current state

Can we review/commit the latest version of this patch as is now? And then I will work on animation.

Paul:

Can you create some documentation -- either in the example, or elsewhere -- that explains the known limitations with the code? (Specifically, the 'flash' is what I'm concerned about documenting.)

And I'd like to get a review in here if possible. Don't want to block on it, but I'll try to review in the next few days.

Sounds good. Should I write a walkthrough of the code changes in the wiki somewhere to make this easier?

Ok, I'll add some notes to the example. Do we need more documentation somewhere like a Transitions page in the wiki that explains how to use the feature?

I thought that at first, but it seems pretty straightforward from the example to me: I'll let others chime in (or bow to your judgement)

(In [6440]) (Re #933). Add note about visual glitch in ffox2 with caching enabled.

Updated patch with a description of the visual glitch in ffox2, no other change from previous patch.

Ok, latest patch makes a few changes to the previous one:

• no modifications to the text layer
• some natural docs changes (including removal of the "keep" transition docs)
• a few changes to tile.resetBackBuffer
  • no need to set the position property, this is handled in clone (and wasn't used here anyway)
  • no need to clone bounds and size (these are not modified and originals aren't destroyed)
  • addition of imageSize and imageOffset properties to support layers with gutters
• changes to image.startTransition to handle imageSize and imageOffset (image size is different than frame size for gutters)

Still reviewing.

Scratch the bit above about not needing the position.

Ok, some weirdness here.

To reproduce:

1. Open transition.html example (helps if you're somewhere with some latency)
2. Switch to single tile layer with "resize" transition effect
3. Zoom in, quickly pan so Italy is centered, zoom out

What I expect: map centered on Italy What I get: map centered on Sardinia (or original center)

I think the same problem exists with multiple tiles, just easier to isolate with a single one.

Ok, I think this is the same issue as the flicker mentioned in the disclaimer.

Tim:

Just to confirm, after a long enough wait, the problem does go away, right? (I do'nt know how slow your connection is, but I agree that is probably related to timing, which is why I can't reproduce it at work, when I have a ridiculous connection to the labs server.)

I haven't been able to reproduce it with multiple tiles: have you?

layer transitions

Ok, I think this is in good shape. A couple more changes (and way too many hours debugging):

1. The ratio != 1 bit was not a good check for "resolutions changed" or "zoomed." Imagine a scenario where you zoom in (ratio == 2) and then you zoom back out (ratio == 1). So, with the ratio != 1 check the buffer tiles were not properly resized and placed when you returned to the original resolution (ratio == 1). By giving tiles a lastRatio property (could do this whole thing in a control with it's own grid to avoid extending tiles so much), we can check if a change in resolution actually occurred (ratio != lastRatio) and resize/reposition accordingly.
2. There were a number of hide/show sequences that didn't appear to be necessary (could have been efforts to get rid of the flicker?)
3. The flicker looks to be the same issue we just had with SVG flicker (my take). It looks like Firefox does not reflow in a predictable way when in a sequence of code triggered by a browser event. In this case, image load triggers our tile "loaded" event (or layer "loaded") and we try to show the main tile before hiding the buffer tile. This sequence is not always respected. The solutions are to continue execution in a separate thread (window.setTimeout(func, 0)) or to set some other dom property (without actually changing it). As with #1390, I think this is best done with the simple property reset hack. This means that tile.show gets a check for gecko and does the hack to force a reflow before the buffer tile is adjusted.

I updated the example and played around with it for a bit. All looks good on Firefox.

The Tween tests (2 of them) are failing. I'm not going to take that on right now.

If someone fixes the Tween tests and confirms that this performs as expected, I think it's good to go.

Ok, false alarm. Passing now. Browser was bogged down.

Thanks Tim. Did you include the things you are talking about in comment 17 in the tranny.patch or is this something I need to look at doing? If you did include it, is this ready to commit now?

The latest patch appears to bring back an old bug. Choose singleTile resize, pan and then zoom. The backBuffer tile is at the pre-pan position. I think this is related to removing the cloning of position or bounds or some combination of them.

Also Tim noted there is a bug if an invalid transitionEffect is specified, need to check this.

My bad, the bug happens when there is an invalid transitionEffect and is not related to Tim's changes. Still need to fix the test for transitionEffect though.

Once more, submitting for review.

updated with minor wording change from r6451

Nice work Paul. Please commit.

Committed. Should we open a new ticket for animation or continue in this one?

Closed in r6452. New ticket, please.