From/To/By Animations Overview

This topic describes how to use From/To/By animations to animate dependency properties. A From/To/By animation creates a transition between two values.

This topic contains the following sections.

• Prerequisites
• What Is a From/To/By Animation?
• From/To/By Animation Types
• Target Values
• Using From/To/By Values
• Other Animation Types
• Related Topics

Prerequisites

To understand this topic, you should be familiar with WPF animations features. For an introduction to animation features, see the Animation Overview.

What Is a From/To/By Animation?

A From/To/By animation is a type of AnimationTimeline that creates a transition between a starting value and an ending value. The amount of time that the transition takes to complete is determined by the Duration of that animation.

You can apply a From/To/By animation to a property by using a Storyboard in markup and code, or by using the BeginAnimation method in code. You may also use a From/To/By Animation to create an AnimationClock and apply it to one or more properties. For more information about the different methods for applying animations, see the Property Animation Techniques Overview.

From/To/By animations can have no more than two target values. If you require an animation that has more than two target values, use a key-frame animation. Key-frame animations are described in the Key-Frame Animations Overview.

From/To/By Animation Types

Because animations generate property values, there are different animation types for different property types. To animate a property that takes a Double, such as the Width property of an element, use an animation that produces Double values. To animate a property that takes a Point, use an animation that produces Point values, and so on.

From/To/By animation classes belong to the System.Windows.Media.Animation namespace and use the following naming convention:

<Type> Animation

Where <Type> is the type of value that the class animates.

WPF provides the following From/To/By animation classes.

Target Values

A From/To/By animation creates a transition between two target values. It is common to specify a starting value (set it by using the From property) and an ending value (set it by using the To property). However, you can also specify only a starting value, a destination value, or an offset value. In these cases, the animation obtains the missing target value from the property that is being animated. The following list describes the different ways to specify the target values of an animation.

• Starting Value

  Use the From property when you want to explicitly specify the starting value of an animation. You can use the From property by itself, or with the To or By property. If you specify only the From property, the animation transitions from that value to the base value of the animated property.

• Ending Value

  To specify an ending value of an animation, use its To property. If you use the To property by itself, the animation obtains its starting value from the property that is being animated or from the output of another animation that is applied to the same property. You can use the To property together with the From property to explicitly specify starting and ending values for the animation.

• Offset Value

  The By property enables you to specify an offset instead of an explicit starting or ending value for the animation. The By property of an animation specifies by how much the animation changes a value over its duration. You can use the By property by itself or with the From property. If you specify only the By property, the animation adds the offset value to the base value of the property or to the output of another animation.

Using From/To/By Values

The following sections describe how to use the From, To, and By properties together or separately.

The examples in this section each use a DoubleAnimation, which is a type of From/To/By animation, to animate the Width property of a Rectangle that is 10 device independent pixels high and 100 device independent pixels wide.

Although each example uses a DoubleAnimation, the From, To, and By properties of all From/To/By animations behave identically. Although each of these examples uses a Storyboard, you can use From/To/By animations in other ways. For more information, see Property Animation Techniques Overview.

From/To

When you set the From and To values together, the animation progresses from the value that is specified by the From property, to the value that is specified by the To property.

The following example sets the From property of the DoubleAnimation to 50 and its To property to 300. As a result, the Width of the Rectangle is animated from 50 to 300.

<!-- Demonstrates the From and To properties used together. -->
<Rectangle Name="fromToAnimatedRectangle"
   Height="10" Width="100" HorizontalAlignment="Left"
   Fill="Black">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>
        <!-- Demonstrates the From and To properties used together.
               Animates the rectangle's Width property from 50 to 300 over 10 seconds. -->
        <DoubleAnimation 
          Storyboard.TargetName="fromToAnimatedRectangle" 
          Storyboard.TargetProperty="Width"
          From="50" To="300" Duration="0:0:10" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

To

When you set just the To property, the animation progresses from the base value of the animated property, or from the output of a composing animation that was previously applied to the same property, to the value that is specified by the To property.

("Composing animation" refers to an Active or Filling animation that previously applied to the same property that is still in effect when the current animation was applied by using the Compose handoff behavior.)

The following example sets just the To property of the DoubleAnimation to 300. Because no starting value was specified, the DoubleAnimation uses the base value (100) of the Width property as its starting value. The Width of the Rectangle is animated from 100 to the animation's target value of 300.

<!-- Demonstrates the use of the To property. -->
<Rectangle Name="toAnimatedRectangle"
   Height="10" Width="100" HorizontalAlignment="Left"
   Fill="Gray">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>

          <!-- Demonstrates the To property used by itself.
               Animates the Rectangle's Width property from its base value
               (100) to 300 over 10 seconds. -->
          <DoubleAnimation 
            Storyboard.TargetName="toAnimatedRectangle" 
            Storyboard.TargetProperty="Width"
            To="300" Duration="0:0:10" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

By

When you set just the By property of an animation, the animation progresses from the base value of the property that is being animated, or from the output of a composing animation to the sum of that value and the value that is specified by the By property.

The following example sets just the By property of the DoubleAnimation to 300. Because the example does not specify a starting value, the DoubleAnimation uses the base value of the Width property, 100, as its starting value. The ending value is determined by adding the By value of the animation, 300, to its starting value, 100: 400. As a result, the Width of the Rectangle is animated from 100 to 400.

<!-- Demonstrates the use of the By property. -->
<Rectangle Name="byAnimatedRectangle" 
   Height="10" Width="100" HorizontalAlignment="Left"
   Fill="RoyalBlue">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>

          <!-- Demonstrates the By property used by itself.
               Increments the Rectangle's Width property by 300 over 10 seconds.
               As a result, the Width property is animated from its base value
               (100) to 400 (100 + 300) over 10 seconds. -->
          <DoubleAnimation 
            Storyboard.TargetName="byAnimatedRectangle" 
            Storyboard.TargetProperty="Width" 
            By="300" Duration="0:0:10" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

From/By

When you set the From and By properties of an animation, the animation progresses from the value that is specified by the From property, to the value that is specified by the sum of the From and By properties.

The following example sets the From property of the DoubleAnimation to 50 and its By property to 300. The ending value is determined by adding the By value of the animation, 300, to its starting value, 50: 350. As a result, the Width of the Rectangle is animated from 50 to 350.

<!-- Demonstrates the use of the From and By properties. -->
<Rectangle Name="fromByAnimatedRectangle" Grid.Row="6" Grid.Column="2"
   Height="10" Width="100" HorizontalAlignment="Left"
   Fill="BlueViolet">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>

          <!-- Demonstrates the From and By properties used by together.
               Increments the Rectangle's Width property by 300 over 10 seconds.
               As a result, the Width property is animated from 50
               to 350 (50 + 300) over 10 seconds. -->
          <DoubleAnimation 
            Storyboard.TargetName="fromByAnimatedRectangle" 
            Storyboard.TargetProperty="Width" 
            From="50" By="300" Duration="0:0:10"  />

        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

From

When you specify just the From value of an animation, the animation progresses from the value that is specified by the From property, to the base value of the property that is being animated or to the output of a composing animation.

The following example sets just the From property of the DoubleAnimation to 50. Because no ending value was specified, the DoubleAnimation uses the base value of the Width property, 100, as its ending value. The Width of the Rectangle is animated from 50 to the base value of the Width property, 100.

<!-- Demonstrates the use of the From property. -->
<Rectangle Name="fromAnimatedRectangle" Grid.Row="8" Grid.Column="2"
   Height="10" Width="100" HorizontalAlignment="Left" 
   Fill="Purple">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>
          <!-- Demonstrates the From property used by itself.
               Animates the rectangle's Width property from 50 to its base value (100)
               over 10 seconds. -->
          <DoubleAnimation 
            Storyboard.TargetName="fromAnimatedRectangle" 
            Storyboard.TargetProperty="Width"
            From="50" Duration="0:0:10"  />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

To/By

If you set both the To and the By properties of an animation, the By property is ignored.

Other Animation Types

From/To/By animations are not the only type of animations that WPF provides: it also provides key-frame animations and path animations.

• A key-frame animation animates along any number of destination values, described using key frames. For more information, see the Key-Frame Animations Overview.

• A path animation generates output values from a PathGeometry. For more information, see the Path Animations Overview.

WPF also enables you to create your own custom animation types. For more information, see the Custom Animations Overview.

See Also

Reference

Timeline
Storyboard

Concepts

Animation Overview
Storyboards Overview
Key-Frame Animations Overview
Path Animations Overview
Custom Animations Overview

Other Resources

From, To, and By Animation Target Values Sample