Visão geral sobre animações de/para/por
Este tópico descreve como usar animações de/para/por para animar dependency properties . Um animação de/para/por cria uma transição entre dois valores.
Este tópico contém as seguintes seções.
Pré-requisitos
Para entender esse tópico, você deve estar familiarizado com os recursos de animação de WPF. Para obter uma introdução a recursos de animação, consulte Revisão de Animação.
O que é uma animação de/para/por?
Um animação de/para/por é um tipo de AnimationTimeline que cria uma transição entre um valor inicial e um valor final. O período de tempo que a transição leva para concluir é determinado pelo Duration daquela animação.
Você pode aplicar uma animação de/para/por para uma propriedade usando um Storyboardem marcação e código, ou usando o método BeginAnimation no código. Você também pode usar uma animação From/To/By para criar um AnimationClock e aplicá-lo a um ou mais propriedades. Para obter mais informações sobre os diferentes métodos para aplicar as animações, consulte o Visão geral de técnicas de animação de propriedades.
Animações de/para/por podem ter não mais do que dois valores de destino. Se você precisar de uma animação que tem mais de dois valores de destino, use uma animação de quadro-chave. Animações de quadro-chave são descritas na Visão geral de animações de Quadro-Chave.
Tipos de animação de/para/por
Como as animações geram valores de propriedade, existem tipos diferentes de animação para tipos diferentes de propriedades. Para animar uma propriedade que recebe um Double, como a propriedade Width de um elemento, use uma animação que produz valores Double. Para animar uma propriedade que recebe um Point, use uma animação que produz valores Point, e etc.
Classes de animação de/para/por pertencem ao namespace System.Windows.Media.Animation e usam a seguinte convenção de nomenclatura:
*<Type>*Animation
Onde <Type> é o tipo de valor que a classe anima.
WPF fornece as seguintes classes de animação de/para/por.
Tipo de propriedade |
Classe de animação de/para/por correspondente |
|---|---|
Valores de destino
Um animação de/para/por cria uma transição entre dois valores alvos. É comum especificar um valor inicial (defina o utilizando a propriedade From) e um valor final (defina o utilizando a propriedade To). No entanto, você também pode especificar apenas um valor inicial, um valor de destino ou um valor de deslocamento. Nesses casos, a animação obtém o valor de destino que está faltando da propriedade que está sendo animada. A lista a seguir descreve as diferentes maneiras de especificar os valores de destino de uma animação.
Valor Inicial
Use a propriedade From quando você deseja especificar explicitamente o valor inicial de uma animação. Você pode usar a propriedade From por si só, ou com a propriedade To ou By. Se você especificar apenas a propriedade From, a animação faz a transição desse valor ao valor base da propriedade animada.
Valor final
Para especificar um valor final de uma animação, use a propriedade To. Se você usar a propriedade To por si só, a animação obtém o valor inicial a partir da propriedade que está sendo animada ou da saída de outra animação que é aplicada à mesma propriedade. Você pode use a propriedade To juntamente com a propriedade From para especificar explicitamente valores inicial e final para a animação.
Valor de Deslocamento
A propriedade By permite que você especifique um deslocamento em vez de um valor explícito inicial ou final para a animação. A propriedade By de uma animação especifica por quanto a animação altera um valor sobre sua duração. Você pode usar a propriedade By por si só, ou com a propriedade From. Se você especificar apenas a propriedade By, a animação adiciona o valor de deslocamento ao valor base da propriedade ou a saída de outra animação.
Usando valores de/para/por
As seções a seguir descrevem como usar as propriedades From, To, e By separadamente ou juntas.
Cada um dos exemplos nesta seção usa um DoubleAnimation, que é um tipo de animação de/Para/pelo, para animar a propriedade Width de um Rectangle que é 10 device independent pixels de altura e 100 device independent pixels de largura.
Embora cada exemplo utiliza um DoubleAnimation, as propriedades From, To e By de todas as animações de/para/por se comportam de forma idêntica. Embora cada um destes exemplos usa um Storyboard, você pode usar animações de/para/por de outras maneiras. Para obter mais informações, consulte Visão geral de técnicas de animação de propriedades.
De/para
Quando você define os valores From e To juntos, a animação progride do valor que é especificado pela propriedade From, para o valor que é especificado pela propriedade To.
O exemplo a seguir define o From propriedade das DoubleAnimation como 50 e seus To propriedade para 300. sistema autônomo resultado, a 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(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>
Para
Quando você define apenas a propriedade To, a animação progride a partir do valor base da propriedade animada, ou da saída de uma animação composta que foi anteriormente aplicada à mesma propriedade, ao valor que é especificado pela propriedade To.
("Animação de Composição" refere-se a uma animação Active ou Filling que anteriormente aplicou à mesma propriedade que ainda está em efeito quando a animação atual foi aplicada, usando o comportamento de handoff de Compose.)
O exemplo a seguir define apenas o To propriedade das DoubleAnimation a 300. sistema autônomo nenhum valor inicial foi especificada, a DoubleAnimation usa o valor de base (100) da Width propriedade sistema autônomo seu valor inicial. O Width do Rectangle é animado de 100 para valor de destino da animação de 300.
// 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
Quando você define apenas a propriedade By de uma animação, a animação progride a partir do valor base da propriedade animada, ou da saída de uma animação composta para a soma desse valor ao valor que é especificado pela propriedade By.
O exemplo a seguir define apenas o By propriedade das DoubleAnimation a 300. Porque o exemplo não especifica um valor inicial, a DoubleAnimation usa o valor de base do Width propriedade 100, sistema autônomo seu valor inicial. O valor final é determinado adicionando-o By valor de animação, 300, seu valor inicial e 100: 400. As a result, the Width of the Rectangle is animated from 100 to 400.
// 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>
De/por
Quando você define propriedades From e By de uma animação, a animação progride do valor que é especificado pela propriedade From, para o valor que é especificado pela soma das propriedades From e By.
O exemplo a seguir define o From propriedade das DoubleAnimation como 50 e seus By propriedade para 300. O valor final é determinado adicionando-o By valor de animação, 300, seu valor inicial e 50: 350. sistema autônomo resultado, a Width da Rectangle é animado de 50 a 350.
// 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>
From
Quando você define apenas o valor From de uma animação, a animação progride a partir do valor da propriedade especificada pela propriedade From, para o valor base da propriedade que está sendo animada ou para a saída de uma animação composta.
O exemplo a seguir define apenas o From propriedade das DoubleAnimation a 50. sistema autônomo nenhum valor final foi especificada, a DoubleAnimation usa o valor de base do Width propriedade 100, sistema autônomo seu valor final. O Width do Rectangle é animado de 50 para valor de base da propriedade Width, 100.
// 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
Se você definir tanto as propriedades To e By de uma animação, a propriedade By será ignorada.
Outros tipos de animação
As animações de/para/por são não o único tipo de animações que WPF fornece: Ele também fornece animações quadro-chave e animações do caminho.
Uma animação de quadro chave anima com qualquer número de valores de destino, descrito usando quadros chaves. Para obter mais informações, consulte o Visão geral de animações de Quadro-Chave.
Uma animação de caminho gera valores de saída de um PathGeometry. Para obter mais informações, consulte o Visão Geral de Animações de Caminho.
WPF também permite que você crie seus próprios tipos de animação personalizados. Para obter mais informações, consulte o Visão Geral de Animações Personalizadas.
Consulte também
Tarefas
De, Para e By exemplo de vParalores de destino de ParanimParação
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