沿弯曲路径移动 div（如 Flash 过去的补间）？答案

【问题标题】：Move a div in a curved path (like tweening in Flash old days)?沿弯曲路径移动 div（如 Flash 过去的补间）？
【发布时间】：2012-01-16 08:27:21
【问题描述】：

我想构建一个类似的函数

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

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

这只能使用 Canvas 吗？ HTML5？你有什么建议的插件/脚本吗？

【问题讨论】：

看到这个问题：stackoverflow.com/questions/2240052/…

标签： javascript jquery html canvas

【解决方案1】：

你至少可以使用：

JavaScript (http://api.jquery.com/animate/)
CSS3 过渡 (http://www.the-art-of-web.com/css/css-animation/)
画布 (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images)

CSS3 可能是最简单的，但 JavaScript 将是最兼容浏览器的。

你可能还想看看这样的东西：

你想做什么？

【讨论】：

【解决方案2】：

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

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

我个人会使用 SVG，它使用 <animateMotion> 元素使这种事情（沿着任意 Bézier 曲线动画）变得微不足道。作为奖励，您甚至可以让它为您计算轮换。一些例子：

请注意，您甚至不必实际使用 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

现在您所要做的就是适当地设置<div> 或<img> 的.style.top 和.style.left。唯一“困难”的部分是决定曲线的外观和定义where to put the handles。

【讨论】：

那么我该如何使用这段代码呢？请曾经做过这个的人，把它放在 github 上，并附上解释。它看起来很棒，但我只需要为动画元素设置曲线的能力，我不需要所有这些拖拽 SVG 的能力。。
@vsync 在该页面上的大“代码”框中查看可以复制/粘贴的 JavaScript 代码。
嗯，但这真的很原始......它不允许你设置超过 2 个点的路径......
@vsync 是的。所以你转向编程，并意识到你可以使用任意形状的任何 SVG 路径。您只需按照上述答案末尾所示对其进行采样。
我已将您的代码修改为更轻量级（还修复了一些 JS 错误）并添加了对反向模式的支持 - codepen.io/yairEO/pen/cbkAF

【解决方案3】：

使用 jQuery animate 的 step 函数，您可以在任何您喜欢的曲线上制作动画。

对于某些事情，使用画布更好，但对于大多数小而简单的动画，只需使用 jQuery 更改 css 值（这就是 animate 所做的）更快更简单。

这是我在 jQuery.path 插件之上构建的快速演示：http://jsfiddle.net/zVddG/

【讨论】：

【解决方案4】：

有时谷歌搜索更容易：

http://yuilibrary.com/yui/docs/anim/curve.html

【讨论】：

YUI 库不再积极维护