WPF Reflections:

Animation

Aug 25 2008   10:29PM GMT

WPF Animations - FillBehaviour property



Posted by: Mark Shurmer
WPF, Animation, VS 2008, XAML

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:

blogaugust24-4.GIF

Aug 24 2008   6:15PM GMT

WPF Animations - Slow down then speed up



Posted by: Mark Shurmer
WPF, Animation, VS 2008, XAML

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:

blogaugust24-3.GIF


Aug 24 2008   6:07PM GMT

WPF Animations - Deceleration property



Posted by: Mark Shurmer
WPF, Animation, XAML

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):

blogaugust24-2.GIF


Aug 24 2008   2:46PM GMT

WPF Animations - AccelerationRatio



Posted by: Mark Shurmer
Animation, Databinding, WPF, XAML

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:

blogaugust24.GIF


Aug 16 2008   4:59PM GMT

WPF Animations - SpeedRatio property



Posted by: Mark Shurmer
WPF, Animation, XAML

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:

blogaugust16-2.GIF


Aug 16 2008   7:47AM GMT

WPF Animations - BeginTime property



Posted by: Mark Shurmer
WPF, Animation, Databinding, XAML

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:

blog16august2008.GIF


Aug 5 2008   2:42PM GMT

WPF Animations - Duration property



Posted by: Mark Shurmer
WPF, Animation, Databinding, XAML

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


Aug 5 2008   7:28AM GMT

WPF Animation - To property



Posted by: Mark Shurmer
WPF, Animation, Databinding, XAML

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:

blog5aug.GIF


Aug 4 2008   7:05AM GMT

WPF Animation - From property



Posted by: Mark Shurmer
WPF, Animation, Databinding, XAML

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:

blog4aug.PNG


Jun 28 2008   11:44AM GMT

WPF animation - running multiple animations



Posted by: Mark Shurmer
WPF, Animation, XAML

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:

june28_2.JPG

Notice how the animation is held at the end.