Join Walt Ritscher for an in-depth discussion in this video Creating animations, part of Silverlight 5 Essential Training.
- View Offline
Creating an animation in Visual Studio is tedious. You have to either write all the XAML by hand, building the storyboard and nested animations, and then hook up the animations to the correct UI elements. If you prefer to create the animation in code, you create a messy, dense batch of code. If you used Expression Blend, however, your life is easy. It has a great WYSIWYG editor. Let me show you what I mean. For this demonstration, I will use Blend and a project called CreatingAnimations. I'm going to animate three items on this screen.
I'm going to fade this logo, I'm going to shrink the size of this logo, and I'm going to rotate this logo. I'm also going recreate my site header. You may have seen the site header in some of my other demonstrations. Watch the left-hand corner of my site. I have a bulge animation or a transition animation happening there. And then when that animation finishes, I start moving this cloud cover from the right side of the screen to the left side of the screen. This animation actually takes about two minutes to run.
I'll start by showing you how to create a basic storyboard. I'm in this file called BasicAnimation. To create an animation, you have to put it inside a storyboard. Storyboards live over here on the Objects and Timeline section at the top. There's this storyboard section. To add a new storyboard, you click on the New button. I'm going to call this one the FadeStoryboard. Keep your eye on the user interface as I click on OK and see if you can detect the changes.
Several things happen. For one, I've got this red border around the outside edge of my artboard. That is my warning that everything I do in the artboard at this moment is being recorded. Be sure and turn off the recording by clicking in this red dot when you're finished recording. I can't tell you how many times I've forgotten to do that and been animating things I didn't intend. The second thing that happened is the new section of the Object and Timeline showed up, where this yellow marker is. This represents my second points on the animation. It also has my VCR controls for rewinding and running the animations.
Currently, I can see about two seconds of time on the storyboard. If I press F6, it moves the storyboard to the bottom of the screen and I can see about nine seconds' worth of real estate down here. F6 puts it back on the left-hand side and F6 puts it back in the bottom. For my first animation, I'm going to animate this logo and I'm going to fade it down to about a 20% Opacity level. To do that, I select the object and then I move down into my Objects and Timeline and I click on this Record Keyframe.
This places a keyframe at the 0 position, and then I click over here at the 2- second mark and I click on that button again. I now have two keyframes. You can see them down here. They're little white ellipses. You can also see in my image a red dot, which signifies I'm animating a property on that object. Now all I need to do with the second keyframe selected is change a property on this item. I'm going to fade it to 20% Opacity. To do that, I'm going to go over to my Property pane, find the Opacity setting, and type in 20. I'm done.
I'm ready to test this animation. I'll click the Rewind button, and then I'll click the Play button. Let's go look at the XAML that was created on my behalf. At the top of my XAML is a storyboard. This is stored in the resources section of my user control. It shows that within the storyboard is a single animation called DoubleAnimationUsingKeyFrames, and this animation has two keyframes. The first keyframe is at KeyTime 0, and it's setting the value to 1, the opacity level to 1.
The second keyframe is at KeyTime 2 seconds, and it's setting the opacity level to 0.2. Now, how do I know it's setting the opacity level? Look up here at the Storyboard.TargetProperty. It is animating or changing the UIElement.Opacity property on this element. It's called the TargetName. So there somewhere is a control called image1, and I'm animating the opacity property on it. For my next demonstration, I'll create a second storyboard.
I do that by clicking on the Plus symbol again and I'll call this one a GroupStoryboard. What I mean by that is I'm going to have two or more animations inside this. I'm going to change the rotation on this grape picture, and I'm going to change the size on this logo. I'll start with the grape. I'll click here. I'm recording. I can see my red border. Put my keyframe in at 0 and one in at 4. Again, I just manipulate the item in the artboard. In this case I'll rotate it around to 180 degrees, and then I'll test. Rewind and run.
That looks good. Next, I'll click on my second image and add a keyframe. Here I want the keyframes to go from 1 to 3, so I'll select 1. It looks like I didn't quite get the 1 selected. I can either click again or the other thing I can do is grab this yellow marker and drag it around to a new position. Also, you can type in this area. If you know exactly where you want to go in your timeframe, you can type the number. I'm going to go from 1, so I'll add a keyframe there. Notice that the keyframe is on image2, because I had image2 selected. And then I'll move over to position 3 and add a keyframe, and now I'm ready to resize my image.
Rewind and let's see this animation. Nice! I told you I was going to try to recreate my site header. What I'm going to do is move over to this SiteHeader.xaml file and animate the cloud. I'm not going to show you how to animate the transition effect, but I will show you how to animate the cloud. It's quite simple really. What I did here is I created a long picture. It's about 2800 pixels wide. And I placed it behind my header, and I also put a clipping region around it so I can only see this portion right in here.
Now, what I want to do is animate the image from the right side of the screen to the left side of the screen, so I need a storyboard obviously. Then I need to select the correct item. It's a little bit hard to see. I need to scroll up and down to find the object that I want to manipulate, or I can try to click on it over here in the storyboard. I want to animate the image, so I'll choose it here. I'll click on the Record Keyframe and I get another one at 3 seconds over here, and then I'm going to translate this image to the left.
I'll do that by going over to my Property pane and scrolling down to the Transform section, expanding it, and then I'm going to type in a new value here. Since the item is about 2800 pixels wide, maybe I'll transition at 1500 pixels. And I need to go in a negative direction, like that. That looks good! I'll rewind the animation. It looks nice, except it's running too fast.
Now, there's a couple ways I can solve this. One is I can take this keyframe and drag it to a new position. Now it will run slower. The other thing I can do is I can change properties on the storyboard. We'll learn more about that later. Now you know the basics of creating animations and storyboards. In the rest of this chapter we'll show you additional pieces of the animation story.
- Installing the toolkit and setting up the development environment
- Using Expression Blend vs. Visual Studio 2010
- Creating a Silverlight page
- Compiling an application
- Exploring the relationship between XAML and .NET
- Using C#
- Working with XAML
- Digging into the Dependency Property System
- Deploying and debugging code
- Creating sophisticated layouts with panel elements
- Managing Visual State with Visual State Manager
- Transforming the user interface (UI) with templates
- Understanding the event model
- Working with text
- Using business data in a binding
- Creating an out-of-browser (OOB) application
- Exploring trust levels
- Playing audio and video
- Handling errors
- Exploring animations
- Working with application windows
- Integration with XNA