Animation in WPF

In WPF, we have 3 types of animations:
1) Color Animation – Used to change the color of the control.
2) Double Animation – Used to animate double values such as X/Y coordinate, Width and Height etc.
3) Key Frame Animation – This is a complex animation than color and double animation. In this animation we use key frames or a series of key frames.

Above we have seen just 1 line introduction of all types. We will learn more about them below along with their examples.

We all know that we have to write animation part in “Storyboard”. To begin storyboard we need to do “<BeginStoryBoard>”. It has two main properties – “TargetName” and “TargetProperty”. “TargetName” identifies the pbject and “TargetProperty” identifies the property of that oject. If we want to begin animation on some event like button click etc we can use “EventTrigger”. In animation there are two things – “To” and “From”. “To” specifies the start of animation and “From” specifies the end of animation. “TimeSpan” is 1 more keyword which specifies the time span for how much animation should run. These are few basic keywords which are necessary in our coding part for animation. We might come across few more keywords which I will explain them as they are used.
Now let’s start with examples of animations.

1) Color Animation:

<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Rectangle Height="38" HorizontalAlignment="Left" Margin="133,156,0,0" x:Name="Rectchangecolor" Stroke="Black" Fill="Yellow" VerticalAlignment="Top" Width="200">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Rectchangecolor"
Storyboard.TargetProperty="Fill.Color"
From="Yellow"
To="DarkBlue"
Duration="0:0:1">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Grid>
</Window>

Above is the code of color animation. In this example, we have a rectangle which is of yellow color which changes to blue color in time span of 1 second. In above code we have declared a rectangle which is already filled with yellow color. We have declared event on it as “MouseLeftButtonDown”. If we left single click on rectangle, animation will start. Now this animation we have declared below in StoryBoard in Color Animation. For this we have given TargetName the name of rectangle as that is our target for animation and TargetProperty we have declared as Fill.Color which fills the target with given color. Here we have also declared which color to fill which is blue. We have given duration as 0:0:1 which is 1 sec.

So after writing this code we will get the output as shown in below video.



2) Double Animation:

<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Rectangle Height="38" HorizontalAlignment="Left" Margin="133,156,0,0" x:Name="Rectchangecolor" Stroke="Black" Fill="Red" VerticalAlignment="Top" Width="200">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Rectchangecolor"
Storyboard.TargetProperty="Height"
From="38"
To="100"
Duration="0:0:1.5">
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="Rectchangecolor"
Storyboard.TargetProperty="Width"
From="200"
To="350"
Duration="0:0:3">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Grid>
</Window>

Above is the code of double animation. In this example, we have a rectangle which is of red color of height 38 and width 200 which changes to height 100 in time span of 1.5 second and width 350. We have declared event on it as “MouseLeftButtonDown”. If we left single click on rectangle, animation will start. Now this animation we have declared below in StoryBoard in Double Animation. For this we have given TargetName the name of rectangle as that is our target for animation and TargetProperty we have declared as Height for change in height and Width for change in width.
So after writing this code we will get the output as shown in below video.



Let’s see 1 more example of Double Animation in which we will write animation part in code.

In XAML you will have to write,
<Grid>
<Button Content="Animate" Height="33" HorizontalAlignment="Left" Margin="32,12,0,0" Name="btnRotate" VerticalAlignment="Top" Width="165" Click="btnRotate_Click" />
<Rectangle Height="200" HorizontalAlignment="Left" Margin="534,158,0,0" Name="rectangle1" Stroke="Black" VerticalAlignment="Top" Width="50" Fill="#FF166C0F" />
<Rectangle Fill="#FF166C0F" Height="50" HorizontalAlignment="Left" Margin="457,235,0,0" Name="rectangle2" Stroke="Black" VerticalAlignment="Top" Width="200" />
</Grid>

In code we need to write,

namespace WpfApplication1
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

private void btnRotate_Click(object sender, RoutedEventArgs e)
{
DoubleAnimation da =new DoubleAnimation();
da.From = 0;
da.To = 90;
da.Duration = new Duration(TimeSpan.FromSeconds(3));
DoubleAnimation da1 = new DoubleAnimation();
da1.From = 0;
da1.To = -90;
da1.Duration = new Duration(TimeSpan.FromSeconds(3));
//da.RepeatBehavior = RepeatBehavior.Forever;
RotateTransform rt = new RotateTransform();
rectangle1.RenderTransform = rt;
rt.BeginAnimation(RotateTransform.AngleProperty, da);
RotateTransform rt1 = new RotateTransform();
rectangle2.RenderTransform = rt1;
rt1.BeginAnimation(RotateTransform.AngleProperty, da1);
}


}
}

Here we have taken two similar rectangles. We have given angle property to each of them. To 1 rectangle we have given angle 90 and to other we have given angle -90 due to which both rectangle animate in opposite direction. We have included animation in the code. For writing this in our code we need to include namespace using System.Windows.Media.Animation.

So after writing this code we will get the output as shown in below video.



We can also have a combination of Color and Double Animation.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="433" Width="803">
<Grid>
<Button Content="Animate" Height="33" HorizontalAlignment="Left" Margin="32,12,0,0" Name="btnRotate"
VerticalAlignment="Top" Width="165"/>
<Rectangle Height="200" HorizontalAlignment="Left" Margin="534,158,0,0" Name="rectangle1"
Stroke="Black" VerticalAlignment="Top" Width="50" Fill="DarkGreen">
<Rectangle.RenderTransform>
<RotateTransform x:Name="TransRotate1"
CenterX="25" CenterY="25" Angle="0" />
</Rectangle.RenderTransform>
<Rectangle.Resources>
<Storyboard x:Key="spin1">
<DoubleAnimation Storyboard.TargetName="TransRotate1"
Storyboard.TargetProperty="Angle"
By="90"
Duration="0:0:10">
</DoubleAnimation>
<ColorAnimation Storyboard.TargetName="rectangle1"
Storyboard.TargetProperty="Fill.Color"
From="DarkGreen"
To="Red"
Duration="0:0:15">
</ColorAnimation>
</Storyboard>
</Rectangle.Resources>
</Rectangle>
<Rectangle Fill="DarkGreen" Height="50" HorizontalAlignment="Left" Margin="457,235,0,0" Name="rectangle2"
Stroke="Black" VerticalAlignment="Top" Width="200">
<Rectangle.RenderTransform>
<RotateTransform x:Name="TransRotate2"
CenterX="25" CenterY="25" Angle="0" />
</Rectangle.RenderTransform>
<Rectangle.Resources>
<Storyboard x:Key="spin2">
<DoubleAnimation Storyboard.TargetName="TransRotate2"
Storyboard.TargetProperty="Angle"
By="-90"
Duration="0:0:10">
</DoubleAnimation>
<ColorAnimation Storyboard.TargetName="rectangle2"
Storyboard.TargetProperty="Fill.Color"
From="DarkGreen"
To="DarkBlue"
Duration="0:0:15">
</ColorAnimation>
</Storyboard>
</Rectangle.Resources>
</Rectangle>
</Grid>
</Window>

Here we have taken the combination of color and double animation. We have considered the same above example for this. Here as time passes and angle changes the color of rectangle also changes.

So after writing this code we will get the output as shown in below video.



3) KeyFrame Animation:

<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="433" Width="803">
<Grid>
<Rectangle Height="38" HorizontalAlignment="Left" Margin="133,156,0,0" x:Name="Rect" Stroke="Black" Fill="DarkGreen" VerticalAlignment="Top" Width="200">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="RectTrans" X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectTrans"
Storyboard.TargetProperty="X"
Duration="0:0:15">
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:5" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:3" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>

</Grid>
</Window>


Here we have taken a rectangle. It uses key frames to change the animation. Here we are using X value. We have changed it from 0 to 350 back to 50 and again to 200. We have used Linear key frame so it moves in Linear Fashion.

So after writing this code we will get the output as shown in below video.



Similarly we can do using spline double key frames as follows.

<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="433" Width="803">
<Grid>
<Rectangle Height="38" HorizontalAlignment="Left" Margin="133,156,0,0" x:Name="Rect" Stroke="Black" Fill="DarkGreen" VerticalAlignment="Top" Width="200">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="SplineTestTrans" X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SplineTestTrans"
Storyboard.TargetProperty="X"
Duration="0:0:15">
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:7" KeySpline="0.0,1.0, 1.0,0.0" />
<SplineDoubleKeyFrame Value="0" KeyTime="0:0:8" KeySpline="0.25,0.5, 0.5,0.75" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SplineTestTrans"
Storyboard.TargetProperty="Y"
Duration="0:0:15">
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:7" KeySpline="0.0,1.0, 1.0,0.0" />
<SplineDoubleKeyFrame Value="0" KeyTime="0:0:8" KeySpline="0.25,0.5, 0.5,0.75" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>

</Grid>
</Window>

Here we have used spline double key frames using which we can animate in any way.
So after writing this code we will get the output as shown in below video.