Transitional animation with Silverlight
In the last part I’ve shown how the VideoBrush can be used and videos can be animated by dividing MediaElement into two parts. In this demonstration of Silverlight animation I’ll focus on transitional animation. We’ve seen this type of animation many times in movies, television commercials, music videos, in sting which we see at the beginning of any news. The wipe effect and dissolves are mostly used in film and television. There are other effects which fall into the category of wipe and dissolves. It means those effects are subsets of Wipe and Dissolve. Let’s delve into our first example.
Simple Transitional animation
This example shows a simple transitional animation, something a sliding effect, which is called wipe effect.
Open Visual Studio and select the Silverlight application template. Name the application whatever you like. I named this application SilverlightTransitionalAnimation. The idea behind this application is just to show you how a transitional Wipe effect can be done in Silverlight. This example is not the best by any means and this could be done in far better ways, but I’ve just given here an idea of how this effect can be achievable in Silverlight. If anyone has a better idea or has some innovative thinking or suggestion, it will be highly appreciated.
Before starting this demonstration let’s clarify what “Wipe effect” really means. In film editing a wipe is a gradual spatial transition from one image to another. One image is replaced by another with a distinct edge that forms a shape. In the field of Digital Post Production this is type of transition uses a moving edge to replace the current clip to reveal the next clip. A simple edge, an expanding circle, or the turning of a page, are all example of Wipe effect. So from this point of view a wipe is a transition from one shot to another, where a moving line or pattern reveals the new shot. This type of effect is mostly seen in the News headlines of television channels, especially in my country, Bangladesh. So I thought why not give it a try using Silverlight?
So, I’ve tried here to get the animated Wipe effect by overlapping two Images and by placing them in a Grid and setting
OpacityMask on the topmost Image. Then I’ve tried to animate the
Offset property of the
GradientStops of the Brush.
To start my effort I’ve first opened Visual Studio 2008 and from the project template I’ve selected the Silverlight project.
Figure 1: Creating Silverlight application using Visual Studio
Add a Canvas as the root element of your layout. Add two images inside the Canvas. Name those Image elements whatever your like and set the
source property. Set the
Opacity mask of the second Image to
LinearGradientBrush. Set the StartPoint to
0,0 and EndPoint to
1,0. Name the first GradientStop whatever you like. In this case it’s
BlackStop. As its name suggests, the
Color for this is
0. The second GradientStop is named
TransparentStop and its
Color has been set to
Offset is set to
0. After setting the opacity mask of your second Image according to my instructions, your XAML for both the images should look like this :
Now go to the
<UserControl.Resources> section and add a Storyboard. Name the Storyboard as you prefer. I’ve named the Storyboard
TransTimeline. Set the
AutoReverse property of the Storyboard to
True. Now here comes the most important part of this story: the animated effect which we want to give to application will be fixed here. I’ve used the DoubleAnimation here to get the job done. If you’re not sure what DoubleAnimation does, check Part three of this series. I’m going to show you the animated wipe effect using one Image over another, so my ultimate goal is to animate the value of a double property between two target values; and that's exactly what DoubleAnimation does. My Storyboard targets here are the GradientStops of my LinearGradientBrush, which I used for OpacityMask of my second Image, named
For your clarification here’s the
<UserControl.Resources> section :
You can see in the above XAML that the first DoubleAnimation has been used in the Storyboard section to target a GradientStop, which in this case is
Offset property of the GradientStop has been targeted. The
By property of the DoubleAnimation has been used to set the total amount by which the animation changes its starting value. In this case its
1. At last,
Duration has been set to
2 seconds. In the subsequent DoubleAnimation section, the GradientStop named
BlackStop has been targeted again, and the
Offset property has been targeted too. The
By property again is set to
Duration has been set to
2 seconds. This time the
BeginTime property has been specified to set the total amount by which the animation will change its starting value. In this case it has been set to
5 seconds. Now open Page.xaml.cs to add some procedural code to handle the animation. Add a
MouseLeftButtonDown event for
img2 because this is the Image we want to animate over
img1. Call the Storyboard’s
Begin method in your
Img2_MouseLeftButtionDown event handler, like so:
TransTimeline is our Storyboard, because I named it
TransTimeline. Now wire the event to
img2. Your XAML should look the one shown below :
At this point we’ve completed the code for our application. Build and Debug the application to see the transitional effect implemented with a Silverlight animation. If everything is in full shape, your application will look just like the screenshot shown below:
Figure 2: Wipe transition in action
Done: We’ve created a transitional Wipe effect with Silverlight! The complete XAML for this example should now look like this:
Listing 1: Page.xaml
Listing 2: Page.xaml.cs
If you want to modify the width of the in-between area, you have to modify the start time of the second DoubleAnimation.
In this article, we have seen how to create a transitional Wipe effect with the Silverlight’s animation framework. I hope this part of the series has given you some helpful ideas on creating transitional animations.
Currently working as a freelance Silverlight/WPF UX Integrator. His passions revolve around creating the next generation desktop application and Rich Internet applications. His goals are to create applications which will serve the user in a friendly and traditional way, but will keep pace with nex...
This author has published 11 articles on DotNetSlackers. View other articles or the complete profile here.
Please login to rate or to leave a comment.