Visão geral sobre animações de/para/por
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
To understand this topic, you should be familiar with WPF animations features. For an introduction to animation features, see the Revisão de Animação.
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 Visão geral de técnicas de animação de propriedades.
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 Visão geral de animações de Quadro-Chave.
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.
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 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 Visão geral de técnicas de animação de propriedades.
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.
O exemplo a seguir define o From propriedade da DoubleAnimation para 50 e sua To propriedade 300. Como resultado, o Width da Rectangle animado de 50 a 300.
' Demonstrates the From and To properties used together.
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
Dim myRectangle As New Rectangle()
' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("fromToAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.Black
' Demonstrates the From and To properties used together.
' Animates the rectangle's Width property from 50 to 300 over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 50
myDoubleAnimation.To = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))
Storyboard.SetTargetName(myDoubleAnimation, "fromToAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)
' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
// Demonstrates the From and To properties used together.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"fromToAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Black;
// Demonstrates the From and To properties used together.
// Animates the rectangle's Width property from 50 to 300 over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "fromToAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
<!-- 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.)
O exemplo seguinte define apenas o To propriedade da DoubleAnimation a 300. Porque nenhum valor inicial foi especificado, o DoubleAnimation usa o valor de base (100) da Width a propriedade como o valor inicial. The Width of the Rectangle is animated from 100 to the animation's target value of 300.
' Demonstrates the use of the To property.
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
Dim myRectangle As New Rectangle()
' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("toAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.Gray
' Demonstrates the To property used by itself. Animates
' the Rectangle's Width property from its base value
' (100) to 300 over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.To = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))
Storyboard.SetTargetName(myDoubleAnimation, "toAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)
' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
// Demonstrates the use of the To property.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"toAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Gray;
// Demonstrates the To property used by itself. Animates
// the Rectangle's Width property from its base value
// (100) to 300 over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "toAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
<!-- 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.
O exemplo seguinte define apenas o By propriedade da DoubleAnimation a 300. Porque o exemplo não especifica um valor inicial, o DoubleAnimation usa o valor de base da Width propriedade, 100, como o valor inicial. O valor final é determinado pela adição de By o valor da animação, 300, seu valor inicial e 100: 400. Como resultado, o Width da Rectangle animado de 100 a 400.
' Demonstrates the use of the By property.
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
Dim myRectangle As New Rectangle()
' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("byAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.RoyalBlue
' 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.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.By = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))
Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)
' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
// Demonstrates the use of the By property.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"byAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.RoyalBlue;
// 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 myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.By = 300;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
<!-- 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.
O exemplo a seguir define o From propriedade da DoubleAnimation para 50 e sua By propriedade 300. O valor final é determinado pela adição de By o valor da animação, 300, seu valor inicial e 50: 350. Como resultado, o Width da Rectangle animado de 50 para 350.
' Demonstrates the use of the From and By properties.
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
Dim myRectangle As New Rectangle()
' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("byAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.BlueViolet
' Demonstrates the From and By properties used 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.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 50
myDoubleAnimation.By = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))
Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)
' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
// Demonstrates the use of the From and By properties.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"byAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.BlueViolet;
// Demonstrates the From and By properties used 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 myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.By = 300;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
<!-- 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>
De
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.
O exemplo seguinte define apenas o From propriedade da DoubleAnimation a 50. Como nenhum valor final foi especificada, o DoubleAnimation usa o valor de base da Width propriedade, 100, como o valor final. 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.
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
Dim myRectangle As New Rectangle()
' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("fromAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.Purple
' Demonstrates the From property used by itself. Animates the
' rectangle's Width property from 50 to its base value (100)
' over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 50
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))
Storyboard.SetTargetName(myDoubleAnimation, "fromAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)
' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
// Demonstrates the use of the From property.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"fromAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Purple;
// Demonstrates the From property used by itself. Animates the
// rectangle's Width property from 50 to its base value (100)
// over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "fromAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
<!-- 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
Animações de/para/por não são o único tipo de animações que WPF fornece: Ele também fornece animações quadro-chave e animações de caminho.
A key-frame animation animates along any number of destination values, described using key frames. Para obter mais informações, consulte o Visão geral de animações de Quadro-Chave.
A path animation generates output values from a PathGeometry. Para obter mais informações, consulte o Visão Geral de Animações de Caminho.
WPF also enables you to create your own custom animation types. Para obter mais informações, consulte o Visão Geral de Animações Personalizadas.
Consulte também
Referência
Conceitos
Visão geral de animações de Quadro-Chave
Visão Geral de Animações de Caminho
Visão Geral de Animações Personalizadas