Previous Page
Next Page

Adding Animation Effects

The Yahoo! User Interface Library's Animation Utility allows you to add many sorts of animated effects to YUI objects. You can make graphics and other objects bigger or smaller; fade them in or out; animate colors; move objects across the page; move them along a specified path; and scroll text fields horizontally, vertically, or both. And of course, the combinations and possibilities are almost endless.

In this example, we're going to show you how to animate the dialog we used in the previous task. The additions to the HTML are in Script 16.13, and the ones to the JavaScript are in Script 16.14.

Script 16.13. This HTML has a different title and calls additional libraries than Script 16.10, but it is otherwise identical.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
     <title>Animation</title>
     <link type="text/css" rel="stylesheet" href="yui/container.css" />
     <link type="text/css" rel="stylesheet" href="script03.css" />
     <script type="text/javascript" src="yui/yahoo.js"></script>
     <script type="text/javascript" src="yui/event.js"></script>
     <script type="text/javascript" src="yui/dom.js"></script>
     <script type="text/javascript" src="yui/connection.js"></script>
     <script type="text/javascript" src="yui/dragdrop.js"></script>
     <script type="text/javascript" src="yui/container.js"></script>
     <script type="text/javascript" src="yui/animation.js"></script>
     <script type="text/javascript" src="script04.js"></script>
</head>
<body>
<div id="WeatherWidget">
     <div id="header">
        <a href="#" id="loadDialog">edit</a>
        <span>Your Local Weather</span>
     </div>
     <a href="#">Sonoma, CA</a><br />
     <div class="weatherFig">
        Tonight<br />
        <img src="images/nt_clear.gif" alt="nt_clear.gif" width="42" height="42" /><br />
        Low: 59&deg;
     </div>
     <div class="weatherFig">
        Today<br />
        <img src="images/clear.gif" alt="clear.gif" width="42" height="42" /><br />
        High: 95&deg;
     </div>
     <span class="big">91&deg;F</span><br />
     Clear<br />
     Humidity: 36%<br />
     Visibility: 10 mi<br />
     Wind: SE 10 mph
</div>
<div id="dlg">
     <div class="hd">Your weather preferences: </div>
     <form name="dlgForm" action="#">
        <p><label for="radiobuttons"> Temperature:</label>
        <input type="radio" name= "radiobuttons[]" value="C" checked= "checked" /> C
        <input type="radio" name= "radiobuttons[]" value="F" /> F</p>
        <p><label for="zip">Zip code:</label> <input type="text" name="zip" size="5" /></p>
     </form>
</div>
</body>
</html>

Script 16.14. The JavaScript that makes the animation happen.

[View full width]
YAHOO.namespace("container");
function init() {
     var handleSubmit = function() {
        this.submit();
     }

     YAHOO.container.dlg = new YAHOO.widget. Dialog("dlg",
        {
           modal:true, visible:false, width:"250px", fixedcenter:true, constraintoviewport
:true, draggable:true
        }
     );

     YAHOO.container.dlg.cfg.queueProperty ("buttons", [ { text:"Submit", handler:
 handleSubmit } ]);
     YAHOO.container.dlg.render();

     var myAnim = new YAHOO.util.Anim("dlg");
     myAnim.attributes.opacity = { from: 0, to: 1 };
     myAnim.duration = 2;
     myAnim.method = YAHOO.util.Easing.easeIn;
     myAnim.onComplete.subscribe(showDialog);

     document.getElementById("loadDialog"). onclick = function() {
        myAnim.animate();
        return false;
     }

     function showDialog() {
        YAHOO.container.dlg.show();
     }
}

YAHOO.util.Event.addListener(window, "load", init);

To add animation to an object:

1. 
<script type="text/javascript" src="yui/animation.js"></script>



This may be why so much of Web 2.0 is about animating objects such as fade-ins and fade-outs: the only change that needed to be made to Script 16.13 was to bring in YUI's animation.js file.

2. 
var myAnim = new YAHOO.util.Anim ("dlg");
myAnim.attributes.opacity = { from: 0, to: 1 };
myAnim.duration = 2;
myAnim.method = YAHOO.util.Easing. easeIn;
myAnim.onComplete.subscribe (showDialog);



In Script 16.14, we create a new animation object myAnim, based on dlg, the dialog object from the previous task. We give it an opacity that will start at zero and end at one (bringing it from invisible to visible), we set the animation's duration to be two seconds, and we set its method to Easing.easeIn (a built-in style that tells JavaScript to start off fast but then ease in to displaying the object). Finally, we tell the animation that when it's done (that is, when its onComplete event handler is triggered), it should call the showDialog() function, as it's subscribedthat is, a function has been signed up to do something after a myAnim event has taken place.

3. 
myAnim.animate();



Now, when someone clicks the edit link, we want the animation to start.

4. 
function showDialog() {
  YAHOO.container.dlg.show();
}



When the showDialog() event is trigged, we want the dlg dialog to display (Figure 16.9).

Figure 16.9. We haven't figured out how to add animation on the printed page, but this dialog really did fade in.



Previous Page
Next Page