在弯曲的路径中移动div（就像过去在Flash中的补间一样）？
我想构建一个类似的函数
fromHeretoThere(x1,y1,x2,y2){ //.... } 这样我就可以将
这只能使用Canvas吗？ HTML5？ 任何插件/脚本哟建议？
编辑 ：这是一个正在进行的工作，将下面描述的第二个概念打包为可重用的JS对象。 您可以编辑代码或直观地拖动曲线以查看生成的代码：
http://phrogz.net/SVG/animation_on_a_curve.html
我个人使用SVG，它使用
- http://www.w3.org/TR/SVG/images/animate/animMotion01.svg
- https://developer.mozilla.org/en/SVG/Element/animateMotion
- http://devfiles.myopera.com/articles/76/SolarSystem.svg
请注意，您甚至不必实际使用SVG来显示结果; 您可以使用此动画创建一个离屏SVG，并对动画元素的变换进行采样以获得所需的点/旋转。
或者（如果您不想旋转，或者想在控制遍历速率时自己计算它），您可以创建一个SVG路径，并使用getPointAtLength() / getTotalLength()来查找您应该沿着路径的位置。总遍历距离的给定百分比。 有了这个，您甚至不需要SVG文档：
// Moving along an S curve from 0,0 to 250,450 var p = document.createElementNS('http://www.w3.org/2000/svg','path'); p.setAttribute('d','M0,0 C350,20 -200,400 250,450'); var len = p.getTotalLength(); for (var i=0;i<=100;i+=10){ var pct = i/100; var pt = p.getPointAtLength(pct*len); console.log( i, pt.x, pt.y ); } // 0 0 0 // 10 65.54324340820312 10.656576156616211 // 20 117.17988586425781 49.639259338378906 // 30 120.2674789428711 114.92564392089844 // 40 100.49604034423828 178.4400177001953 // 50 78.06965637207031 241.1177520751953 // 60 63.526206970214844 305.9412841796875 // 70 74.59959411621094 370.6294860839844 // 80 122.1227798461914 415.8912658691406 // 90 184.41302490234375 438.8457336425781 // 100 250 450
现在您要做的就是.style.top设置
或.style.top和.style.left 。 唯一的“硬”部分是决定你想要曲线的样子并定义把手放在哪里 。
你至少可以使用：
- JavaScript（ http://api.jquery.com/animate/ ）
- CSS3过渡（ http://www.the-art-of-web.com/css/css-animation/ ）
- canvas（ https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images ）
CSS3可能是最简单的，但JavaScript将是最兼容浏览器的。
您可能还想看看这样的事情：
你想做什么的是什么？
使用jQuery animate的stepfunction，您可以在任何您想要的曲线中设置动画。
对于某些使用canvas的东西更好，但对于大多数小而简单的动画，只需用jQuery更改css值（这就是动画所做的）更快更简单。
这是我做的一个快速演示，构建在jQuery.path插件之上： http ： //jsfiddle.net/zVddG/