Creating Animation - Part 1

My previous post on animation included two Silverlight controls with animated effects. I created the animation slightly differently between the two controls. In this post, we will take a look at how the animation was created for the first control. In case you missed it, you can view the animation here.

I developed this animation using a combination of Expression Blend and Visual Studio. In Blend, I created the basic layout using a Grid, TextBox, and Button. Once the layout was created, I created a separate Storyboard for each of the animation effects that I wanted to use on the TextBox. Since I wanted the length of each animation to differ, I decided to use separate Storyboards rather than a single Storyboard. Using a single Storyboard would require coordinating the animatable properties at each KeyFrame; with multiple Storyboards, I can deal with each property independently. I created four Storyboards to animate the font size, background color, foreground color, and rotation angle. The following images from Blend show where to create/edit a Storyboard and the Timeline view for setting KeyFrames.

With the Storyboards created in Blend, I switched over to Visual Studio for some XAML modifications and minor code writing. While I could have used Blend to edit the XAML directly, it does not support Intellisense like Visual Studio. The first modification was to set AutoReverse to True on each of the AnimationTimeline objects (DoubleAnimationUsingKeyFrames and ColorAnimatonUsingKeyFrames, in this case); this will cause the Storyboard to animate the property back to the original setting. For each Storyboard object, I set the RepeatBehavior so that the animation (and reverse animation) would continue for a long time.

At this point, I have four different Storyboards to control. To simplify things, I added a fifth Storyboard object that contained the other Storyboard objects. Storyboard derives from ParallelTimeline, so its children are grouped and run simultaneously. By running this top Storyboard object, it will, in turn, handle running the other Storyboards. The XAML snippet below shows how this looks. One caveat to doing this is that only Storyboard1 is available to open in Blend now.

<Storyboard x:Name="Storyboard1" RepeatBehavior="500">
    <Storyboard x:Name="FontSizeStoryboard" RepeatBehavior="750">
    ...
    </Storyboard>
    <Storyboard x:Name="BackgroundStoryboard" RepeatBehavior="500">
    ...
    </Storyboard>
    ...
</Storyboard>

Only two things were left for this animation. To start the animation, I call the Begin method of Storyboard1 in the Loaded event of the Page. Last, I added an event handler for the Click event of the Button. Depending on the value of the Content property (START or STOP), I change the Content and call either Resume or Pause on Storyboard1.

As I stated in my last post, creating an animation is easy with WPF, especially with Blend. As I have shown here, Blend does not provide the full capabilities of animation, though. Hopefully, this example will provide creative minds with some ideas on how to create some really complex animations. For the full source of this animation, you can find it here.