YUI Library Examples: Animation Utility: Animating Along a Curved Path

Animating Motion Along a Curved Path

The YUI Animation Utility allows you to animate the motion of an HTMLElement along a curved path using control points.

For this example, we will animate the position of a <div> element named demo. The 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:


1	<style type="text/css">
2	#demo {
3	background:#ccc;
4	height:30px;
5	width:30px;
6	}
7	</style>
	view plain \| print \| ?

Create the demo element and a button to run the animation:


1	<div id="demo">Demo</div>
2	<button id="demo-run">run</button>
	view plain \| print \| ?

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:


1	<script type="text/javascript">
2	var attributes = {
3	points: { to: [600, 10], control: [ [100, 100], [800, 800] ] }
4	};
5	var anim = new YAHOO.util.Motion('demo', attributes);
6	</script>
7	<p>The final step is to call the <code>animate</code> method on our instance to start the animation. The button will be the trigger that begins the animation sequence:</p>
8	<textarea name="code" class="JScript" cols="60" rows="1">
9	<script type="text/javascript">
10	YAHOO.util.Event.on('demo-run', 'click', function() {
11	anim.animate();
12	});
13	</script>
	view plain \| print \| ?

This is an example of animating the motion HTMLElement along a curved path.

YUI Library Examples: Animation Utility: Animating Along a Curved Path

Animating Motion Along a Curved Path

Animation Utility Examples:

More Animation Utility Resources: