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