javascript - 以弯曲的路径移动一个 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> 使这类事情(沿任意贝塞尔曲线动画)变得微不足道。元素。作为奖励，您甚至可以让它为您计算旋转。一些例子:

• 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>适本地。唯一“困难”的部分是决定你想让曲线看起来像什么并定义 where to put the handles .