Section 7.1. Using Animations

7.1. Using Animations

Since the animations reside in an external library, the AtlasUIGlitz.js file must be included manually in any page that uses them. There are several possibilities for including this file. Probably the best way is to add an Atlas ScriptReference element, as shown in the following snippet:

 <atlas:ScriptManager runat="server" >   <Scripts>     <atlas:ScriptReference ScriptName="AtlasUIGlitz" />   </Scripts> </atlas:ScriptManager> 

Table 7-1 lists the animations implemented in the AtlasUIGlitz.js file.

Table 7-1. Animations included in AtlasUIGlitz.js library

Animation	Description
Sys.UI.PropertyAnimation	Animates a property (e.g., the position) of an element
Sys.UI.InterpolatedAnimation	Animates a value and interpolates (calculates) the intermediate animation steps
Sys.UI.DiscreteAnimation	Animates a value over a list of values
Sys.UI.NumberAnimation	Animates a number
Sys.UI.ColorAnimation	Animates a color
Sys.UI.LengthAnimation	Animates a number and rounds every intermediate step to a whole number
Sys.UI.CompositeAnimation	Aggregates several animations in one
Sys.UI.FadeAnimation	Animates the opacity of an element

All of these animations can be used declaratively in xml-script, and most of them can also be accessed programmatically. You'll learn to use both techniques in the following examples.

Every animation has a play() method that starts the animation. The method internally uses a couple of properties defined in the class. The following three properties are the most useful ones:

_duration

How long the animation will take (in seconds)

_fps

The number of animation steps (frames) per second

_target

The target element of the animation

Whenever a step of the animation is executed, the setValue() method is called; what it does is up to its implementation. This method can be implemented by each animation, or else the setValue() method of the base animation class in Sys.UI.Animation is used. Depending on the animation, the method's implementation involves quite sophisticated calculations or just jumps to the next element in an array.

For alpha transparency (a graphical concept defining degrees of transparency, which enables effects like semitransparency), Internet Explorer uses the DXImageTransform.Microsoft.Alpha DirectX filter, whereas other browsers, such as Mozilla, Firefox, etc., have built-in support.