Javascript Animation : Teaching Kids Computer Programming Lesson #8

From the last session with C., we have a login screen.  Now C. would like the little Yahoo! Messenger guy to bounce around.

Click here to see the page in action

She fired up TuxPaint and created a drawing of a spring

We used Preview to copy it and rotate it into horizontal spring

I started to read about the YUI animation library

First, we copy these 2 lines to include YUI libraries

<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" />
http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js

The happy face guy is in the div tag as id=”happy_home”

<center>

  

  
  
  

    
  
  </div>
</center>

YUI has very simple syntax and she was intrigued with Y.one() syntax to create a node for #happy_home

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

YUI has some sample code, at this point because I’m also learning Javascript and YUI, I experimented with the animation and finally was able to get the Yahoo! Messenger icon to bounce

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

node : is the the happy face guy with the speech bubble
duration: is how long the animation goes on each iteraction
easing : how you want the animation to easy into the position

 var bounceCurve = function(end) {
 var points = [],
       X = node.getX();
       Y = node.getY();
       points.push([X, Y - 60]);
       points.push([X, Y]);
       return points;
 };

X, Y: is the point where the happy guy is
points : we create a point which is 60 pixels above where the happy guy is at, how high to bounce

 anim.set('to', {
              curve: bounceCurve(),
             });
 anim.set('iterations', 100);
 anim.run();

 //Y.one('document').on('click', anim.stop());
});

to : We want the animation to run so that the happy face will go to the point at 60 pixels above the guy and
interactions: we want this to run for 100 times

Click here to see the page in action

—-
This is a series that documents my daughter’s curiosity to learn about computer programming
—-

1. Using CSS To Realize The Mock Up: Teaching Computer Programming To Kids Lesson #7