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.
Silverlight makes it easy to interact with end users, display different types of media content, show various shapes and much more. One of the key features in Silverlight that sets it apart from typical application runtimes is its ability to animate objects defined in a canvas.
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.
About the Author
Dan Wahlin (Microsoft MVP for ASP.NET and XML Web Services) is the founder of The Wahlin Group which specializes in .NET and SharePoint onsite, online and video training and consulting solutions. Dan also founded the XML for ASP.NET Developers Web site, which focuses on using ASP.NET, XML, AJAX, Silverlight and Web Services in Microsoft's .NET platform. He's also on the INETA Speaker's Bureau and speaks at conferences and user groups around the world. Dan has written several books on .NET including "Professional Silverlight 2 for ASP.NET Developers," "Professional ASP.NET 3.5 AJAX, ASP.NET 2.0 MVP Hacks and Tips," and "XML for ASP.NET Developers." Read Dan's blog here.