2D Animation in WPF

WPF providing great features for creating rich user interface using graphics, layouts and animations.

In this post we will discuss how to create Animations and types of Animations with examples.

Animation

Click WPFAnimations To Download source

animation is used, when you want your user interface more attractive like :

 -  moving control from one place to another
 - continuously change the color of the control on some time interval
 -  rotate control
 - change the opacity of control
 - resize control ( change size from small to large and large to small)

you cannot set animation directly to the control, instead WPF provides container (Storyboard) for the animation.

Storyboard is a container timeline that provides object and property targeting information for its child animations.

The Storyboard class provides the Storyboard.TargetName and Storyboard.TargetProperty attached properties. You set these properties on an animation to specify its target object and property.

There are 3 types of animations  available in WPF

1. DoubleAnimation
2. ColorAnimation
3. Double/Color Animation Using KeyFrame


1. DoubleAnimation

A DoubleAnimation creates a transition between two double values.

like change opacity 0 to 1, or change width/height of the control.

Example 1:

Below example describes Translate Visual Element from one postition to another postion using DoubleAnimation. ( see below images)

 <Rectangle x:Name="MyTranslateRectangle"
    Width="90"
 Height="35"
 Margin="10"
 HorizontalAlignment="Left"
 Fill="#AA0000FF"
 Stroke="#0000FF"
 StrokeThickness="1">
 <Rectangle.RenderTransform>
  <TranslateTransform X="0" Y="0" />
 </Rectangle.RenderTransform>
 <Rectangle.Triggers>
  <EventTrigger RoutedEvent="Loaded">
   <BeginStoryboard Storyboard="{StaticResource TranslateStoryboard}" />
  </EventTrigger>
 </Rectangle.Triggers>
</Rectangle> 

Created Rectangle control in page with setting some properties ( Fill,Stroke,Width,Height etc.)
added TranslateTransfrom to the Rectangle control within UIElement.RenderTrandform property.
 RenderTrandform is used to tranfrom UIElement from one coordniate to another one.
it will rotate, scale, move (translate) rendering position of FrameworkElements.


WPF provides the following  Transform classes :

RotateTransform : Rotates an element by the specified Angle.
ScaleTransform : Scales an element by the specified ScaleX and ScaleY amounts.
SkewTransform : Skews an element by the specified AngleX and AngleY amounts.
TranslateTransform : Moves (translates) an element by the specified X and Y amounts.

we have used to TranslateTransform for move Rectangle from one postition to another using storyboard.

<Storyboard x:Key="TranslateStoryboard" RepeatBehavior="Forever">
 <DoubleAnimation Duration="0:0:01"
  From="0"
  Storyboard.TargetName="MyTranslateRectangle"
  Storyboard.TargetProperty="(Rectangle.RenderTransform).(TranslateTransform.X)"
  To="350" />
</Storyboard> 

Now, create storyboard with DoubleAnimation and set TargetName to the name of Rectangle, set the TargetProperty to the TranslateTransform.X, set To=350 to move Rectangle from 0 to 350 in X coordinate ( Horizontal Direction - from Left to Right).

Now, BeginStoryboard on Loaded event of Rectangle, it will start storyboard with applied doubleanimation.

if you want animation continue after complete the cycle , set Storayboard RepeatBehavior property to Forever.

Example 2 :

Below examples describes changing Width property of UIElement.

<Ellipse Name="MyEllipse"
 Width="50"
 Height="50"
 Margin="10"
 VerticalAlignment="Top"
 Fill="#28B7ED"
 Stroke="Gray"
 StrokeThickness="2">
 <Ellipse.Triggers>
  <EventTrigger RoutedEvent="Loaded">
  <BeginStoryboard>
   <Storyboard RepeatBehavior="Forever">
    <DoubleAnimation BeginTime="0:0:0"
     Duration="0:0:1"
     From="50"
     Storyboard.TargetName="MyEllipse"
     Storyboard.TargetProperty="Width"
     To="350" />
    <DoubleAnimation BeginTime="0:0:1"
     Duration="0:0:1"
     From="350"
     Storyboard.TargetName="MyEllipse"
     Storyboard.TargetProperty="Width"
     To="50" />
   </Storyboard>
  </BeginStoryboard>
  </EventTrigger>
 </Ellipse.Triggers>
</Ellipse>

Created Ellipse with 2 DoubleAnimation added one for change width proerty from 50 to 350 and one for change width property from 350 to 50 and place both animations within Storyboard.

Example 3 :

Below example describes Rotate Image on 360 angle wihtin specified area.

<Image Grid.Column="1"
 Width="160"
 Height="160"
 Margin="10"
 HorizontalAlignment="Left"
 Cursor="Hand"
 Source="/WPFAnimations;component/Images/1.png"
 Stretch="Fill">
 <Image.RenderTransform>
  <RotateTransform x:Name="TransRotate" CenterX="80" CenterY="80" />
 </Image.RenderTransform>
 <Image.Triggers>
  <EventTrigger RoutedEvent="Image.Loaded">
  <BeginStoryboard>
   <Storyboard TargetProperty="Angle">
    <DoubleAnimation AutoReverse="False"
     By="360"
     Duration="0:0:0.7"
     RepeatBehavior="Forever"
     Storyboard.TargetName="TransRotate"
     Storyboard.TargetProperty="Angle" />
   </Storyboard>
  </BeginStoryboard>
  </EventTrigger>
 </Image.Triggers>
</Image>

to rotare image RotateTransform is used, it has CenterX & CenterY proeprty to set Image on X,Y posttion in area, Angle property is used to RotateImage on Specified Angle (degree).

You can also create Animation from C# (code behind) instead of XAML. like :

DoubleAnimation dblaSlideUp = new DoubleAnimation();
dblaSlideUp.To = 80;
dblaSlideUp.Duration = new Duration(TimeSpan.FromSeconds(.5));
Storyboard.SetTargetName(dblaSlideUp, EnergyGrid.Name);
Storyboard.SetTargetProperty(dblaSlideUp, new PropertyPath(Border.HeightProperty));
Storyboard strbSlideUp = new Storyboard();
strbSlideUp.Children.Add(dblaSlideUp);
strbSlideUp.Begin(this);
BottomTextBox.Text = "Click to Maximize";

this will change Height of the UIElement with Duration of 5 seconds.

2. ColorAnimation

used to animates the value of a Color property between two target values using linear interpolation over a specified Duration.

 Example 1 :

Below example describes change the color value of UIElement.

 
 

<Storyboard x:Key="HighlightStoryboard"
 BeginTime="00:00:00"
 RepeatBehavior="Forever"
 Storyboard.TargetName="txtBlockScannerText"
 Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)">
 <ColorAnimation Duration="0:0:1"
  From="GreenYellow"
  To="Magenta" />
</Storyboard>

Created Storyboard with ColorAnimation by setting TargetProperty to Foreground color of the control.

<TextBlock x:Name="txtBlockScannerText"
 HorizontalAlignment="Center"
 VerticalAlignment="Center"
 Text="This is Highlighted Text">
 <TextBlock.Triggers>
  <EventTrigger RoutedEvent="Loaded">
   <BeginStoryboard Storyboard="{StaticResource HighlightStoryboard}" />
  </EventTrigger>
 </TextBlock.Triggers>
</TextBlock>

Created TextBlock control, added Loaded EventTrigger with setting previously created Storybaord Resource.

3. ColorAnimationUsingKeyFrames

 Animates the value of a Color property along a set of KeyFrames over a specified Duration.

A key frame animation's target values are defined by its KeyFrames property, which contains a collection of ColorKeyFrame objects. Each ColorKeyFrame defines a segment of the animation with its own target Value and KeyTime.

KeyTime will sets the time at which the key frame's target Value should be reached.

Unlike a ColorAnimation, a ColorAnimationUsingKeyFrames can have more than two of target values.

Example :

<Border x:Name="MyBorder"
 Grid.Row="4"
 Width="500"
 Height="40"
 BorderBrush="Black"
 BorderThickness="1">
 <Border.Background>
  <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
   <GradientStop Offset="0" Color="#DEB40A" />
   <GradientStop Offset="1" Color="#FF7F00" />
  </LinearGradientBrush>
 </Border.Background>
 <Border.Triggers>
 <EventTrigger RoutedEvent="MouseEnter">
  <BeginStoryboard>
  <Storyboard>
   <ColorAnimationUsingKeyFrames Storyboard.TargetName="MyBorder" 

                           Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
    <LinearColorKeyFrame KeyTime="0:0:0.5" Value="Magenta" />
    <DiscreteColorKeyFrame KeyTime="0:0:0.8" Value="Black" />
   </ColorAnimationUsingKeyFrames>
  </Storyboard>
  </BeginStoryboard>
 </EventTrigger>
 <EventTrigger RoutedEvent="MouseLeave">
  <BeginStoryboard>
  <Storyboard>
   <ColorAnimationUsingKeyFrames Storyboard.TargetName="MyBorder" 

                           Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
    <EasingColorKeyFrame KeyTime="0:0:1" Value="#FF7F00" />
   </ColorAnimationUsingKeyFrames>
  </Storyboard>
 </BeginStoryboard>
 </EventTrigger>
 </Border.Triggers>
</Border>

In above code, 2 KeyFrame classes used with ColorAnimationUsingKeyFrames animation.

- LinearColorKeyFrame is used to change the color smoothly.

- DiscreteColorKeyFrame will change color quickly within specified KeyTime.

when user moves mouse over to the border control, 

color of the last GradientStop will change to Magenta within half second, then quickly change to Black.

when user leave mouse from border, the last GradientStop color again set to Default color.

So, this way you can create Animation and apply to any UIElement as per you project requirement, 

In this post, i tried to simplify examples with piece of code that will helpful to create 2D animation.