Posted by: Zeeshan Amjad | August 19, 2009

Introduction to Animation in WPF


In WPF doing animation is much simpler. Previously we have to draw object multiple time with slight variation to give the animation effect. Not only this we have to draw those object fast enough to give the illusion of animation.

In WPF this becomes very easy. All we have to do is to specify the starting and ending value (or the increment) of the object properties and time it should take to perform that operation.

There are few pre requisites to perform animation in WPF.  First requirement is that the object property must be dependency property. We can’t perform animation on normal CLR properties. This is one more advantage of dependency property. Second thing is the class not only inherited from DependencyObject but also implement IAnimate interface. And third requirement is that there must be a compatible animation type. WPF already provide lots of compatible animation types such as DoubleAnimation for double data type etc, but we can create our own animation compatible types.

Let’s take a look at IAnimate interface in little bit detail. IAnimate interface has three methods (two of them are overloaded) and one Boolean field. Here is a class diagram of IAnimate interface.

Animation_01

These methods accept AnimationClock and AnimationTime in addition to dependency property. AnimationClock class in inherited by Clock class in System.Here is a partial class diagram of AnimationClock class.

Animation_02

Here is a partial class diagram of AnimationTimeline class.

Animation_03

HandoffBehavior is an enumerated type with a possible values of SnapshotAndReplace means new animation replace the existing one and Compose means new animation combine with existing animation. 

Now lets make a simple program to demonstrate the animation. In this example we crated one TextBlock and write some text in it. There are lots of dependency properties in TextBlock class and in this example we are interested in FontSize property. We are going to change the font size from 10 to 36 in 10 seconds. If our TextBlock name is “txtBlock” then here is simple XAML code to perform this animation.

  1: <DoubleAnimation
  2:    Storyboard.TargetName="txtBlock" 
  3:    Storyboard.TargetProperty="FontSize"
  4:    From="10.0" To="32.0" Duration="0:0:10"/>
  5: 

We provide this animation in story board. Here is the XAML code to placed this animation in StoryBoard.

  1: <BeginStoryboard>
  2: 	<Storyboard>
  3: 		<DoubleAnimation
  4: 			Storyboard.TargetName="txtBlock" 
  5: 			Storyboard.TargetProperty="FontSize"
  6: 			From="10.0" To="32.0" Duration="0:0:10"/>
  7: 	</Storyboard>
  8: </BeginStoryboard>
  9: 

And we attached this animation with the TextBlock using trigger. Here we are using Load event as a trigger. It means this animation will work when this text block will fire the load event.

Here is the complete XAML code of this simple animation.

  1: <Window x:Class="Animation.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="Animation " Height="300" Width="400">
  5:     <Grid>
  6:         
  7:     <TextBlock 
  8:     TextAlignment="Center" 
  9:     Foreground="Blue"
 10:     Name="txtBlock"
 11:     Width="350" 
 12:     Height="250"
 13:     Text="Hello Animation World" 
 14:     VerticalAlignment="Center"
 15:     FontSize="10">
 16:         <TextBlock.Triggers>
 17:             <EventTrigger RoutedEvent="TextBlock.Loaded">
 18:                 <BeginStoryboard>
 19:                     <Storyboard>
 20:                         <DoubleAnimation
 21:             Storyboard.TargetName="txtBlock" 
 22:             Storyboard.TargetProperty="FontSize"
 23:             From="10.0" To="32.0" Duration="0:0:10"/>
 24:                     </Storyboard>
 25:                 </BeginStoryboard>
 26:             </EventTrigger>
 27:         </TextBlock.Triggers>
 28:     </TextBlock>
 29:     </Grid>      
 30: </Window>
 31: 

This program will display one window and display text “Hello Animation World” in font size 10. The font size will grow over the time and after 10 seconds it will have a font size of 36. Here is the output of the program after 10 seconds.

Animation_04

Advertisements

Responses

  1. […] animation with Property Trigger We have already saw an example of Property Trigger and animation using XAML. Now we are going to use these two concepts together and apply animation with property […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: