BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Animation - Basic Animations

The one hundred and fifty-sixth part of the Windows Presentation Foundation Fundamentals tutorial describes the most basic types of animation. These allow you to change a property from one value to another, with WPF automatically generating a series of intermediate values.

Delayed Animations

In the example program, the enter and exit actions both use two DoubleAnimations. In each pair, both animations start immediately and have the same duration. Often you will want to have animations run in sequence or only partly concurrently. You can control this by delaying the start time of your animations. To do so, you set the BeginTime property to a TimeSpan value. When the trigger fires, the animation does not execute until this period of time has elapsed.

To demonstrate, update the Border's trigger to the code below. The new version uses delays so that when the mouse moves over the control, the height expands only after the width animation is complete. When the mouse is moved away, the delay for the width animation, and its shorter duration, mean that the two animations partly overlap.

<Trigger Property="IsMouseOver" Value="True">
    <Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Width"
                    To="250" From="16" Duration="0:0:0.5"/>
                <DoubleAnimation Storyboard.TargetProperty="Height"
                    BeginTime="0:0:0.5" To="200" Duration="0:0:0.5"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Width"
                    BeginTime="0:0:0.5" To="16" Duration="0:0:1"/>
                <DoubleAnimation Storyboard.TargetProperty="Height"
                    To="16" Duration="0:0:2"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.ExitActions>
</Trigger>

Acceleration and Deceleration Ratios

Unless you specify otherwise, WPF uses linear interpolation for basic animations. This means that the rate of change for the animated property is constant. Although useful in many situations, this can be jarring for movement.

For a more natural movement, you can apply acceleration to the start of the animation and deceleration to the end. To do so, you set the AccelerationRatio and DecelerationRatio properties to values between zero and one. For AccelerationRatio, the value sets the fraction of time to spend increasing the rate of change. For example, a value of 0.1 for a two-second animation would mean that the rate of change increases for 0.2 seconds. DecelerationRatio is similar; it sets the proportion of the animation's duration spent lowering the rate of change. Both values default to zero but can be increased, as long as their total is less than or equal to one.

Let's adjust the trigger again to introduce acceleration and deceleration. We'll change all of the animations so that the rate of change is adjusted for 40% of the duration of the animation.

<Trigger Property="IsMouseOver" Value="True">
    <Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Width"
                    To="250" From="16" Duration="0:0:0.5"
                    AccelerationRatio="0.4" DecelerationRatio="0.4"/>
                <DoubleAnimation Storyboard.TargetProperty="Height"
                    BeginTime="0:0:0.5" To="200" Duration="0:0:0.5"
                    AccelerationRatio="0.4" DecelerationRatio="0.4"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Width"
                    BeginTime="0:0:0.5" To="16" Duration="0:0:1"
                    AccelerationRatio="0.4" DecelerationRatio="0.4"/>
                <DoubleAnimation Storyboard.TargetProperty="Height"
                    To="16" Duration="0:0:2"
                    AccelerationRatio="0.4" DecelerationRatio="0.4"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.ExitActions>
</Trigger>

Run the program and trigger the animations to see the results. The effect is subtle but noticeable.

Repeating Animations

All of the animations that we've seen so far run once only. However, it is possible to have your animation steps repeat for a period of time, a number of cycles, or forever. To demonstrate this, let's add an animation to the ellipse. We'll start with an animation that runs just once.

Add the following Triggers element to the style for the ellipse. Note the use of Fill.(SolidColorBrush.Color) as the target property. This is required because ColorAnimation is used to animate a colour. The Fill property holds a Brush, not a colour. However, as we know that it is using a SolidColorBrush, we can use this syntax to update that brush's Color property.

<Style.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"
                                From="Red" To="Blue" Duration="0:0:1"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Style.Triggers>

Run the program to test the animation. With the border expanded to reveal the ellipse, move the mouse over the shape. The fill colour should fade from red to blue. The animation runs only once, unless you move the mouse away from the shape and then back.

To add repetition, you set the RepeatBehavior property. One option is to set the value to an amount of time, using the same format as the Duration property. The following animation repeats the animation for six seconds. As this is not a perfect multiple of the duration, the animation stops part way through the third cycle, leaving the ellipse with a purple fill.

<ColorAnimation Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"
                From="Red" To="Blue" Duration="0:0:2.5"
                RepeatBehavior="0:0:6"/>

To repeat the animation a set number of times, set the RepeatBehavior to that number, followed by an "x". For example, the following animation cycles three times.

<ColorAnimation Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"
                From="Red" To="Blue" Duration="0:0:2.5"
                RepeatBehavior="3x"/>

Finally, you can specify that an animation should repeat indefinitely. To do so, set the property to Forever, as follows:

<ColorAnimation Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"
                From="Red" To="Blue" Duration="0:0:2.5"
                RepeatBehavior="Forever"/>

NB: Setting RepeatBehavior to Forever for an event trigger that reacts to the Loaded event allows you to create constantly animated values that require no user intervention.

AutoReverse

The previous example gives a smooth transition between red and blue but a sudden switch back to red. These types of animation can be improved by reversing them after they complete. You could create several animations and use BeginTime to delay their execution. However, all animations include the AutoReverse property to simplify the process. Setting this property to true causes the animation to play as normal, then repeat in reverse.

To demonstrate, update the ColorAnimation as follows.

<ColorAnimation Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"
                From="Red" To="Blue" Duration="0:0:2.5"
                RepeatBehavior="Forever" AutoReverse="True"/>

Run the program to see the results. On triggering the animation you should see a smooth transition from red to blue, then back to red again.

3 May 2015