This demonstrates how to use the YUI Animation to animate along a curved path. Click the button to begin the demo.
The YUI Animation Utility allows you to animate the motion of an HTMLElement along a curved path using control points.
The first thing we need to do is load the Animation source file and dependencies:
For this example, we will animate the position of a
<div> element named
points attribute, introduced in the
YAHOO.util.Motion subclass, accepts an optional
control field of one or more control points
Add a little style so that we can see the animation in action:
demo element and a button to run the animation:
Now we create an instance of
YAHOO.util.Motion, passing it the element we wish to animate, and the points attribute (an array of [x, y] positions), with the point we are animating to, and the control points that will influence the path: