在弯曲的路径中移动一个div(就像过去在Flash中的补间一样)？

Question

我想建立一个像这样的函数

fromHeretoThere(x1,y1,x2,y2){
  //....
}

这样我就可以将一个<div>或一个图像从HTML页面上的一个点移动到曲线中的另一个点.

这只能使用Canvas吗？HTML5？任何插件/脚本哟建议？

Answer 1

编辑:这是一个正在进行的工作,将下面描述的第二个概念打包为可重用的JS对象.您可以编辑代码或直观地拖动曲线以查看生成的代码:

http://phrogz.net/SVG/animation_on_a_curve.html

我个人使用SVG,它使用该<animateMotion>元素使这种事情(沿任意Bézier曲线动画)变得微不足道.作为奖励,您甚至可以让它为您计算轮换.一些例子:

• 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.left您的<div>或<img>适当的.唯一的"硬"部分是决定你想要曲线的样子并定义放置把手的位置.