Move a div in a curved path (like tweening in Flash old days)?

Question

I\'d like to build a function like

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

So that I can move a

or an image from

Answer 1

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

or appropriately. The only 'hard' part is deciding what you want to the curve to look like and defining where to put the handles.

0 讨论(0)

查看其它4个回答

发布评论:

提交评论

---

•  加载中...