My goal:
- Move/animate an image along a path like the drawing below (Could be connecting bezier curves).
- Must work in IE7+, don’t what to build multiple solutions.
- I can pause/resume the moving image.
- The image will keep moving along the path (repeat).
What I have considered
- CANVAS: not supported in IE7+8, haven’t tested explorercanvas yet! Foresee some z-index issues.
- SVG, not supported in IE7+8.
- jQuery.path, a plugin that extends the jQuery animate function. Can’t figure out the resume part and I want to use CSS transforms when supported.
My plan
- Animate the image with CSS 3D transform, CSS 2d transform or jQuery.animate (what supported) and requestAnimationFrame.
- Calculate all the coordinates and simple move the image pixel by pixel.
My question
- Does my plan sound like madness? Better suggestions?
- Do you foresee some performance issues? I might end up with 5K or 10K coordinates.
- Do you know a smart way, a program, a function or anything similar to calculate all the coordinates?
I would recommend you to use GSAP : http://www.greensock.com/get-started-js/
With that you can handle timelines, and here is a bezier plugin : http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html
regards