你会如何设置动画以使其跟随曲线？
如果我有
我怎么能让它在曲线上移动？ 我用Google搜索了所有内容，但似乎无法找到另一个可以同时调用两个函数的示例。 这是我想要的代码，但不起作用：
$('#curve').click(function () { $(this).animate( { top: 400, left = $(this).left() + $(this).left()*$(this).left() }, 'slow', function() { $(this).animate( { left: 600 }, 'fast' ); } ); });
即使这不是正确的代码，我相信动画只需要“目的地”来进行某些操作，因此我认为动态目标不起作用。 我想要做些什么呢？
编辑::我肯定会拿起那个插件，但我也想知道为什么这些代码不能像我期望的那样工作。
这是使用for循环和延迟方法的另一种尝试
$('#curve').click(function () { for (var i=0; i<400; i++ ) { $(this).delay(1000); $(this).css( { top: i, left: i*1.5 } ); } });
除了它只是立即到那个位置，没有延迟或任何东西。 所以，如果它是从[0,0]开始，我一点击它就会传送到[400,600]。 为什么延迟不起作用？
我想这一次，你必须在js中逐个重新计算动画曲线然后通过移动一小部分来做（=你可能找到插件或者你必须自己完成所有数学运算）
编辑2 ：之前添加的链接被移动=> http://foxparker.wordpress.com/2009/09/22/bezier-curves-and-arcs-in-jquery/ 。 谢谢，扎克。
编辑1 ：这引起了我的兴趣，所以我做了一些谷歌研究 – 就像我想的那样：插件准备在这里使用： http ： //foxparker.wordpress.com/2009/09/22/bezier-curves-and-arcs-in -jquery /
jQuery.path插件是你想要的：
示例：沿弧线动画
var arc_params = { center: [285,185], radius: 100, start: 30, end: 200, dir: -1 }; $("my_elem").animate({path : new $.path.arc(arc_params)});
示例：沿正弦波动画
var SineWave = function() { this.css = function(p) { var s = Math.sin(p*20); var x = 500 - p * 300; var y = s * 50 + 150; var o = ((s+2)/4+0.1); return {top: y + "px", left: x + "px", opacity: o}; } }; $("my_elem").animate({path : new SineWave});
这是我写的一个简单的小库，它允许动画路径的任意三维Bézier曲线，甚至可以为你计算旋转角度。 （该库尚未完善或记录，但它表明，即使页面中没有SVG元素，站在SVG DOM的肩膀上也是多么容易。）
http://phrogz.net/SVG/animation_on_a_curve.html
您可以编辑代码并观察曲线/动画更改，也可以编辑曲线并查看代码更新。
如果我的网站关闭，这里是后代的相关代码：
function CurveAnimator(from,to,c1,c2){ this.path = document.createElementNS('http://www.w3.org/2000/svg','path'); if (!c1) c1 = from; if (!c2) c2 = to; this.path.setAttribute('d','M'+from.join(',')+'C'+c1.join(',')+' '+c2.join(',')+' '+to.join(',')); this.updatePath(); CurveAnimator.lastCreated = this; } CurveAnimator.prototype.animate = function(duration,callback,delay){ var curveAnim = this; // TODO: Use requestAnimationFrame if a delay isn't passed if (!delay) delay = 1/40; clearInterval(curveAnim.animTimer); var startTime = new Date; curveAnim.animTimer = setInterval(function(){ var elapsed = ((new Date)-startTime)/1000; var percent = elapsed/duration; if (percent>=1){ percent = 1; clearInterval(curveAnim.animTimer); } var p1 = curveAnim.pointAt(percent-0.01), p2 = curveAnim.pointAt(percent+0.01); callback(curveAnim.pointAt(percent),Math.atan2(p2.y-p1.y,p2.x-p1.x)*180/Math.PI); },delay*1000); }; CurveAnimator.prototype.stop = function(){ clearInterval(this.animTimer); }; CurveAnimator.prototype.pointAt = function(percent){ return this.path.getPointAtLength(this.len*percent); }; CurveAnimator.prototype.updatePath = function(){ this.len = this.path.getTotalLength(); }; CurveAnimator.prototype.setStart = function(x,y){ var M = this.path.pathSegList.getItem(0); Mx = x; My = y; this.updatePath(); return this; }; CurveAnimator.prototype.setEnd = function(x,y){ var C = this.path.pathSegList.getItem(1); Cx = x; Cy = y; this.updatePath(); return this; }; CurveAnimator.prototype.setStartDirection = function(x,y){ var C = this.path.pathSegList.getItem(1); C.x1 = x; C.y1 = y; this.updatePath(); return this; }; CurveAnimator.prototype.setEndDirection = function(x,y){ var C = this.path.pathSegList.getItem(1); C.x2 = x; C.y2 = y; this.updatePath(); return this; };
你在使用jQuery 1.4吗？
$(this).animate({ left: [500, 'easeInSine'], top: 500 });
你需要使用缓动插件才能工作： http ： //gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js
例如http://jsbin.com/ofiye3/2
有一个很小的脚本，只是用于不是直线的动画，叫做pathAnimator
它非常小巧，超级高效。 你甚至不需要jQuery;）