Programming ASP.NET AJAX

Chapter 19. Using Animations

Slick transitions between pages or elements make for nice eye candy, but they can be tricky to implement and can sometimes only be achieved using a variety of transformations. For example, visual changes in an element’s opacity or position can be accomplished by gradual shifts in the number value of the element, thus creating the illusion of animation. A number going from 0 to 100 can be used as the opacity value of an element to animate a change in appearance from transparent to opaque.

Luckily, the ASP.NET AJAX Futures release comes with several built-in animations. They are all defined in a library called PreviewGlitz.js (which is embedded in the Futures assembly).

In this chapter, you’ll learn how to use ASP.NET AJAX animations to change an element’s position and opacity. You will also learn the range of animations and how to work with them.

Using Animations

Since the animations reside in an external library, the PreviewGlitz.js file must be included manually in any page that uses them. The file also depends on the PreviewScript.js file, the “core” JavaScript library for the Futures release. There are several possibilities for including this file. The best way is to add an ASP.NET AJAX ScriptReference element, as shown in the following snippet:

<asp:ScriptManager runat="server" ID="ScriptManager1">
  <Scripts>
    <asp:ScriptReference Name="PreviewGlitz.js" Assembly="Microsoft.Web.Preview" />
  </Scripts>
</asp:ScriptManager>

Table 19-1 lists the animations offered ...