5

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?

1

4 Answers 4

17

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:

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.

8
  • so how do I use this code? please who ever made this, put it in github with explanations..it looks awesome, but I only need the ability to set a curve to an animated element, I don't need all this dragging about of the SVG..
    – vsync
    Jan 30, 2013 at 1:45
  • @vsync Look in the large "CODE" box on that page for JavaScript code you can copy/paste.
    – Phrogz
    Jan 30, 2013 at 2:57
  • hmm but this is REALLY primitive..it doesn't let you set a path with more than 2 points....
    – vsync
    Jan 30, 2013 at 3:25
  • @vsync That's true. So you turn to programming, and realize that you can use any SVG path with arbitrary shape. You just have to sample it as shown at the end of the above answer.
    – Phrogz
    Jan 30, 2013 at 6:06
  • 1
    I've modified your code to be lighter (also fixed some JS mistakes) and added support for reverse mode - codepen.io/yairEO/pen/cbkAF
    – vsync
    Jan 30, 2013 at 18:15
1

sometimes googling is easier:

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

1
  • The YUI library is no longer actively maintained Apr 6, 2018 at 13:23
1

You can use at least:

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

You may also want to look at something like this:

What is it that you're trying to do?

0

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/

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.