在曲线路径中移动div（如Flash中的补间）？ [英] Move a div in a curved path (like tweening in Flash old days)?

问题描述

我想要建立一个函数，例如

  fromHeretoThere（x1，y1，x2，y2）{
 // .... 
} 
  

$ c>< div> 或从HTML页面上的某一点到曲线中的另一点的图片。

使用Canvas？ HTML5？

：这里有一个工作正在进行，打包的任何插件/脚本yo建议？

解决方案

第二概念描述为可重用的JS对象。您可以编辑代码或直观地拖动曲线以查看生成的代码：

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

---

我个人使用SVG ，这使得使用 这样的东西（使用任意Bézier曲线进行动画处理） < 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

ul>



注意，你甚至不必实际使用SVG来显示结果;您可以简单地使用此动画创建一个离屏SVG，并对动画元素的变换进行采样，以获得所需的点/旋转。





或者，想要旋转，或者希望在控制遍历速率时自己计算），您可以创建一个SVG路径，并使用 getPointAtLength（） / getTotalLength（） ，以找到您应该沿着路径在给定百分比的总遍历距离的位置。这样，你甚至不需要一个SVG文档：

  //沿着S曲线从0,0移动到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.6294860639844 
 // 80 122.1227798461914 415.8912658691406 
 // 90 184.41302490234375 438.8457336425781 
 // 100 250 450 
  

现在所有你需要做的是设置<$ c $ < div> 中的 .style.top 和 .style.left 或< img> 。唯一的硬部分是决定曲线的外观，并定义放置手柄的位置 。




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.

Is this doable only using Canvas? HTML5? any plugin/scripts yo suggest?

解决方案

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:

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:

• 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.

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:

// 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.top and .style.left of 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.

这篇关于在曲线路径中移动div（如Flash中的补间）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！