Leaflet.ParallaxMarker
Leaflet.ParallaxMarker copied to clipboard
zoom animation ideas (?)
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
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.
Sure, I'd be glad to try it out (although it may be a few weeks before I find the time).
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
(PS: there's another idea that just came to mind that I'll try out in the coming days)
Not much ideas here, been busy on vacation. Looking forward to another update from your part, so keep up the good work ;)
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.
Took a look at your newest code, but didn't find any quick solution either :/