Geek Answers Handbook

How to animate shapes on top of a flyer card

I am new to the flyer, looking for advice.

I would like to create an animation of some marker (for example, filled with an html5 arc or form) in order to play GPS tracks on the map. I may need some animated markers, and I want to be flexible in terms of behavior and performance. Can anyone recommend a good way to create this type of animation?

It looks like I could create a canvas layer (L.TileLayer.Canvas) and draw it using a linear animation technique (e.g. http://www.html5canvastutorials.com/advanced/html5-canvas-linear-motion-animation/ ), but I'm still not sure if this works, or I need to call redraw () and how it will work. Or I could try to make client tokens and move them by setting lat / lon on them with some interval.

Can anyone understand this and recommend a solution (above ideas or others)? Ideally, when I zoom in, the animation will "scale" and have good performance. Thanks!

+4
source share
2 answers

The RaphaelLayer plugin allows you to create pretty nice animations:

http://dynmeth.github.com/RaphaelLayer/

+1
source

Yes, there are several ways to approach the problem ... drawing on an interactive map is difficult, because you need to recount your position on panning and zooming events; in addition to managing your actual animation.

This is a great example of using the D3 library to control animations in a continuous loop, maybe you can change the code for several animations. http://zevross.com/blog/2014/09/30/use-the-amazing-d3-library-to-animate-a-path-on-a-leaflet-map/

If you want a little more bolts and bolts on how the drawing process works, this project may be the best starting point http://bl.ocks.org/Sumbera/11114288#L.CanvasOverlay.js This captures the overlap panel (leaflet canvas, which you can draw on) and ... draw on it ...

and you will definitely want to check out this link that describes the drawing process for an interactive map

+1
source

More articles:


All Articles