kids programming

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="" />

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

</div> </center>

YUI has very simple syntax and she was intrigued with syntax to create a node for #happy_home

 YUI().use('anim', function(Y) {
   var node ='#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);;

 //'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