Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
If you've programmed traditional animations, you've probably worked the timer and wrote some event handler code to move items on the screen. I'm sure some of you may remember the days when animations were stateless, meaning your code had to remember where each sprite was during each step of the animation. In Silverlight, this is no longer the case. Most animations are created with a tool like Expression Blend and stored in XAML portion of your control. It's not necessary to write a lot of code. Silverlight animations work with a dependency system. They modify a dependency property to a new value over a time interval.
So a Silverlight animation is really doing nothing more than changing a property value over a period of time. They are time-based, not frame-rate based. What does this mean? You specify the initial property value and the final value for the dependency property and you also specify the animation links. Silverlight calculates the frame rate based on these values and other factors. Since Silverlight animations are modifying dependency properties, you will know what the underlying .NET type is for that property. You need to select the correct animation type. There are only four to choose from.
A color animation changes a color value from one color to another, for example the TextBlocks.Background property. The double animation changes a numeric value, FontSize for instance and the point animation is used to change a point value, an X and Y coordinate pair. Finally, there is a rarely used animation type called the Object animation class. Here you animate from one object to another object. You can further break down Silverlight animation into two categories: To/From animations and keyframe animations. A To/From animation is the simplest to create and the easiest to understand.
You pick your animation type, say the double animation, you specify the beginning double value and the ending double value, you also specify the interval; Silverlight will interpolate between the beginning value and the ending value over the time span. Keyframes are a little more complex. Here you stipulate specific time intervals, say 1 second, 3.5 seconds, and 10 seconds. These are the keyframes, and for each keyframe you also set a starting an ending double value. There are several types of keyframes.
The Discrete KeyFrame changes instantly from one value to another. The Linear KeyFrame is similar to the To/From animation discussed earlier; the value is interpolated between the two values over the time interval. The Spline KeyFrame is based on a Bezier curve. This allows you to smoothly accelerate or decelerate the animations based on the curve. Every animation created within Silverlight must be defined within a storyboard. In Silverlight, a storyboard allows you to organize multiple animations that work together simultaneously. For example, you could have a color animation and a double animation in the same storyboard.
This is also where you control the animation. There are a number of useful methods available, like Begin, Stop, Pause, and so on. For my demonstration, I'm going to use Visual Studio and a project called Understanding the Animation. I'm not going to show any code; I'm just going to run the animations, by pressing F5. This first screen shows the different kinds of animations. There's a double animation, which changes a numeric value, in this case the font size. There's a color animation. Now just to be clear, I'm not changing the brush; I'm changing a color band of the brush.
Here I have a custom shape with several points around the outside edge. The point animation is going to move the X and Y coordinates of those points. Then last one is this rarely used animation. Currently, I'm painting the inside of this shape with a solid color brush. When I click on the Animation button, I'm swapping that brush for a Linear Gradient Brush and then a Radial Gradient Brush and back and forth. You might notice two other animations on the screen. Across the top of the screen, on my header, I'm solely moving the cloud from right to left.
And when the page first loaded, it was a shader animation on my logo. Let me show you that again. I'll shut the application down and then restart. Watch over here. It was my shader animation. The other two animations in this demo are just fun to watch. (animation playing) This one is wild.
I don't know how useful this animation is, but I sure had fun making it. This has been an overview of animations. The rest of this chapter teaches you how to set up your own animations.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98974 Viewers
61 Video lessons · 86265 Viewers
71 Video lessons · 70107 Viewers
56 Video lessons · 102324 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.