Animate markers when zooming #740

danzel · 2012-06-19T04:27:53Z

When zooming, animate all markers/overlays moving like the map!
This makes the awesome stretch zoom effect way more sexy.

Implemented for Marker, Popover, Path.SVG, Path.Canvas.
Plugins that mess with markers may need minor css updates (I've done a branch of @jacobtoye's Leaflet.iconlabel https://github.com/danzel/Leaflet.iconlabel)

Tested to work on latest: chrome, firefox, safari, opera.
Tested to not do anything different on IE9.

TouchZoom works 99%. There is sometimes an animation error when you release your finger when using SVGs (they slide one way and then slide back). I've been bashing my head against this all day with no progress, so help here is appreciated!
I'm pretty certain Map.TouchZoom._onTouchEnd calculates center wrong, or the maths in Path.SVG._animatePathZoom is incorrect for how ZoomAnimation does the zoom with the value passed here.

Check it out:
http://danzel.github.com/Leaflet/debug/vector/feature-group-bounds.html
http://danzel.github.com/Leaflet/debug/vector/vector-canvas.html

… and reappearing. Currently implemented as a hack in Map.ZoomAnimation.

… is tidy now. Conflicts: src/map/anim/Map.ZoomAnimation.js

…erly (using events) in Marker and Popup.

…k yet but getting there.

…t for touch.

…ght need to fix that.

…of testing each browsers 3d everywhere. Gives opera 3d support! Not totally happy with L.Browser.any3d not being in the closure, but it works.

…w while it is happening or the animation will get messed up

…ome weird movements (two finger scroll on iPad) it makes the animation get weird.

…e to _zooming in Map.TouchZoom. Minor other tidy ups.

mourner · 2012-06-19T07:00:38Z

This is one the best Leaflet pulls ever — thanks Dave, this made my day!

I'll try to figure out the touch zoom issue before merging. Meanwhile, the last touch would be to make this configurable, at least for markers — path root is animated as one but transitions for markers are individual, so there may be a considerable performance hit if you, say, add 10000 markers on the map. I'm not sure if this should be a per-map setting (like tile fade animation) or per-marker, or both.

mourner · 2012-06-19T13:42:32Z

Refactored a bit (animation on a separate zoomanim event instead of zoomstart, simpler calculation for markers and popups, fixed popup autopanning bug, removed some repetition in code): CloudMade@45d9421

mourner · 2012-06-19T13:45:55Z

Still no luck with the touch-zooming issue though...

mourner · 2012-06-19T14:34:04Z

I got a guess! Maybe iOS can't correctly do transition between two different transforms. I'll try refactoring so that instead of transition between touchTransform and animEndTransform it does transition between touchTransform and touchTransform + transformBetweenTouchAndAnimEnd.

mourner · 2012-06-19T14:59:19Z

No, didn't manage to make this work — got too confused and stuck with the math. :(

mourner · 2012-06-19T15:39:57Z

One more weird bug on iOS: double-click-zoom and then immediately do pinch-zoom-out. You'll see a wacky zoom animation twice and after this all pinch-zooming will act like this.

…to allow debugging of transforms :)

danzel · 2012-06-20T01:41:29Z

Heres a test page for the iOS zoom issue so it can be reproduced on desktop chrome:
http://danzel.github.com/Leaflet/debug/vector/touchzoomemu.html

The actual transforms are at fault, not iOS! This should make debugging it easier too

… step of it for easier testing.

…ly for transitions. THIS FIXES TOUCHZOOM WOO!!!

danzel · 2012-06-20T04:32:52Z

Alright, TouchZoom fixed :-)
For why this works, check out this fiddle: http://jsfiddle.net/cstZS/13/
The transforms are equivalent, but the animations that happen are not.

…lse and markers will disappear instead of animating when the zoom animation plays.

danzel · 2012-06-20T04:51:34Z

Option added too. You either have markers animate or not, in which case they disappear while the zoom animates.

This should be all good to pull in now I hope :)

mourner · 2012-06-20T06:23:50Z

The transform fix was really smart, great that you got it fixed!

mourner · 2012-06-20T06:35:43Z

I also noticed (looking at your fork of Leaflet.iconlabel) that style changes for different overlays are similar, so maybe we need to DRY it up a little by making one class for all animatable overlays (e.g. leaflet-anim-overlay).

Also, I planned to refactor layers code in future to make all layers to be inherited from a base layer class that contains repeated logic (like animation). We could make two animation mixins then, for example, one for scaled animated layers (like vectors and image overlays) and other for static animated layers (like markers and popups).

mourner · 2012-06-20T06:36:48Z

I'll still merge the pull, these are just some thoughts for future. :)

mourner · 2012-06-20T08:10:57Z

Fixed panning animations in Firefox/Opera in my branch, tested a bit more... Chrome is butter-smooth, a pity that Firefox doesn't work such well.

Some more thoughts... I think there may be a lot of users that have several hundreds of markers on the map or more, and they may experience great zoom lags after upgrade, especially on Firefox. Maybe it would be nice to make the defaults more intelligent by tracking the number of markers that were added to the map and automatically switching off marker zoom animation above a certain threshold. E.g. there would be two options — maxAnimatedMarkers (set by default depending on the browser - e.g. 400 for Chrome, 100 for Firefox) and animateMarkerZoom (not set by default, that would override the max behavior and manually turned it off/on).

danzel · 2012-06-20T22:25:26Z

Will do another pass on the css bits today to tidy them up.

On the markers limit I would be hesitant to add it as the real limits also vary based on browser version and computer spec. We could provide a method so users can turn the animation on or off?
I'll test a bit more today and see if I still think the same later, chrome on my box handles ~800 markers fully animated no worry.

…win8 touch tablet, now I just need someone to give me one to test on :-)

danzel · 2012-06-20T23:09:26Z

I've looked at the limits.

Chrome on my box is smooth up to around 1000.
Safari on a Macbook Air is smooth at 1000.
Firefox is smooth to about 200 (with firebug disabled).
Opera is smooth to 1000 also, but it doesn't reliably fire the transition end event past around 250 (Add 1000 points, hit the zoom out button. It zooms out but doesn't fire transition end). So we would probably want to limit this also.

It would be a bit weird if a user using a map gets the animations, then suddenly after adding another marker and going past the limit the animations disappear.
If the client application handled this (always have the animation on these browsers, never have on these), based on how many markers they expect to have, then this would provide a better user experience.

…a we are doing the zoom animation), be pointless otherwise ;)

…ibility directly.

…ting in the CSS what things are zoom animated.

danzel · 2012-06-21T01:31:46Z

The Future is now!

Changed to use classes for hiding/animating. Leaflet.iconlabel has the same changes.
Much DRYer :-)

mourner · 2012-06-21T11:54:47Z

Merged into master, yay :)

mourner · 2012-06-21T12:31:45Z

Please submit a pull to gh-pages-master with corresponding docs updates.

mourner · 2012-06-25T15:56:56Z

src/dom/DomUtil.js

@@ -156,6 +156,7 @@ L.DomUtil = {
 L.Util.extend(L.DomUtil, {
 	TRANSITION: L.DomUtil.testProp(['transition', 'webkitTransition', 'OTransition', 'MozTransition', 'msTransition']),
 	TRANSFORM: L.DomUtil.testProp(['transformProperty', 'WebkitTransform', 'OTransform', 'MozTransform', 'msTransform']),
+	BACKFACEVISIBILITY: L.DomUtil.testProp(['backfaceVisibility', 'WebkitBackfaceVisibility', 'OBackfaceVisibility', 'MozBackfaceVisibility', 'msBackfaceVisibility']),


One question, did you cover backface visibility in other browsers intentionally? As far as I remember, I added it as a nasty Android bugfix, so it doesn't need to be used in non-webkit browsers.

Nope, just made it generic as it was before. Probably wants a comment as to why it is as it is. I'll add one.

danzel added 24 commits June 19, 2012 09:20

Start on making markers animate when zooming rather than disappearing…

51fb9ee

… and reappearing. Currently implemented as a hack in Map.ZoomAnimation.

Add gecko3d support to Browser/DomUtil

cc304bf

Make Map.ZoomAnimation hack browser independant, works on firefox too :)

04bb46a

Position Popup using L.DomUtil.setPosition for Hardware Accel.

65fe7a8

Only apply Path.SVG mobile Webkit hack for mobileWebkit

6de0257

Animate popup boxes when zooming

ccbd43f

Animate SVG layers when zooming

6e1802a

Fix up SVG zooming with firefox

1fc674b

Do major tidy ups on the SVG zoom animation, pretty certain that this…

d30d057

… is tidy now. Conflicts: src/map/anim/Map.ZoomAnimation.js

Code tidy up/compaction

c42ce59

Only do SVG zoomstart handling if we support 3d transforms

86596da

Move more zoom animation bits out to css

0b30a9b

Fix up Map.js zoomstart event

1ac3a1b

Remove remaining hacks from Map.ZoomAnimation and implement them prop…

c04020a

…erly (using events) in Marker and Popup.

Working towards making this work on touch browsers. Doesn't quite wor…

b33d1f3

…k yet but getting there.

Don't animate movement when zooming by touch. Still doesn't work righ…

da475a9

…t for touch.

Fix merge issue

9bb49ac

Fix up TouchZoom free-zoom. 'zoomstart' event is abused a bit now, mi…

4b638bd

…ght need to fix that.

Add L.Browser.opera3d, L.Browser.any3d and use it everywhere instead …

063341c

…of testing each browsers 3d everywhere. Gives opera 3d support! Not totally happy with L.Browser.any3d not being in the closure, but it works.

Make BackfaceVisibility generic.

60f4a70

Path.SVG needs to keep track of when a zoom is going on and not redra…

0556e73

…w while it is happening or the animation will get messed up

Add zooming animation support to Path.Canvas layers also.

bda2a8a

Fix up TouchZoom SVG zoom handling AGAIN. This works, but if you do s…

289071f

…ome weird movements (two finger scroll on iPad) it makes the animation get weird.

rename _zooming inside Path to _pathZooming so it has a different nam…

8d605a0

…e to _zooming in Map.TouchZoom. Minor other tidy ups.

refactoring, fix autopanning bug

45d9421

move private method into correct place

ff47132

Add a test page that emulates a buggy touch zoom on desktop browsers …

7ff7959

…to allow debugging of transforms :)

danzel added 3 commits June 20, 2012 13:48

Add another hack test and move the buttons around the right

c94e617

Update hacky test so 1 does a full animation and 2 does just a single…

3dad249

… step of it for easier testing.

Correct the translate+scale code in Path.SVG so that it works correct…

92f9541

…ly for transitions. THIS FIXES TOUCHZOOM WOO!!!

danzel added 2 commits June 20, 2012 16:48

Re-Add TouchZoom firing the zoomstart event

be9f96c

Add an option to the map: animateMarkerZoom (default true). Set to fa…

f56682e

…lse and markers will disappear instead of animating when the zoom animation plays.

Fix panning animations in Firefox/Opera

6713200

Use generic transform rather than webkit, should make this work on a …

df07bf0

…win8 touch tablet, now I just need someone to give me one to test on :-)

danzel added 4 commits June 21, 2012 11:15

Only do Marker/Path zoom animation if options.zoomAnimation is on (Ak…

1062286

…a we are doing the zoom animation), be pointless otherwise ;)

Change animateMarkerZoom to use a class/style rather than setting vis…

6d725f0

…ibility directly.

Use a generic class (leaflet-zoom-animated) instead of explicitly sta…

9cec664

…ting in the CSS what things are zoom animated.

Fix canvas zooming

4bc3455

mourner merged commit 4bc3455 into Leaflet:master Jun 21, 2012

danzel mentioned this pull request Jun 21, 2012

Rename animateMarkerZoom to markerZoomAnimation to match other animation options. #744

Merged

mourner reviewed Jun 25, 2012
View reviewed changes

Uh oh!

Animate markers when zooming #740

Animate markers when zooming #740

Uh oh!

Conversation

danzel commented Jun 19, 2012

Uh oh!

mourner commented Jun 19, 2012

Uh oh!

mourner commented Jun 19, 2012

Uh oh!

mourner commented Jun 19, 2012

Uh oh!

mourner commented Jun 19, 2012

Uh oh!

mourner commented Jun 19, 2012

Uh oh!

mourner commented Jun 19, 2012

Uh oh!

danzel commented Jun 20, 2012

Uh oh!

danzel commented Jun 20, 2012

Uh oh!

danzel commented Jun 20, 2012

Uh oh!

mourner commented Jun 20, 2012

Uh oh!

mourner commented Jun 20, 2012

Uh oh!

mourner commented Jun 20, 2012

Uh oh!

mourner commented Jun 20, 2012

Uh oh!

danzel commented Jun 20, 2012

Uh oh!

danzel commented Jun 20, 2012

Uh oh!

danzel commented Jun 21, 2012

Uh oh!

mourner commented Jun 21, 2012

Uh oh!

mourner commented Jun 21, 2012

Uh oh!

mourner Jun 25, 2012

Choose a reason for hiding this comment

Uh oh!

danzel Jun 25, 2012

Choose a reason for hiding this comment

Uh oh!

Uh oh!