In this instalment of a look into animations in Silverlight, animations using KeyFrames will be examined.

The other animations that have been posted about (DoubleAnimation, ColorAnimation, PointAnimation and MultipleAnimations) have all been types of animations that use linear interpolation, changes occur smoothly and evenly over the time of the animation, when they are run.

With KeyFrame animation you can have linear based keyframes, keyframes that use interpolation from one value to the next, or discreate keyframes with which the values jump from one to the next which can cause a more erratic movement.

This first post will take a look at using a linear type of keyframe animation.

The main difference between the animations discussed already and a keyframe animation is that you have greater control on when the value of the properties change with a keyframe animation.  Non-keyframe animations change the value of the property evenly over the total duration of the animation.  With keyframes you can specify a property to have a particular value at a particular time.

The example that is going to be used for this post is going to animate some images to create a blending slide show.  Each image will be visible for 5 seconds before fading away while the next one becomes visible.

1 – Setting up the Project.

The project starts with adding a Folder to the project files in the Solution Explorer window then adding the images into that folder.

The UserControl consists of a 400x400 Grid with a light gray colour for the background.  Into the grid the 5 images are declared.

When run, due to the declarative nature of XAML, the last element defined is what is displayed so the picture of the lighthouse is visible.

This is not quite what is wanted.  The initial image to be shown is the first image that was declared and the others should be not visible.  To accomplish this values for the Opacity property of the images are added.  A value of 1 means that the image is fully opaque and 0 means that the image is transparent.

Now running the project it shows the first image in the sequence.

2 – Adding the Storyboard and the first Animation.

The storyboard is going to be declared at UserControl level so it is defined in the resources section of the usercontrol.

Since the storyboard is only going used to hold a number of animations the only requirement is that a value is given for the Key property.  I have set the repeatbehavior to forever for this example though this value will vary depending on the requirements of your animation.

All animations are defined within the storyboard tags and include values for the BeginTime (defined by the format Hours:Minutes:Seconds.FractionalSeconds), TargetName and TargetProperty properties of the animation.  The property for this example which is going to be animated will be the opacity property of each image.  One animation will be used for each image.

Note the that the animation is declared as one using keyframes, not just as an animations in the previous posts.

Into the animation you then declare the keyframes.  Each animation should contain a keyframe with a starting value, one or more keyframes with intermediate values and a keyframe with an ending value. Each keyframe also has a time when the property is to be at the declared value.  Following that pattern the first keyframe will have to opacity set to 1 at the start of the animation.

The image is to be visible for 5 seconds then it is to fade out over 5 seconds.  A second keyframe is added at the 5 second mark with the opacity set to 1, fully visible, then a third keyframe is added at 10 seconds with the opacity set to 0 which makes the image not visible.

The keyframe at 5 seconds is really the important one here.  If that keyframe were not included in the animation then the image would start fading as soon as the animation starts.  With the inclusion of the second keyframe it forces the image to be fully visible for 5 seconds then begin to fade out.  You can set as many keyframes as you want in the animation to get the effect you are after.

3 – Adding more Animations.

Additional animations are defined within the storyboard the same way as the first.

For the second image a new animation is declared and keyframes are added to change the value of the opacity at the times required.

As you can see in the above XAML, at 5 seconds the image is transparent and over the next 5 seconds becomes visible, which is as the first image is fading out.  The image is visible for 5 seconds then fades out.

4 – Running the Animation.

To test the animation and make sure it is working, the code to start the animation needs to be added.  You can add it to just about any event and I am starting it when the grid that contains the images is loaded.

(You can’t actually see the animation in action in this post, but the series of screen shots shows the results of the animation when it runs.  As I have done with the other posts in the blog I will make a working example available for you to see the animation in action.)

The project starts and the first image is shown for 5 seconds.

 
Between 5 and 10 seconds the first image starts to fade as the second image becomes visible.

From 10 to 15 seconds the second image is fully visible.

Then over the last 5 seconds of the animation the second image fades.

5 – Adding animation for the rest of the Images.

The process of animating the rest of the images can now be done.

As you can see in the following XAML, each animation uses 4 keyframes to accomplish the fading in and out of the image and each keyframe runs for 5 seconds.

6 – Completing the animation.

I suppose, technically, the animation was complete in the last step, but there is one more bit that I wanted to include in this example.

If you were to run the animation as it stands when the last image faded away to nothing the first image would snap back to being visible.  Instead of this action I would prefer that the initial fades into view again.

To get this affect a couple more keyframes must be added to the animation for the first image.

Two more keyframes have been added.  One for 45 seconds when the last image starts to fade out, this one will start to fade in and one at 50 second so that it is totally visible for when the storyboard begins again.