The animation engine in jQuery is focussed on single dimensional animation – hence it’s difficult to animate two variables along a path.
jQuery.path provides a method of multidimensional animation, and in particular provides a method for animating along bezier curves and arcs.
Bezier
Example: animate along a bezier path. See demo
var bezier_params = {
start: {
x: 185,
y: 185,
angle: 10
},
end: {
x:540,
y:110,
angle: -10,
length: 0.25
}
}
$("my_elem").animate({path : new $.path.bezier(bezier_params)})
Bezier curves are made form a start point, an end point each with a control point
- start is starting point
- end is the final point
- x,y indicate the coordinates at that point. Required
- angle is the angle of the control point from the line joining the start and end. Optional, default is 0
- length is the distance from the point to it’s control point as a ratio of the distance from start to end. Optional, default is 1/3
Arc
Exampe: animate along an arc. See demo
var arc_params = {
center: [285,185],
radius: 100,
start: 30,
end: 200,
dir: -1
}
$("my_elem").animate({path : new $.path.arc(arc_params)})
- center is the coords of the centre of an imaginary circle that contains the start and end point
- radius is the radius of this circle
- start is the angle of the start point. 0 is “North”, measured clockwise
- end is the angle of the start point. 0 is “North”, measured clockwise
- dir is the direction to move in. Only required if not obvious from start and end (e.g. if start is 100, end is 30, but you want to animate clockwise)
Other Paths
It is trivial to create other paths, or even animate other parameters. E.g:
var SineWave = function() {
this.css = function(p) {
var s = Math.sin(p*20)
var x = 500 - p * 300
var y = s * 50 + 150
var o = ((s+2)/4+0.1)
return {top: y + "px", left: x + "px", opacity: o}
}
};
$("my_elem").animate({path : new SineWave})
September 22, 2009 at 12:17 pm
Cool animations.
Why do I think we’re going to see more and more visual games in the browser?
September 22, 2009 at 12:47 pm
[...] jQuery Path können Objekte einer HTML-Seite relativ leicht auf Pfaden animiert werden. Dies Erweitert die [...]
September 22, 2009 at 1:26 pm
Very good!
September 22, 2009 at 8:08 pm
Awesome.
Will jQuery replace Flash in everything?
September 23, 2009 at 2:36 am
I don’t think JQuery gonna replace Flash, but is an interesting aproach
September 22, 2009 at 10:20 pm
Beautiful!
September 23, 2009 at 5:48 am
Very Useful Great Effect
September 24, 2009 at 2:47 pm
Interesting approach to using jQuery for effects which I so far thought it can only be achieved using Flash.
September 24, 2009 at 3:16 pm
[...] Sample | Tutorial Share and [...]
September 28, 2009 at 3:01 pm
[...] Bezier Curves and Arcs in jQuery [...]
December 29, 2009 at 5:06 pm
Great work on this.
Can I use these effects on none SVG elements?
I’ve spent quite a bit of time not able to make it work with anything but SVG elements.
December 29, 2009 at 5:14 pm
There’s nothing particular to SVG that it’s using there.
The circles are just div’s with a large border-radius.
February 26, 2010 at 5:42 pm
I can’t see to get this to work…. I’m trying to just get an image to move across the screen and it’s not budging. Any one have a simple demo of this running?
March 11, 2010 at 7:26 pm
Would there be a way, using your (amazing) plugin, to get the object to only travel *part* of the way along the bezier curve? So, for instance, I’d like to set a specific curve, and then tell the script to move the object 47% of the distance along that curve. Make sense?
March 12, 2010 at 8:54 am
Should be. e.g. with the sine wave, just pass in a parameter:
var SineWave = function(percentage) { this.css = function(p) { p *= percentage; var s = Math.sin(p*20) var x = 500 - p * 300 var y = s * 50 + 150 var o = ((s+2)/4+0.1) return {top: y + "px", left: x + "px", opacity: o} } };I think that should work
March 12, 2010 at 9:54 pm
Thank you, that works perfectly.
April 3, 2010 at 8:28 pm
[...] Ha hecho un ejemplo con los controles básicos de movilidad, es decir movernos hacia delante, atras y saltar con las flechas del teclado, y para entrar en una página o acceder a un link lo hacemos chocando con los bloques interrogantes suspendidos en el aire, tal y como se hace en el videojuego. Para conseguirlo se ha basado en jQuery, el plugin BackgroundPosition, Easing y añadiendo algunas curvas y arcos. [...]
April 6, 2010 at 4:00 am
[...] of about a half hour to produce. While searching for a plugin that could rotate the object I also found a cool bezier, curve, arc plugin and really it is kind of fun to play around with jQuery. This [...]
April 9, 2010 at 3:59 pm
Thanx a lot. Its that i was searching for my animation game http://motyar.com/angeldreams
Thanx again, you helped me a lot.
May 10, 2010 at 9:02 pm
Hello -
Super awesome plugin -
I have been playing with this and trying to get some sort of bezier animation working on my scrollbars, as though the browser window were travelling on a bezier path.
Any ideas as to how I can tweak this to get it done?
I have been playing with scrollTop and scrollLeft but haven’t been able to have success -
Any ideas?
Thanks -
May 25, 2010 at 12:51 pm
This is fantastic! I’m trying to animate a lot of bubbles, and I’m running into some positioning oddities. Each successive that I add inside the animation boundary moves the “x” position of the start and end properties of the Bezier curve. How can I always refer to the upper left as (0,0) or handle this adjustment more elegantly than hard coding adjusted values?
Thanks in advance!
May 25, 2010 at 12:52 pm
My above post didn’t include the HTML tags I had hoped.
edit: Each successive “img” tag that I add…
May 25, 2010 at 1:01 pm
you’ll have to recalculate at the beginning and ending of each of the parts. Or you could write a new path functions (return the required position for p = 0 to 1)
May 25, 2010 at 1:18 pm
How can I recalculate? Currently, I call myanimation(); which then calls each individual bubbleX(); function. Each of those loops indefinitely. How can each bubble function be aware of other elements? Or do I need a different approach?
I don’t understand your second suggestion at all, can you elaborate?
Thank you!
July 5, 2010 at 2:11 pm
Heyo
First of all: Great Plugin it simplified the whole thing!
Now I have a question. Is there a way to pause the animation on hover and play it from it’s recent position on hoverout?
Thanks. Greetz
July 5, 2010 at 2:29 pm
probably — you’ll have to check how to do that in jQuery in general — same method should work ok .