curve.mustache revision ea7c9c12989fa8a2b07209be8f4c89f5dbeb5b12
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<div class="intro">
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney <p>This demonstrates how to animate the position of an element along a <code>curve</code>.</p>
57135c36536a2f81ce818f6a006f002261972244Jeff Conniff <p>Click the button or drag the dots to see the animation. You can use this
57135c36536a2f81ce818f6a006f002261972244Jeff Conniff example as a tool to find the right XY values for start, end, and control points
ea7c9c12989fa8a2b07209be8f4c89f5dbeb5b12Jeff Conniff that will give you the right shape path for your own animation on a curve.</p>
ea7c9c12989fa8a2b07209be8f4c89f5dbeb5b12Jeff Conniff <p>The curved line shown here between points 0 and 3 is just for preview
ea7c9c12989fa8a2b07209be8f4c89f5dbeb5b12Jeff Conniff purposes, and is not part of animation on a curve. The draggable points 0 - 3
ea7c9c12989fa8a2b07209be8f4c89f5dbeb5b12Jeff Conniff are displayed only for UI interactivity.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<div class="example">
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney{{>curve-source}}
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Setting up the HTML</h2>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>First we add some HTML to animate.</p>
57135c36536a2f81ce818f6a006f002261972244Jeff Conniff<div class="example">
57135c36536a2f81ce818f6a006f002261972244Jeff Conniff <button id="btn-animate" class='yui3-button'>Animate On Path</button>
57135c36536a2f81ce818f6a006f002261972244Jeff Conniff <div id="demo">A</div>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Creating the Anim Instance</h2>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>Now we create an instance of <code>Y.Anim</code>, passing it a configuration object that includes the <code>node</code> we wish to animate.</p>
57135c36536a2f81ce818f6a006f002261972244Jeff Conniffvar demoA = Y.one('#demo');
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeneyvar anim = new Y.Anim({
57135c36536a2f81ce818f6a006f002261972244Jeff Conniff node: demoA,
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney duration: 1.5,
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Changing Attributes</h2>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>A click handler will set the <code>to</code> value before <code>run</code> is called.</p>
57135c36536a2f81ce818f6a006f002261972244Jeff Conniffvar startAnim = function(e) {
57135c36536a2f81ce818f6a006f002261972244Jeff Conniff curve: [ [x1, y1], [x2, y2], [x3, y3] ] // Where 1 and 2 are curve control points, and 3 is the end point.
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Running the Animation</h2>
57135c36536a2f81ce818f6a006f002261972244Jeff Conniff<p>If the animation will be run multiple times, you'll need to reset the position of the animated element.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>Finally we add an event handler to run the animation.</p>
57135c36536a2f81ce818f6a006f002261972244Jeff Conniffvar resetToAnimStart = function(){
57135c36536a2f81ce818f6a006f002261972244Jeff Conniff demoA.setStyles({'left': x0, 'top': y0}); // Where x0, y0 is the animation starting point
57135c36536a2f81ce818f6a006f002261972244Jeff ConniffY.one('#btn-animate').on('click', function(){
57135c36536a2f81ce818f6a006f002261972244Jeff Conniff resetToAnimStart();
57135c36536a2f81ce818f6a006f002261972244Jeff Conniff startAnim();
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Complete Example Source</h2>
57135c36536a2f81ce818f6a006f002261972244Jeff Conniff<p>The code shown above does the basics.
57135c36536a2f81ce818f6a006f002261972244Jeff ConniffThis example however, allows dragging the points, displays xy values for each point
57135c36536a2f81ce818f6a006f002261972244Jeff Conniffwhile you drag, and displays a path preview of the animation using YUI Graphics
57135c36536a2f81ce818f6a006f002261972244Jeff ConniffUtility. This adds some complexity.</p>
57135c36536a2f81ce818f6a006f002261972244Jeff Conniff{{>curve-source}}