Javascript 在弯曲的路径中移动一个 div（就像过去 Flash 中的补间）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8438830/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Move a div in a curved path (like tweening in Flash old days)?
提问by Francesco
I'd like to build a function like
我想建立一个像
fromHeretoThere(x1,y1,x2,y2){
//....
}
So that I can move a <div>or an image from one point on the HTML page to another point in a curve.
这样我就可以将一个<div>或一个图像从 HTML 页面上的一个点移动到曲线上的另一个点。
Is this doable only using Canvas? HTML5? any plugin/scripts yo suggest?
这仅使用 Canvas 可行吗？HTML5？任何插件/脚本哟建议？
回答by Phrogz
Edit: Here's a work in progress that packages up the second concept described below as a re-usable JS object. You can edit the code or visually drag the curve to see the resulting code:
编辑：这是一项正在进行的工作，它将下面描述的第二个概念打包为可重用的 JS 对象。您可以编辑代码或直观地拖动曲线以查看生成的代码：
http://phrogz.net/SVG/animation_on_a_curve.html
http://phrogz.net/SVG/animation_on_a_curve.html
I'd personally use SVG, which makes this sort of thing (animating along an arbitrary Bézier curve) trivial using the <animateMotion>element. As a bonus, you can even cause it to calculate the rotation for you. Some examples:
我个人会使用 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
- 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
Note that you don't even have to actually use SVG to display the result; you could simply create an off-screen SVG with this animation and sample the transform of the animated element to get your desired point/rotation.
请注意，您甚至不必实际使用 SVG 来显示结果；您可以简单地使用此动画创建一个离屏 SVG，并对动画元素的变换进行采样以获得所需的点/旋转。
Alternatively (if you don't want the rotation, or want to calculate it yourself while controlling the rate of traversal) you can create an SVG path and just use getPointAtLength()/getTotalLength()to find where you should be along the path at a given percentage of the total traversal distance. With this you don't even need an SVG document:
或者（如果您不想要旋转，或者想要在控制遍历速率的同时自己计算它），您可以创建一个 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
Now all you have to do is set the .style.topand .style.leftof your <div>or <img>appropriately. The only 'hard' part is deciding what you want to the curve to look like and defining where to put the handles.
现在您所要做的就是适当地设置您的或的.style.top和。唯一“困难”的部分是确定您希望曲线的外观并定义放置手柄的位置。.style.left<div><img>
回答by Jamund Ferguson
You can use at least:
您至少可以使用：
- JavaScript (http://api.jquery.com/animate/)
- CSS3 Transitions (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)
- 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 is probably the easiest, but JavaScript would be the most browser compatible.
CSS3 可能是最简单的，但 JavaScript 将是最兼容浏览器的。
You may also want to look at something like this:
您可能还想查看以下内容：
What is it that you're trying to do?
你想做什么？
回答by Francesco
回答by adeneo
Using jQuery animate's step function you can animate in any curve you'd like.
使用 jQuery animate 的 step 函数，您可以在您想要的任何曲线上设置动画。
For some things using a canvas is better, but for most small and simple animations just changing css values with jQuery (this is what animate does) is faster and simpler.
对于某些事情，使用画布更好，但对于大多数小而简单的动画，只需使用 jQuery 更改 css 值（这就是 animate 所做的）更快更简单。
Here's a quick demonstration I made, built on top of the jQuery.path plugin : http://jsfiddle.net/zVddG/
这是我制作的快速演示，建立在 jQuery.path 插件之上：http: //jsfiddle.net/zVddG/
