Leaflet.ParallaxMarker icon indicating copy to clipboard operation
Leaflet.ParallaxMarker copied to clipboard

zoom animation ideas (?)

Open jwasilgeo opened this issue 6 years ago • 7 comments

Really neat Leaflet plugin! I saw your readme's "to do" note about

Make things work smoother on zoom animation

and it reminded me of how I ended up doing zoom animation for canvas elements here: https://github.com/jwasilgeo/Leaflet.Canvas-Flowmap-Layer/blob/master/src/CanvasFlowmapLayer.js#L482

I know it isn't quite the same since it is for canvas elements, but maybe it'll give you some ideas to work with? It is a bit easier to follow in the original place I got the inspiration from here: https://github.com/Leaflet/Leaflet.heat/blob/gh-pages/src/HeatLayer.js

jwasilgeo avatar Jul 09 '17 18:07 jwasilgeo

Thanks! Yeah definately some inspiration to be fetched there. Do you want to try to make an implementation, perhaps? It should be possible to just calculate the end position and make the same CSS transform stuff that leaflet already does.

dagjomar avatar Jul 09 '17 23:07 dagjomar

Sure, I'd be glad to try it out (although it may be a few weeks before I find the time).

jwasilgeo avatar Jul 18 '17 19:07 jwasilgeo

I've not had too much luck yet with getting the CSS transforms to occur during the zoom animations; however, (at Leaflet v1) I was able to simplify some of the code and somewhat alleviate the visual "jumpiness" by only relying on the map's move listener. It looks pretty good when using map.flyToBounds and map.flyTo.

Thoughts? I'll have to keep on trying, but for now:

https://github.com/jwasilgeo/Leaflet.ParallaxMarker/blob/d28c1fc225a5b8626fd5b40b841096a21b1be9fd/Leaflet.Marker.Parallax.js#L8-L17

jwasilgeo avatar Jul 28 '17 12:07 jwasilgeo

(PS: there's another idea that just came to mind that I'll try out in the coming days)

jwasilgeo avatar Jul 28 '17 12:07 jwasilgeo

Not much ideas here, been busy on vacation. Looking forward to another update from your part, so keep up the good work ;)

dagjomar avatar Jul 30 '17 23:07 dagjomar

I tried a few more things, but settled on this idea to try to calculate the "future" offset and parallax based on the _animateZoom handler's event info about the next zoom and center. Here's my latest update: https://github.com/jwasilgeo/Leaflet.ParallaxMarker/blob/master/Leaflet.Marker.Parallax.js#L32

Visually you can sort of see that there is about 1 intermediate "step" during a typical zoom event where Leaflet updates the parallax of the marker. The animation is still jumpy, but the marker seems to at least step in the direction of its eventual parallax location.

Not sure if this is something you'd want, but I'm happy to submit a PR if you're interested.

jwasilgeo avatar Aug 03 '17 13:08 jwasilgeo

Took a look at your newest code, but didn't find any quick solution either :/

dagjomar avatar Aug 03 '17 19:08 dagjomar