Visão geral das animações De/Para/Por

Este tópico descreve como usar animações De/Para/Por para animar propriedades de dependência. Uma animação De/Para/Por cria uma transição entre dois valores.

Pré-requisitos

Para entender este tópico, você deve estar familiarizado com os recursos de animações do WPF. Para obter uma introdução aos recursos de animação, consulte o Visão geral da animação.

O que é uma animação do tipo De/Para/Por?

Uma animação De/Para/Por é um tipo de AnimationTimeline que cria uma transição entre um valor inicial e um valor final. A duração que a transição leva para ser concluída é determinada pela Duration dessa animação.

Você pode aplicar uma animação De/Para/Por a uma propriedade usando um Storyboard na marcação e no código ou usando o método BeginAnimation no código. Você também pode usar uma animação De/Para/Por para criar um AnimationClock e aplicá-lo a uma ou mais propriedades. Para obter mais informações sobre os diferentes métodos para aplicar animações, consulte a Visão Geral das Técnicas de Animação de Propriedades .

As animações De/Para/Por não podem ter mais de dois valores de destino. Se você precisar de uma animação que tenha mais de dois valores de destino, use uma animação de quadro-chave. As animações de quadros-chave são descritas na Key-Frame Visão geral das animações.

De/Para/Por Tipos de Animação

Como as animações geram valores de propriedade, há diferentes tipos de animação para diferentes tipos de propriedade. Para animar uma propriedade que usa um Double, como a propriedade Width de um elemento, use uma animação que produza valores Double. Para animar uma propriedade que requer um Point, use uma animação que produza valores Point e assim por diante.

As classes de animação De/Para/Por pertencem ao namespace System.Windows.Media.Animation e usam a seguinte convenção de nomenclatura:

<Tipo>Animation

Onde <Type> é o tipo de valor que a classe anima.

O WPF fornece as seguintes classes de animação De/Para/Por.

Valores-alvo

Uma animação De/Para/Por cria uma transição entre dois valores de destino. É comum especificar um valor inicial (defini-lo usando a propriedade From) e um valor final (defini-lo usando a propriedade To). No entanto, pode-se também 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 ausente 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 quiser 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 transitará desse valor para o valor base da propriedade animada.

• Valor final

  Para especificar um valor final de uma animação, use sua propriedade To. Se você usar a propriedade To por si só, a animação obterá seu valor inicial da propriedade que está sendo animada ou da saída de outra animação aplicada à mesma propriedade. Você pode usar a propriedade To juntamente com a propriedade From para especificar explicitamente valores iniciais e finais para a animação.

• valor de deslocamento

  A propriedade By permite-lhe definir um desvio em vez de um valor inicial ou final explícito para a animação. A propriedade By de uma animação especifica o quanto a animação altera um valor ao longo de sua duração. Você pode usar a propriedade By sozinha ou com a propriedade From. Se você especificar apenas a propriedade By, a animação adicionará o valor de deslocamento ao valor base da propriedade ou à saída de outra animação.

Usando "De/Para/Por" Valores

As seções a seguir descrevem como usar as propriedades From, Toe By juntas ou separadamente.

Cada um dos exemplos nesta seção usa um DoubleAnimation, que é um tipo de animação De/Para/Por, para animar a propriedade Width de um Rectangle que tem 10 pixels independentes de dispositivo de altura e 100 pixels de largura independentes de dispositivo.

Embora cada exemplo use um DoubleAnimation, as propriedades De, Para e Por de todas as animações De/Para/Por se comportam de forma idêntica. Embora cada um desses exemplos use um Storyboard, você pode usar animações De/Para/Por de outras maneiras. Para obter mais informações, consulte a Visão geral das técnicas de animação de propriedade .

De/Para

Quando você define os valores From e To juntos, a animação progride do valor especificado pela propriedade From para o valor especificado pela propriedade To.

O exemplo a seguir define a propriedade From do DoubleAnimation como 50 e sua propriedade To como 300. Como resultado, a Width do Rectangle é animada entre 50 e 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.

' 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)

Para

Quando você define apenas a propriedade To, a animação progride do valor base da propriedade animada, ou da saída de uma animação de composição que foi aplicada anteriormente à mesma propriedade, para o valor especificado pela propriedade To.

("Composição de animação" refere-se a uma animação Active ou Filling que anteriormente se aplicava à mesma propriedade e que ainda está em vigor quando a animação atual é aplicada usando o comportamento de transferência de Compose.)

O exemplo a seguir define apenas a propriedade To do DoubleAnimation como 300. Como nenhum valor inicial foi especificado, o DoubleAnimation usa o valor base (100) da propriedade Width como seu valor inicial. O Width do Rectangle é animado de 100 ao valor alvo da animação, que é 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.

' 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)

Por

Quando você define apenas a propriedade By de uma animação, a animação progride do valor base da propriedade que está sendo animada ou da saída de uma animação de composição para a soma desse valor e do valor especificado pela propriedade By.

O exemplo a seguir define apenas a propriedade By do DoubleAnimation como 300. Como o exemplo não especifica um valor inicial, o DoubleAnimation usa o valor base da propriedade Width, 100, como seu valor inicial. O valor final é determinado adicionando o valor By da animação, 300, ao seu valor inicial, 100: 400. Como resultado, o Width do 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(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.

' 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)

De/Por

Quando você define as propriedades From e By de uma animação, a animação progride do valor especificado pela propriedade From para o valor especificado pela soma das propriedades From e By.

O exemplo a seguir define a propriedade From do DoubleAnimation como 50 e sua propriedade By como 300. O valor final é determinado adicionando o valor By da animação, 300, ao seu valor inicial, 50: 350. Como resultado, o Width do Rectangle foi animado dos 50 aos 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.

' 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)

De

Quando você especifica apenas o valor From de uma animação, a animação progride do valor especificado pela propriedade From para o valor base da propriedade que está sendo animada ou para a saída de uma animação de composição.

O exemplo a seguir define apenas a propriedade From do DoubleAnimation como 50. Como nenhum valor final foi especificado, o DoubleAnimation usa o valor base da propriedade Width, 100, como seu valor final. A Width do Rectangle é animada de 50 ao valor base da propriedade Width, que é 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.

' 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)

Para/Por

Se você definir 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 não são o único tipo de animação que o WPF oferece; ele também disponibiliza animações de quadro-chave e animações de caminho.

• Uma animação de quadro-chave é animada ao longo de qualquer número de valores de destino, descritos usando quadros-chave. Para obter mais informações, consulte a Key-Frame Visão geral das animações.

• Uma animação de caminho gera valores de saída a partir de um PathGeometry. Para obter mais informações, consulte a Visão Geral das Animações de Caminho .

O WPF também permite que você crie seus próprios tipos de animação personalizados. Para obter mais informações, consulte a Visão Geral das Animações Personalizadas.

Ver também

• Timeline
• Storyboard
• Visão geral da animação
• Visão geral do Storyboards
• Visão geral das animações Key-Frame
• Visão geral das animações de caminho
• Visão geral de animações personalizadas
• Exemplo de Valores de Destino de Animação De, Para e Por