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曲线动画化）变得微不足道。作为奖励，您甚至可以让它为您计算轮换。一些例子：

请注意，您甚至不必实际使用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的{{1}}和<div>。唯一的“硬”部分是决定你想要曲线的样子并定义where to put the handles。

Answer 2

您至少可以使用：

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将是浏览器兼容性最高的。

你可能还想看看这样的事情：

你尝试做什么？

Answer 3

有时谷歌搜索更容易：

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

Answer 4

使用jQuery animate的步进功能，您可以在任何您想要的曲线中设置动画。

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

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

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

4 个答案: