使用JQuery自定义路径动画

Question

我创建了这个将onTouchEvents点发送到Web服务器的Android应用程序，我有一个页面通过Ajax获取运动点JSON数据，如下所示：

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

现在我想使用这些数据并使用平滑路径动画在屏幕上设置div动画，类似于flash路径动画，是否有插件可以解决此问题？

PS：http://weepy.github.com/jquery.path/似乎没有自定义路径动画，或者我可能遗漏了一些东西。

谢谢：）

Answer 1

希望这是您要搜索的内容：jQuery插件crSpline

您可以在here中看到它的演示。

Answer 2

<强>

<强> pathAnimator

超轻量，高性能，设置范围广。

实施例

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
}