YUI Library Examples: Animation: Animating Along a Curved Path

Animation: Animating Along a Curved Path

Setting up the HTML

First we add some HTML to animate.

<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
});

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();
};

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);

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);
 
});