Animation

WPF Animations - FillBehaviour property

FillBehaviour is a handy little property when you are doing animations.
It specifies what happens when the animation ends.

It’s actually an enum, and you can specify the following values:

HoldEnd
Stop

HoldEnd will keep the ending value of the animation, whereas Stop will revert back to the original value.
That’s a somewhat bizarre naming in my opinion.
Also, I assume that there are new values expected in the future.

In the following example , two circles move across the screen a bit.
Notice how I use a Canvas in order to specify the Left property for the circles and also the syntax for specifying them in the animations.

The top circle stays where the animation finished, whereas the bottom one goes back to the original value:

WPF Animations - Slow down then speed up

One thing that struck me when I was first looking at the AccelerationRatio and DecelerationRatio properties in animations, was whether they could be combined to give the animation a double wobble?!?

Of course is the answer.
In the following example, observe how the bottom ellipse is out of step with the top ellipse.

The bottom ellipse is having an acceleration factor and a deceleration factor applied to it, which gives it a curved animation:

WPF Animations - Deceleration property

The Deceleration property gives you the facility to turn a linear animation into a non linear one.

In a similar way to the AccelerationRatio property, you specify the property and the animation makes a gradual transition.

In the case of the Deceleration property, the animation gradually slows down.

In the following example, the bottom ellipse is slightly out of the line with the linear animation in the top ellipse.
This is because it is using a gradual slowing down (or deceleration):

WPF Animations - AccelerationRatio

What does AccelerationRatio do?
In a nutshell, it turns a linear animation into a non-linear one.
Whaaaaaaaaaaat I hear someone say.

What I mean by that is that it allows you to specify that an animation will build up to it’s final destination, therefore it starts slowly and accelerates.
The actual ratio can be between 0 and 1, and the nearer it is to 1 the faster the acceleration is.

In this example, the bottom rectangle slowly gets wider, but gets faster:

WPF Animations - SpeedRatio property

What does the SpeedRatio property do?
Well it provides you with the ability to speed up an animation or slow one down.

The deafault speed for an animation is 1.

To speed up an animation, change the SpeedRatio to a bigger number.
The numbers are relative, so using SpeedRatio=”4″ will make it run 4 times faster.

To slow it down, use a number between 1 and 0.
So, using 0.5 will slow make the animation half the speed.

In this example, I have slowed down the second rectangle by specifying a SpeedRatio of 0.5:

WPF Animations - BeginTime property

The BeginTime property sits in the Timeline class.
It specifies a delay before the animation starts.

Why would you want to do that?
One thing it allows you to do is have multiple animations running at the same time, but for one to start at a specified time after the other.

In the following animation, the rectangles follow one another in the same storyboard - the red one exactly 1 second after the blue one:

WPF Animations - Duration property

This is a very important property in the world of WPF animations, as it specifies how long the animation will last.

The property is actually of type Duration.
What does that mean?
Well, in addition to being able to specify every thing that a TimeSpan can specify - like hours, minutes or seconds - you can also specify two special values:

Automatic - sets the animation to be 1 second
Forever - does what it says on the tin , runs the animation forever

WPF Animation - To property

In WPF animations, the To property is an important one.
It tells the animation where to stop.

Quite bizarrely, in my opinion, it can be left out.
When it is, the animation will use the value specified in the definition of the element.
In doing so, it will ignore any changes to that property.

In this example, we specify a To value in the animation to make the circle slowly become more and more transparent:

WPF Animation - From property

When you are doing a WPF animation, with a storyboard, the From property lets you specify the starting value.

It means you can start the animation with a different value than the current value.
You may want to do that so that you can control the starting value, or if you are doing a cumulative effect.

Alternatively, you may simply want to have the effect of shrinking first, then expanding, like the following example:

WPF animation - running multiple animations

When you are contemplating animations in WPF, you can have more than one running at any particular time.
Remember though, that each one creates a whole gamut of objects in order to run that animation.

Here is an example of how to change the width of a rectangle and also change the colour halfway through the width animation.
To start the animation, you need to click on the rectangle:

Notice how the animation is held at the end.