YUI 3.x Home -

Site Search (YDN & YUIBlog):

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

## Animation: Animating Along a Curved Path

This demonstrates how to animate the position of an element along a `curve`.

Click anywhere to move the element to your click position.

View example in new window.

### Setting up the HTML

First we add some HTML to animate.

    <span id="demo"></span>

    <span id="demo"></span>

<span id="demo"></span>

### Creating the Anim Instance

Now we create an instance of `Y.Anim`, passing it a configuration object that includes the `node` we wish to animate.

    var node = Y.get('#demo'); var anim = new Y.Anim({    node: node,    duration: 1.5,    easing: Y.Easing.easeOut});

    var node = Y.get('#demo');

    var anim = new Y.Anim({
        node: node,
        duration: 1.5,
        easing: Y.Easing.easeOut
    });

var node = Y.get('#demo'); var anim = new Y.Anim({ node: node, duration: 1.5, easing: Y.Easing.easeOut });

### Changing Attributes

A click handler will set the `to` value before `run` is called.

    var onClick = function(e) {    anim.set('to', {        curve: randomCurve([e.pageX, e.pageY])    });    anim.run();};

    var onClick = function(e) {
        anim.set('to', {
            curve: randomCurve([e.pageX, e.pageY])
        });
        anim.run();
    };

var onClick = function(e) { anim.set('to', { curve: randomCurve([e.pageX, e.pageY]) }); anim.run(); };

### Running the Animation

Finally we add an event handler to run the animation.

    Y.get('document').on('click', onClick);

    Y.get('document').on('click', onClick);

Y.get('document').on('click', onClick);

### Full Script Source

    YUI().use('anim', function(Y) {    var node = Y.get('#demo');     var anim = new Y.Anim({        node: node,        duration: 1.5,        easing: Y.Easing.easeOut    });     var randomCurve = function(end) {        var points = [],            n = 3,            winWidth = node.get('winWidth'),            winHeight = node.get('winHeight');         for (var i = 0; i < n; ++i) {            points.push([                Math.floor(Math.random() * winWidth),                Math.floor(Math.random() * winHeight)            ]);        }         if (end) {            points.push(end);        }        return points;    };     var onClick = function(e) {        anim.set('to', {            curve: randomCurve([e.pageX, e.pageY])        });        anim.run();    };     Y.get('document').on('click', onClick); });

    YUI().use('anim', function(Y) {
        var node = Y.get('#demo');

        var anim = new Y.Anim({
            node: node,
            duration: 1.5,
            easing: Y.Easing.easeOut
        });

        var randomCurve = function(end) {
            var points = [],
                n = 3,
                winWidth = node.get('winWidth'),
                winHeight = node.get('winHeight');

            for (var i = 0; i < n; ++i) {
                points.push([
                    Math.floor(Math.random() * winWidth),
                    Math.floor(Math.random() * winHeight)
                ]);
            }

            if (end) {
                points.push(end);
            }
            return points;
        };

        var onClick = function(e) {
            anim.set('to', {
                curve: randomCurve([e.pageX, e.pageY])
            });
            anim.run();
        };

        Y.get('document').on('click', onClick);

    });

YUI().use('anim', function(Y) { var node = Y.get('#demo'); var anim = new Y.Anim({ node: node, duration: 1.5, easing: Y.Easing.easeOut }); var randomCurve = function(end) { var points = [], n = 3, winWidth = node.get('winWidth'), winHeight = node.get('winHeight'); for (var i = 0; i < n; ++i) { points.push([ Math.floor(Math.random() * winWidth), Math.floor(Math.random() * winHeight) ]); } if (end) { points.push(end); } return points; }; var onClick = function(e) { anim.set('to', { curve: randomCurve([e.pageX, e.pageY]) }); anim.run(); }; Y.get('document').on('click', onClick); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings