How to animate an image along a path with Bezier curves

问题

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?

回答1:

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

回答2:

There's a tiny script (SVG based), just for animation which isn't in straight lines,
called pathAnimator (2kb), It's very very small and very efficient.
No jQuery required.

For example:

var path = "M150 0 L75 200 L225 200 Z";         // an SVG path
    pathAnimator = new PathAnimator( path ),    // initiate a new pathAnimator object
    speed = 6,              // seconds that will take going through the whole path
    reverse = false,        // go back or forward along the path
    startOffset = 0,        // between 0% to 100%
    easing = function(t){ t*(2-t) };    // optional easing function


pathAnimator.start( speed, step, reverse, startOffset, finish, easing);

function step( point, angle ){
    // do something every "frame" with: point.x, point.y & angle
}

function finish(){
    // do something when animation is done
}

(can even get more efficient using fastdom)

来源：https://stackoverflow.com/questions/13612942/how-to-animate-an-image-along-a-path-with-bezier-curves

标签

javascript

internet-explorer

jquery-animate

bezier