使用JQuery自定义路径动画

Custom path animation using JQuery

本文关键字：动画 路径 自定义 JQuery 使用      更新时间：2023-09-26

我创建了这个android应用程序，它将onTouchEvents点发送到web服务器，我有一个页面，它通过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/似乎没有自定义路径动画，或者我可能缺少一些东西。

感谢：）

希望这就是您正在搜索的：jQuery插件crSpline

你可以在这里看到它的演示。

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
}
相关文章：