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

Answer 2

Using jQuery animate's step function you can animate in any curve you'd like.

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.

Here's a quick demonstration I made, built on top of the jQuery.path plugin : http://jsfiddle.net/zVddG/

Answer 3

sometimes googling is easier:

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

Answer 4

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)

CSS3 is probably the easiest, but JavaScript would be the most browser compatible.

You may also want to look at something like this:

• http://jsanim.com/
• http://processingjs.org/

What is it that you're trying to do?