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.

WPF Animation – key frame

Firstly, what does a key frame animation mean?

It is a way of specifying steps for your animation to follow.
The WPF runtime will work out the smooth transition between the steps for you.

Why would you want to do such a thing?
If you want to control how the animation flows, but don’t want to specify every point, then a key frame helps you.

In the following example,  I have used a key frame animation to specify the periods at which the button’s rectangle changes colour.
It changes colour from AliceBlue to Blue to DarkGrey when you click on the button

Notice how you need to specify the target property as Fill.Color, if you don’t WPF tries complains that you are specifying a Color object when it is expecting a Brush!

WPF – animation with automatic return

In a previous blog I talked about how to make an animation return to it’s original value.
Actually all you need to do is add a property called AutoReverse to your animation declaration.
It needs to be set to true to enable and to false to disable it.

Easy this xaml isn’t it?

In this example, the textbox stretches horizontally when you wave the move over it, and then returns back to it’s original width: