Wahlin on .NET

Silverlight XAML Primer 11: Getting Started with Animations

Dan walks you through using Silverlight to animate images and text, starting with Storyboard elements.

• By Dan Wahlin
• 03/10/2008

Of course, animation of pictures or text is possible without Silverlight in today's mainstream browsers. However, if you've ever tried to animate images or text in a Web page using only JavaScript, you know that making animations work cross-browser can be quite tricky. That's one of the reasons there are so many AJAX script libraries and components like JQuery , ASP.NET AJAX Extensions and script.aculo.us available (check out http://www.ajaxrain.com for examples).

In this article, I'll introduce you to the concept of animations in Silverlight, define some key animation objects and explain how you can get started using them. In future articles, I'll provide additional details about animations and different ways they can be used.

Creating a Storyboard
If you've ever watched any of those "behind the scenes" videos that show how cartoons are made, then you've likely seen how storyboards are used to create the flow of a cartoon. The storyboard contains all of the details about the feature and the various actions and scenes that the cartoon will have.

XAML provides a Storyboard element that acts like a virtual storyboard where animations that occur within a Silverlight application can be defined and organized. Storyboards can be started using event triggers and routed events (more on this later), or they can be started programmatically by calling Begin() and Stop() methods. Using the Storyboard, element you can target Color, Double and Point properties defined on XAML objects.

Table1 defines various types of animation objects that can be used with Storyboard elements.

Animations such as DoubleAnimation (named for its ability to animate properties that can have Double data type values) can be defined inside of a Storyboard element as shown in Listing 1. In this example, the DoubleAnimation element is used to animate the Canvas.Left property of a TextBlock element named tbHello.

The animation starts when the root Canvas' Loaded event fires. This is accomplished by adding an EventTrigger element that listens for the Canvas.Loaded event using the RoutedEvent attribute. Once the event fires, the storyboard defined in Listing 1 is called, which starts the DoubleAnimation defined within the storyboard. Although only one animation is defined in this case, multiple animations could also be defined to animate other properties.

The DoubleAnimation object has several property values set to control if the animation automatically reverses (goes backwards), where it starts, where it goes, the overall duration of the animation, the target element and the target property that the animation affects. The animation also repeats "forever" which means the TextBlock's Canvas.Left property will change from 80 to 200 over the course of three seconds, reverse and go back to 80, and then start all over again. This process continues until the Silverlight application is closed.

There's a lot that can be done with animations. In the next few articles in this series, I'll demonstrate several animation concepts to help get you started. Keep in mind that Expression Blend 2.5 (currently in preview mode) allows animations to be created using a visual designer which significantly increase productivity and makes the process a lot simpler.