Custom path animation using jQuery

Question

I created this Android application that sends onTouchEvents points to a web server, and I have a page that receives the movement point JSON data via Ajax like this:

{"data":[ {"x":224.28035,"y":235.4906}, {"x":263.32916,"y":219.45718}, {"x":293.3667,"y":215.44885},.....]} 

Now I want to use this data and animate the div on the screen with a smooth animation of the path, like the animation of a flash route, is there a plugin that solves this problem?

PS: http://weepy.github.com/jquery.path/ doesn't seem to have a custom path animation, or maybe something is missing for me.

Thanks:)

Answer 1

Hope this is the one you are looking for: jQuery plugin crSpline

You can see his demo in here .

Answer 2

pathAnimator

Ultra lightweight, high performance with a good set of settings.

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 }