YUI 3.x Home -

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.

Setting up the HTML

First we add some HTML to animate.

  1. <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.

  1. var node = Y.get('#demo');
  2.  
  3. var anim = new Y.Anim({
  4. node: node,
  5. duration: 1.5,
  6. easing: Y.Easing.easeOut
  7. });
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.

  1. var onClick = function(e) {
  2. anim.set('to', {
  3. curve: randomCurve([e.pageX, e.pageY])
  4. });
  5. anim.run();
  6. };
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.

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

Full Script Source

  1. YUI().use('anim', function(Y) {
  2. var node = Y.get('#demo');
  3.  
  4. var anim = new Y.Anim({
  5. node: node,
  6. duration: 1.5,
  7. easing: Y.Easing.easeOut
  8. });
  9.  
  10. var randomCurve = function(end) {
  11. var points = [],
  12. n = 3,
  13. winWidth = node.get('winWidth'),
  14. winHeight = node.get('winHeight');
  15.  
  16. for (var i = 0; i < n; ++i) {
  17. points.push([
  18. Math.floor(Math.random() * winWidth),
  19. Math.floor(Math.random() * winHeight)
  20. ]);
  21. }
  22.  
  23. if (end) {
  24. points.push(end);
  25. }
  26. return points;
  27. };
  28.  
  29. var onClick = function(e) {
  30. anim.set('to', {
  31. curve: randomCurve([e.pageX, e.pageY])
  32. });
  33. anim.run();
  34. };
  35.  
  36. Y.get('document').on('click', onClick);
  37.  
  38. });
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