--- title: "From-To-By Animations Overview" ms.date: "03/30/2017" dev_langs: - "csharp" - "vb" helpviewer_keywords: - "animation [WPF], From/to/by" - "From/to/by animation" ms.assetid: 516fce0a-e7f8-49b8-b018-53b3d409a8a3 --- # 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. ## Prerequisites To understand this topic, you should be familiar with [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] animations features. For an introduction to animation features, see the [Animation Overview](animation-overview.md). ## What Is a From/To/By Animation? A From/To/By animation is a type of 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 of that animation. You can apply a From/To/By animation to a property by using a in markup and code, or by using the method in code. You may also use a From/To/By Animation to create an and apply it to one or more properties. For more information about the different methods for applying animations, see the [Property Animation Techniques Overview](property-animation-techniques-overview.md). 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](key-frame-animations-overview.md). ## 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 , such as the property of an element, use an animation that produces values. To animate a property that takes a , use an animation that produces values, and so on. From/To/By animation classes belong to the namespace and use the following naming convention: *\* `Animation` Where *\* is the type of value that the class animates. [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] provides the following From/To/By animation classes. |Property type|Corresponding From/To/By animation class| |-------------------|------------------------------------------------| ||| ||| ||| ||| ||| ||| ||| ||| ||| ||| ||| ||| ||| ||| ||| ||| ## 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 property) and an ending value (set it by using the 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 property when you want to explicitly specify the starting value of an animation. You can use the property by itself, or with the or property. If you specify only the 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 property. If you use the 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 property together with the property to explicitly specify starting and ending values for the animation. - **Offset Value** The property enables you to specify an offset instead of an explicit starting or ending value for the animation. The property of an animation specifies by how much the animation changes a value over its duration. You can use the property by itself or with the property. If you specify only the 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 , , and properties together or separately. The examples in this section each use a , which is a type of From/To/By animation, to animate the property of a that is 10 device independent pixels high and 100 device independent pixels wide. Although each example uses a , the From, To, and By properties of all From/To/By animations behave identically. Although each of these examples uses a , you can use From/To/By animations in other ways. For more information, see [Property Animation Techniques Overview](property-animation-techniques-overview.md). ### From/To When you set the and values together, the animation progresses from the value that is specified by the property, to the value that is specified by the property. The following example sets the property of the to 50 and its property to 300. As a result, the of the is animated from 50 to 300. [!code-csharp[basicvalues_snip#FromToAnimationInline](~/samples/snippets/csharp/VS_Snippets_Wpf/basicvalues_snip/CSharp/AnimationTargetValuesExample.cs#fromtoanimationinline)] [!code-vb[basicvalues_snip#FromToAnimationInline](~/samples/snippets/visualbasic/VS_Snippets_Wpf/basicvalues_snip/VisualBasic/AnimationTargetValuesExample.vb#fromtoanimationinline)] ### To When you set just the 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 property. ("Composing animation" refers to an or animation that previously applied to the same property that is still in effect when the current animation was applied by using the handoff behavior.) The following example sets just the property of the to 300. Because no starting value was specified, the uses the base value (100) of the property as its starting value. The of the is animated from 100 to the animation's target value of 300. [!code-csharp[basicvalues_snip#ToAnimationInline](~/samples/snippets/csharp/VS_Snippets_Wpf/basicvalues_snip/CSharp/AnimationTargetValuesExample.cs#toanimationinline)] [!code-vb[basicvalues_snip#ToAnimationInline](~/samples/snippets/visualbasic/VS_Snippets_Wpf/basicvalues_snip/VisualBasic/AnimationTargetValuesExample.vb#toanimationinline)] ### By When you set just the 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 property. The following example sets just the property of the to 300. Because the example does not specify a starting value, the uses the base value of the property, 100, as its starting value. The ending value is determined by adding the value of the animation, 300, to its starting value, 100: 400. As a result, the of the is animated from 100 to 400. [!code-csharp[basicvalues_snip#ByAnimationInline](~/samples/snippets/csharp/VS_Snippets_Wpf/basicvalues_snip/CSharp/AnimationTargetValuesExample.cs#byanimationinline)] [!code-vb[basicvalues_snip#ByAnimationInline](~/samples/snippets/visualbasic/VS_Snippets_Wpf/basicvalues_snip/VisualBasic/AnimationTargetValuesExample.vb#byanimationinline)] ### From/By When you set the and properties of an animation, the animation progresses from the value that is specified by the property, to the value that is specified by the sum of the and properties. The following example sets the property of the to 50 and its property to 300. The ending value is determined by adding the value of the animation, 300, to its starting value, 50: 350. As a result, the of the is animated from 50 to 350. [!code-csharp[basicvalues_snip#FromByAnimationInline](~/samples/snippets/csharp/VS_Snippets_Wpf/basicvalues_snip/CSharp/AnimationTargetValuesExample.cs#frombyanimationinline)] [!code-vb[basicvalues_snip#FromByAnimationInline](~/samples/snippets/visualbasic/VS_Snippets_Wpf/basicvalues_snip/VisualBasic/AnimationTargetValuesExample.vb#frombyanimationinline)] ### From When you specify just the value of an animation, the animation progresses from the value that is specified by the 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 property of the to 50. Because no ending value was specified, the uses the base value of the property, 100, as its ending value. The of the is animated from 50 to the base value of the property, 100. [!code-csharp[basicvalues_snip#FromAnimationInline](~/samples/snippets/csharp/VS_Snippets_Wpf/basicvalues_snip/CSharp/AnimationTargetValuesExample.cs#fromanimationinline)] [!code-vb[basicvalues_snip#FromAnimationInline](~/samples/snippets/visualbasic/VS_Snippets_Wpf/basicvalues_snip/VisualBasic/AnimationTargetValuesExample.vb#fromanimationinline)] ### To/By If you set both the and the properties of an animation, the property is ignored. ## Other Animation Types From/To/By animations are not the only type of animations that [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] 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](key-frame-animations-overview.md). - A path animation generates output values from a . For more information, see the [Path Animations Overview](path-animations-overview.md). [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] also enables you to create your own custom animation types. For more information, see the [Custom Animations Overview](custom-animations-overview.md). ## See also - - - [Animation Overview](animation-overview.md) - [Storyboards Overview](storyboards-overview.md) - [Key-Frame Animations Overview](key-frame-animations-overview.md) - [Path Animations Overview](path-animations-overview.md) - [Custom Animations Overview](custom-animations-overview.md) - [From, To, and By Animation Target Values Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Animation/TargetValues)