Wahlin on .NET
Silverlight XAML Primer 12: Using Linear Keyframe Animations
Dan shows you how you can get more control over animations using keyframes in Silverlight apps.
Animations are an important part of Silverlight that can be used to provide an enhanced level of interactivity and "richness" within an application. By using animations, you can change the shape of a button as a user moves their mouse over it, fly images in and out of a canvas and perform many other interesting effects.
In a previous article, I discussed the fundamentals of animations and demonstrated how they can be defined in XAML using tags such as StoryBoard and DoubleAnimation. In this article, I'll demonstrate how you can gain more control over animations by using DoubleAnimationUsingKeyFrames and LinearDoubleKeyFrame XAML elements.
Introduction to Keyframe Animations
A keyframe represents a "frame" in the overall animation process. If you've ever seen how a cartoon is made, then you can think of each individual picture in the cartoon as a keyframe.
The concept of keyframes isn't new by any means. In fact, keyframes are used in many types of applications such as Adobe Flash, video editing software, Windows Presentation Foundation (WPF) and Silverlight to name, just a few.
Standard Silverlight animations typically use a XAML element named DoubleAnimation to define a target property and modify it over a specified time span. For example, you might target a TextBlock's Canvas.Left property to animate it from left to right for 3 seconds.
However, what if you'd like the TextBlock to move slowly for the first two seconds and then speed up for the remaining amount of time? This type of fine-grained control over an animation can be done using keyframes.
Several different types of keyframe animations are available in Silverlight 1.0, as shown in Table 1.
Listing 1 provides an example of how the DoubleAnimationUsingKeyFrames element can be used in Silverlight canvas to animate a TextBlock object. The animation is played automatically once the Canvas object has loaded.
The code targets a TextBlock object's Canvas.Left property and animates over a span of three seconds. The animation is repeated as long as the application is running (RepeatBehavior="Forever") and automatically reverses itself without any additional XAML code (AutoReverse="True").
Within the DoubleAnimationUsingKeyFrames element, you'll see two LinearDoubleKeyFrame elements. Each of these elements defines the value that the Canvas.Left property should be at a specified time. The first LinearDoubleKeyFrame element moves the TextBlock 50 pixels to the right over a span of two seconds. The second element moves the TextBlock 150 more pixels to the right over a span of one second. Putting the keyframes together results in the TextBlock moving slowly at the start and quickly at the end.
This is obviously a very simple example of using keyframes in a Silverlight application. Complex animations can be difficult to create using only XAML and a text editor. Fortunately, Microsoft's Expression Blend 2 product can be used to create keyframe animations visually without writing any XAML code at all. In a future article, I'll walk through the process of using Expression Blend 2 to create keyframe animations.
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.