What are the important properties/methods used in animations?
All animation classes are inherited from the Timline base class which contains some properties and methods available to all animation classes. Let's talk about the properties of the animation controls before proceeding with examples. I have highlighted some of the most important properties of the Timeline class below.
Figure 1: Animation or Timeline class properties
Duration property allows you to specify the amount of time the Storyboard will take to play back. The value of
Duration is based on the
hours:minutes:seconds syntax. The Duration can also be specified on each animation control in the Storyboard instead of the Storyboard control.
BeginTime property specifies the time, in
hours:minutes:seconds format, in the Storyboard timeline to begin playback of the animation.
As the name suggests, the
BeginTime property allows you to specify a time at which point the animation object begins activity. For example, you could specify a time of ten seconds on the
BeginTime of a Storyboard. When you begin the Storyboard using the
Begin method, the Storyboard will wait ten seconds and then begin.
Let's take an example to understand the
BeginTime property. In this example the duration is 20 seconds but
BeginTime time is 10 seconds. However,
Duration is 20 seconds so it does not animate for 20 seconds. Instead it animates only for 10 seconds because of late
Figure 2: Understanding the BegineTime property
Figure 3: Example of BeginTime properties
AutoReverse: If the
AutoReverse property is set to
True, the animation first plays forward and then immediately plays backward. This allows you to return the Silverlight controls to their original status. This is extremely useful when implementing animations that animate controls only when the mouse is over them.
Figure 4: AutoReverse Property example output
RepeatBehavior property allows you to specify the number of times to repeat the animation. If you want the animation to run indefinitely, you can set the
RepeatBehavior property to
AutoReverse is set to
True, then playing forward and backward only counts as a single iteration. For example, the following Storyboard code repeats the animation three times:
Basically, a RepeatBehavior can be defined as:
Timespan string RepeatBehavior="0:0:4"
#x string RepeatBehavior="2x"
special value Forever
Here is the example of how
RepeatBehavior property is used.
Figure 5: RepeatBehavior Property example output
FillBehavior property specifies how a timeline behaves when it ends. The default value for this property is
HoldEnd, which means that after an animation ends, the object that was animated holds its final value. For example, if you animate the
Opacity property of a Rectangle from 1 to 0 over 2 seconds, the default behavior is for the rectangle to remain at 0 opacity after the 2 seconds elapses. If you set
Stop, the opacity of the rectangle reverts to its original value of 1 after the animation ends.
Look at the IntelliSense in Visual Studio 2008.
SpeedRatio: This specifies the rate of time at which the current timeline elapses relative to its parent. The default value is 1.
Let us understand the
SpeedRatio property in detail. If the
SpeedRatio is set to 3, then the animation completes three times faster. If you decrease it, the animation is slowed down (for example, if
SpeedRatio is set to 0.5 then the animation takes twice as long). Although the overall effect is the same as changing the
Duration property of your animation, setting
SpeedRatio makes it easier to control how simultaneous animations overlap.
The following snapshot describes the
DoubleAnimation of the from/to type with the
SpeedRatio property set to 2. This will cause the fade-in effect on the Image1 Image control to be completed in 0.5 seconds.
If you don't use any properties in the animation or the storyboard, it will use the default value of the properties and it animates just once.
Output of all of the above properties in action:
Figure 7: Properties of animation in action
How to trigger the Storyboard Begin event with XAML?
As you begin to implement animations in your Silverlight applications, you will find that some of them should be started by the managed code. However, some animations should be started as soon as the application is loaded.
Starting the animation when the page is loaded is possible by nesting the
Storyboard control in an
EventTrigger element for the root layout control. The following code shows an example of nesting a
Storyboard control in an
EventTrigger element of a Grid control:
The EventTrigger attaches to the
Loaded event of the Grid element and then defines the BeginStoryboard element as part of the TriggerActionCollection.
Example of ColorAnimation
Example of DoubleAnimation
Example of PointAnimation
Example of Animation with Code behind
Animation in XAML versus Animation in Code:
It is very important to understand when to use XAML and when to use code behind to implement animation in Silverlight.
Defining storyboard and Timeline in XAML is generally easier to implement and this is the preferred method in most of cases but sometimes it is time consuming and requires more work; in that case we may need to implement storyboard and timelines in backend C#/VB.NET code.
In the following example we have to change the opacity of the color of the grid cell when the mouse hovers the cell. To achieve this we can use XAML, but we would need to write many lines of code to define storyboards and timelines. With code it is just less than 50 lines.
Start, Stop, Pause, and Resume an animation
Animation must be started with Storyboard's
begin() method, once animation started you can stop or pause and then a paused animation can be resumed.
I hope you enjoyed this article; please do not forget to leave your comments, since it's very important for me.
Anjaiah Keesari is working as a Senior Software Engineer has more than 6 years experience working on ASP.NET, C#,VB.NET,AJAX, Silverlight, XAML, MVC and SQL Server. I hold Master's degree in Computer Science. I will be reachable at firstname.lastname@example.org. I like coding…
This author has published 2 articles on DotNetSlackers. View other articles or the complete profile here.
Please login to rate or to leave a comment.