Visão geral da animaçãoAnimation Overview

Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) fornece um conjunto poderoso de recursos gráficos e de layout que permitem criar interfaces de usuário atraentes e documentos atraentes.Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) provides a powerful set of graphics and layout features that enable you to create attractive user interfaces and appealing documents. A animação pode tornar uma interface do usuário ainda mais espetacular e utilizável.Animation can make an attractive user interface even more spectacular and usable. Apenas animando uma cor de plano de fundo ou aplicando uma Transformanimada, você pode criar transições de tela dramáticas ou fornecer indicações visuais úteis.By just animating a background color or applying an animated Transform, you can create dramatic screen transitions or provide helpful visual cues.

Esta visão geral fornece uma introdução à animação de WPFWPF e ao sistema de tempo.This overview provides an introduction to the WPFWPF animation and timing system. Ele se concentra na animação de objetos WPFWPF usando storyboards.It focuses on the animation of WPFWPF objects by using storyboards.

Introdução a animaçõesIntroducing Animations

A animação é uma ilusão criada passando-se rapidamente por uma série de imagens, cada uma ligeiramente diferente da anterior.Animation is an illusion that is created by quickly cycling through a series of images, each slightly different from the last. O cérebro vê a sequência de imagens como uma única cena em mudança.The brain perceives the group of images as a single changing scene. Em filmes, essa ilusão é criada usando câmeras que gravam várias fotografias, ou quadros, a cada segundo.In film, this illusion is created by using cameras that record many photographs, or frames, each second. Quando os quadros são executados por um projetor, o público-alvo vê um filme animado.When the frames are played back by a projector, the audience sees a moving picture.

A animação em um computador é semelhante.Animation on a computer is similar. Por exemplo, um programa que cria um desenho de um retângulo que desaparece pode funcionar conforme descrito a seguir.For example, a program that makes a drawing of a rectangle fade out of view might work as follows.

  • O programa cria um temporizador.The program creates a timer.

  • O programa verifica o temporizador em intervalos definidos para ver quanto tempo transcorreu.The program checks the timer at set intervals to see how much time has elapsed.

  • Cada vez que o programa verifica o temporizador, ele calcula o valor de opacidade atual para o retângulo com base em quanto tempo transcorreu.Each time the program checks the timer, it computes the current opacity value for the rectangle based on how much time has elapsed.

  • O programa então atualiza o retângulo com o novo valor e o redesenha.The program then updates the rectangle with the new value and redraws it.

Antes da WPFWPF, os desenvolvedores do Microsoft Windows tinham que criar e gerenciar seus próprios sistemas de tempo ou usar bibliotecas personalizadas especiais.Prior to WPFWPF, Microsoft Windows developers had to create and manage their own timing systems or use special custom libraries. a WPFWPF inclui um sistema de tempo eficiente que é exposto por meio de código gerenciado e XAML (linguagem XAML)Extensible Application Markup Language (XAML) e que está profundamente integrado à estrutura de WPFWPF.WPFWPF includes an efficient timing system that is exposed through managed code and XAML (linguagem XAML)Extensible Application Markup Language (XAML) and that is deeply integrated into the WPFWPF framework. A animação do WPFWPF facilita a animação de controles e outros objetos gráficos.WPFWPF animation makes it easy to animate controls and other graphical objects.

O WPFWPF realiza todo o trabalho nos bastidores para gerenciar um sistema de temporização e redesenhar a tela de modo eficiente.WPFWPF handles all the behind-the-scenes work of managing a timing system and redrawing the screen efficiently. Ele fornece classes de temporização que permitem que você se concentre nos efeitos que deseja criar, em vez de precisar concentrar-se na mecânica envolvida para atingir tais efeitos.It provides timing classes that enable you to focus on the effects you want to create, instead of the mechanics of achieving those effects. O WPFWPF também torna fácil criar sua própria animação expondo classes de animação base das quais suas classes podem herdar, para assim produzir animações personalizadas.WPFWPF also makes it easy to create your own animations by exposing animation base classes from which your classes can inherit, to produce customized animations. Essas animações personalizadas obtêm muitos dos benefícios de desempenho das classes de animação padrão.These custom animations gain many of the performance benefits of the standard animation classes.

Sistema de Animação de Propriedades do WPFWPF Property Animation System

Se você entender alguns conceitos importantes sobre o sistema de tempo, WPFWPF animações podem ser mais fáceis de usar.If you understand a few important concepts about the timing system, WPFWPF animations can be easier to use. O mais importante é que, em WPFWPF, você anima objetos aplicando animação às suas propriedades individuais.Most important is that, in WPFWPF, you animate objects by applying animation to their individual properties. Por exemplo, para que um elemento de estrutura cresça, você anima suas Width e Height Propriedades.For example, to make a framework element grow, you animate its Width and Height properties. Para fazer um objeto desaparecer da exibição, você anima sua propriedade Opacity.To make an object fade from view, you animate its Opacity property.

Para uma propriedade ter capacidade de animação, ela deve atender aos três requisitos a seguir:For a property to have animation capabilities, it must meet the following three requirements:

WPFWPF contém muitos objetos que têm IAnimatable Propriedades.contains many objects that have IAnimatable properties. Controles como Button e TabControl, além de Panel e Shape objetos herdam de DependencyObject.Controls such as Button and TabControl, and also Panel and Shape objects inherit from DependencyObject. A maioria de suas propriedades são propriedades de dependência.Most of their properties are dependency properties.

Você pode usar animações em quase qualquer lugar, o que inclui em estilos e modelos de controle.You can use animations almost anywhere, which includes in styles and control templates. Animações não precisam ser visuais; você pode animar objetos que não fazem parte da interface do usuário se eles atendem aos critérios descritos nesta seção.Animations do not have to be visual; you can animate objects that are not part of the user interface if they meet the criteria that are described in this section.

Exemplo: fazer com que um elemento apareça e desapareça da exibiçãoExample: Make an Element Fade In and Out of View

Este exemplo mostra como usar uma animação de WPFWPF para animar o valor de uma propriedade de dependência.This example shows how to use a WPFWPF animation to animate the value of a dependency property. Ele usa um DoubleAnimation, que é um tipo de animação que gera valores de Double, para animar a propriedade Opacity de um Rectangle.It uses a DoubleAnimation, which is a type of animation that generates Double values, to animate the Opacity property of a Rectangle. Como resultado, o Rectangle esmaece e sai da exibição.As a result, the Rectangle fades in and out of view.

A primeira parte do exemplo cria um elemento Rectangle.The first part of the example creates a Rectangle element. As etapas a seguir mostram como criar uma animação e aplicá-la à propriedade Opacity do retângulo.The steps that follow show how to create an animation and apply it to the rectangle's Opacity property.

O seguinte mostra como criar um elemento Rectangle em um StackPanel em XAML.The following shows how to create a Rectangle element in a StackPanel in XAML.

<StackPanel Margin="10">
    <Rectangle
        Name="MyRectangle"
        Width="100" 
        Height="100"
        Fill="Blue">
    </Rectangle>
</StackPanel>

O seguinte mostra como criar um elemento Rectangle em um StackPanel no código.The following shows how to create a Rectangle element in a StackPanel in code.

var myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);

var myRectangle = new Rectangle();
myRectangle.Name = "myRectangle";
this.RegisterName(myRectangle.Name, myRectangle);
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = Brushes.Blue;
myPanel.Children.Add(myRectangle);
this.Content = myPanel;
Dim myPanel As New StackPanel()
myPanel.Margin = New Thickness(10)

Dim myRectangle As New Rectangle()
myRectangle.Name = "myRectangle"
Me.RegisterName(myRectangle.Name, myRectangle)
myRectangle.Width = 100
myRectangle.Height = 100
myRectangle.Fill = Brushes.Blue

myPanel.Children.Add(myRectangle)
Me.Content = myPanel

Parte 1: criar uma DoubleAnimationPart 1: Create a DoubleAnimation

Uma maneira de fazer com que um elemento fique esmaecido e fora do modo de exibição é animar sua propriedade Opacity.One way to make an element fade in and out of view is to animate its Opacity property. Como a propriedade Opacity é do tipo Double, você precisa de uma animação que produza valores duplos.Because the Opacity property is of type Double, you need an animation that produces double values. Uma DoubleAnimation é uma dessas animações.A DoubleAnimation is one such animation. Uma DoubleAnimation cria uma transição entre dois valores duplos.A DoubleAnimation creates a transition between two double values. Para especificar seu valor inicial, defina sua propriedade From.To specify its starting value, you set its From property. Para especificar seu valor final, defina sua propriedade To.To specify its ending value, you set its To property.

  1. Um valor de opacidade de 1.0 torna o objeto completamente opaco e um valor de opacidade de 0.0 o torna totalmente invisível.An opacity value of 1.0 makes the object completely opaque, and an opacity value of 0.0 makes it completely invisible. Para fazer a transição de animação de 1.0 para 0.0 defina sua propriedade From como 1.0 e sua propriedade To como 0.0.To make the animation transition from 1.0 to 0.0 you set its From property to 1.0 and its To property to 0.0. O seguinte mostra como criar um DoubleAnimation em XAML.The following shows how to create a DoubleAnimation in XAML.

    <DoubleAnimation From="1.0" To="0.0" />
    

    O seguinte mostra como criar um DoubleAnimation no código.The following shows how to create a DoubleAnimation in code.

    var myDoubleAnimation = new DoubleAnimation();
    myDoubleAnimation.From = 1.0;
    myDoubleAnimation.To = 0.0;
    
    Dim myDoubleAnimation As New DoubleAnimation()
    myDoubleAnimation.From = 1.0
    myDoubleAnimation.To = 0.0
    
  2. Em seguida, você deve especificar um Duration.Next, you must specify a Duration. A Duration de uma animação especifica quanto tempo leva para ir do seu valor inicial para seu valor de destino.The Duration of an animation specifies how long it takes to go from its starting value to its destination value. O seguinte mostra como definir a Duration para cinco segundos em XAML.The following shows how to set the Duration to five seconds in XAML.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />
    

    Veja a seguir como definir o Duration como cinco segundos no código.The following shows how to set the Duration to five seconds in code.

    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
    
    myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
    
  3. O código anterior mostrou uma animação que muda de 1.0 para 0.0, o que faz com que o elemento de destino fique esmaecido de completamente opaco para totalmente invisível.The previous code showed an animation that transitions from 1.0 to 0.0, which causes the target element to fade from completely opaque to completely invisible. Para fazer com que o elemento volte a ser exibido depois que ele desaparecer, defina a propriedade AutoReverse da animação como true.To make the element fade back into view after it vanishes, set the AutoReverse property of the animation to true. Para fazer a animação repetir indefinidamente, defina sua propriedade RepeatBehavior como Forever.To make the animation repeat indefinitely, set its RepeatBehavior property to Forever. O seguinte mostra como definir as propriedades AutoReverse e RepeatBehavior em XAML.The following shows how to set the AutoReverse and RepeatBehavior properties in XAML.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>
    

    O seguinte mostra como definir as propriedades AutoReverse e RepeatBehavior no código.The following shows how to set the AutoReverse and RepeatBehavior properties in code.

    myDoubleAnimation.AutoReverse = true;
    myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
    
    myDoubleAnimation.AutoReverse = True
    myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever
    

Parte 2: criar um storyboardPart 2: Create a Storyboard

Para aplicar uma animação a um objeto, você cria um Storyboard e usa as propriedades TargetName e TargetProperty anexadas para especificar o objeto e a propriedade a serem animados.To apply an animation to an object, you create a Storyboard and use the TargetName and TargetProperty attached properties to specify the object and property to animate.

  1. Crie o Storyboard e adicione a animação como seu filho.Create the Storyboard and add the animation as its child. O seguinte mostra como criar o Storyboard em XAML.The following shows how to create the Storyboard in XAML.

    <Storyboard>
        <DoubleAnimation
            From="1.0" To="0.0" Duration="0:0:1" 
            AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
    

    Para criar o Storyboard no código, declare uma variável Storyboard no nível de classe.To create the Storyboard in code, declare a Storyboard variable at the class level.

    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;
    
    Class MainWindow
    
        Private myStoryboard As Storyboard
    

    Em seguida, inicialize o Storyboard e adicione a animação como seu filho.Then initialize the Storyboard and add the animation as its child.

    myStoryboard = new Storyboard();
    myStoryboard.Children.Add(myDoubleAnimation);
    
    myStoryboard = New Storyboard()
    myStoryboard.Children.Add(myDoubleAnimation)
    
  2. O Storyboard precisa saber onde aplicar a animação.The Storyboard has to know where to apply the animation. Use a propriedade Storyboard.TargetName anexada para especificar o objeto a ser animado.Use the Storyboard.TargetName attached property to specify the object to animate. O seguinte mostra como definir o nome de destino do DoubleAnimation como MyRectangle em XAML.The following shows how to set the target name of the DoubleAnimation to MyRectangle in XAML.

    <Storyboard>
        <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            From="1.0" To="0.0" Duration="0:0:1" 
            AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
    

    O seguinte mostra como definir o nome de destino do DoubleAnimation como MyRectangle no código.The following shows how to set the target name of the DoubleAnimation to MyRectangle in code.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
    
    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
    
  3. Use a propriedade TargetProperty anexada para especificar a propriedade a ser animada.Use the TargetProperty attached property to specify the property to animate. O seguinte mostra como a animação é configurada para direcionar a propriedade Opacity do Rectangle em XAML.The following shows how the animation is configured to target the Opacity property of the Rectangle in XAML.

    <Storyboard>
        <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
    

    O seguinte mostra como a animação é configurada para direcionar a propriedade Opacity do Rectangle no código.The following shows how the animation is configured to target the Opacity property of the Rectangle in code.

    Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));
    
    Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))
    

Para obter mais informações sobre a sintaxe de TargetProperty e exemplos adicionais, consulte a visão geral de storyboards.For more information about TargetProperty syntax and for additional examples, see the Storyboards Overview.

Parte 3 (XAML): associar o storyboard com um gatilhoPart 3 (XAML): Associate the Storyboard with a Trigger

A maneira mais fácil de aplicar e iniciar uma Storyboard no XAMLXAML é usar um gatilho de evento.The easiest way to apply and start a Storyboard in XAMLXAML is to use an event trigger. Esta seção mostra como associar o Storyboard a um gatilho em XAML.This section shows how to associate the Storyboard with a trigger in XAML.

  1. Crie um objeto BeginStoryboard e associe o storyboard a ele.Create a BeginStoryboard object and associate your storyboard with it. Um BeginStoryboard é um tipo de TriggerAction que se aplica e inicia uma Storyboard.A BeginStoryboard is a type of TriggerAction that applies and starts a Storyboard.

    <BeginStoryboard>
      <Storyboard>
        <DoubleAnimation
          Storyboard.TargetName="MyRectangle" 
          Storyboard.TargetProperty="Opacity"
          From="1.0" To="0.0" Duration="0:0:5" 
          AutoReverse="True" RepeatBehavior="Forever" />
      </Storyboard>
    </BeginStoryboard>
    
  2. Crie um EventTrigger e adicione o BeginStoryboard à sua coleção de Actions.Create an EventTrigger and add the BeginStoryboard to its Actions collection. Defina a propriedade RoutedEvent do EventTrigger para o evento roteado que você deseja iniciar o Storyboard.Set the RoutedEvent property of the EventTrigger to the routed event that you want to start the Storyboard. (Para obter mais informações sobre eventos roteados, consulte a visão geral de eventos roteados.)(For more information about routed events, see the Routed Events Overview.)

    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
    
  3. Adicione o EventTrigger à coleção de Triggers do retângulo.Add the EventTrigger to the Triggers collection of the Rectangle.

    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
      <Rectangle.Triggers>
        <!-- Animates the rectangle's opacity. -->
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="MyRectangle" 
                Storyboard.TargetProperty="Opacity"
                From="1.0" To="0.0" Duration="0:0:5" 
                AutoReverse="True" RepeatBehavior="Forever" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
    

Parte 3 (código): associar o storyboard com um manipulador de eventosPart 3 (Code): Associate the Storyboard with an Event Handler

A maneira mais fácil de aplicar e iniciar um Storyboard no código é usar um manipulador de eventos.The easiest way to apply and start a Storyboard in code is to use an event handler. Esta seção mostra como associar o Storyboard a um manipulador de eventos no código.This section shows how to associate the Storyboard with an event handler in code.

  1. Registre-se para o evento Loaded do retângulo.Register for the Loaded event of the rectangle.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
    
    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded
    
  2. Declare o manipulador de eventos.Declare the event handler. No manipulador de eventos, use o método Begin para aplicar o storyboard.In the event handler, use the Begin method to apply the storyboard.

    private void myRectangleLoaded(object sender, RoutedEventArgs e)
    {
        myStoryboard.Begin(this);
    }
    
    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
        myStoryboard.Begin(Me)
    End Sub
    

Exemplo completoComplete Example

O seguinte mostra como criar um retângulo que esmaece e sai da exibição em XAML.The following shows how to create a rectangle that fades in and out of view in XAML.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel Margin="10">
            <Rectangle
                Name="MyRectangle"
                Width="100" 
                Height="100"
                Fill="Blue">
                <Rectangle.Triggers>
                    <!-- Animates the rectangle's opacity. -->
                    <EventTrigger RoutedEvent="Rectangle.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="MyRectangle" 
                                    Storyboard.TargetProperty="Opacity"
                                    From="1.0" To="0.0" Duration="0:0:5" 
                                    AutoReverse="True" RepeatBehavior="Forever" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Rectangle.Triggers>
            </Rectangle>
        </StackPanel>
    </Grid>
</Window>

O exemplo a seguir mostra como criar um retângulo que aparece e desaparece de exibição no código.The following shows how to create a rectangle that fades in and out of view in code.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;

        public MainWindow()
        {
            InitializeComponent();

            StackPanel myPanel = new StackPanel();
            myPanel.Margin = new Thickness(10);

            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 1.0;
            myDoubleAnimation.To = 0.0;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

            // Use the Loaded event to start the Storyboard.
            myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
            myPanel.Children.Add(myRectangle);
            this.Content = myPanel;
        }

        private void myRectangleLoaded(object sender, RoutedEventArgs e)
        {
            myStoryboard.Begin(this);
        }
    }
}
Imports System.Windows.Media.Animation

Class MainWindow

    Private myStoryboard As Storyboard

    Public Sub New()
        InitializeComponent()

        Dim myPanel As New StackPanel()
        myPanel.Margin = New Thickness(10)

        Dim myRectangle As New Rectangle()
        myRectangle.Name = "myRectangle"
        Me.RegisterName(myRectangle.Name, myRectangle)
        myRectangle.Width = 100
        myRectangle.Height = 100
        myRectangle.Fill = Brushes.Blue

        Dim myDoubleAnimation As New DoubleAnimation()
        myDoubleAnimation.From = 1.0
        myDoubleAnimation.To = 0.0
        myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
        myDoubleAnimation.AutoReverse = True
        myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

        myStoryboard = New Storyboard()
        myStoryboard.Children.Add(myDoubleAnimation)
        Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
        Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

        ' Use the Loaded event to start the Storyboard.
        AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

        myPanel.Children.Add(myRectangle)
        Me.Content = myPanel
    End Sub

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
        myStoryboard.Begin(Me)
    End Sub

End Class

Tipos de animaçãoAnimation Types

Já que as animações geram valores de propriedade, existem diferentes tipos de animação para diferentes tipos de propriedades.Because animations generate property values, different animation types exist for different property types. Para animar uma propriedade que usa um Double, como a propriedade Width de um elemento, use uma animação que produza valores de Double.To animate a property that takes a Double, such as the Width property of an element, use an animation that produces Double values. Para animar uma propriedade que usa um Point, use uma animação que produz Point valores, e assim por diante.To animate a property that takes a Point, use an animation that produces Point values, and so on. Devido ao número de diferentes tipos de propriedade, há várias classes de animação no namespace System.Windows.Media.Animation.Because of the number of different property types, there are several animation classes in the System.Windows.Media.Animation namespace. Felizmente, elas seguem uma convenção de nomenclatura estrita que facilita a diferenciação entre elas:Fortunately, they follow a strict naming convention that makes it easy to differentiate between them:

  • <Type>Animation<Type>Animation

    Conhecida como "de/para/por" ou animação "básica", ela anima entre um valor inicial e outro de destino, ou então pela adição de um valor de deslocamento ao seu valor inicial.Known as a "From/To/By" or "basic" animation, these animate between a starting and destination value, or by adding an offset value to its starting value.

    • Para especificar um valor inicial, defina a propriedade De da animação.To specify a starting value, set the From property of the animation.

    • Para especificar um valor final, defina a propriedade Para da animação.To specify an ending value, set the To property of the animation.

    • Para especificar um valor de deslocamento, defina a propriedade Por da animação.To specify an offset value, set the By property of the animation.

    Os exemplos nesta visão geral usam essas animações porque elas são mais simples de usar.The examples in this overview use these animations, because they are the simplest to use. As animações de/para/por são descritas em detalhes na visão geral das animações de/para/por.From/To/By animations are described in detail in the From/To/By Animations Overview.

  • <Type>AnimationUsingKeyFrames<Type>AnimationUsingKeyFrames

    Animações de quadro chave são mais avançadas que animações de/para/por porque você pode especificar qualquer número de valores de destino e até mesmo controlar seu método de interpolação.Key frame animations are more powerful than From/To/By animations because you can specify any number of target values and even control their interpolation method. Alguns tipos só podem ser animados com animações de quadro chave.Some types can only be animated with key frame animations. As animações de quadro-chave são descritas em detalhes na visão geral das animações de quadro chave.Key frame animations are described in detail in the Key-Frame Animations Overview.

  • <Type>AnimationUsingPath<Type>AnimationUsingPath

    Animações de caminho permitem que você use um caminho geométrico para produzir valores animados.Path animations enable you to use a geometric path in order to produce animated values.

  • <Type>AnimationBase<Type>AnimationBase

    Classe abstrata que, quando você implementa, anima um valor <Type>.Abstract class that, when you implement it, animates a <Type> value. Esta classe serve como a classe base para as classes <Type>Animation e <Type>AnimationUsingKeyFrames.This class serves as the base class for <Type>Animation and <Type>AnimationUsingKeyFrames classes. Você só precisará lidar diretamente com essas classes se quiser criar suas próprias animações personalizadas.You have to deal directly with these classes only if you want to create your own custom animations. Caso contrário, use uma <Type>Animation ou KeyFrame<Type>Animation.Otherwise, use a <Type>Animation or KeyFrame<Type>Animation.

Na maioria dos casos, você desejará usar o tipode <> classes de animação, como DoubleAnimation e ColorAnimation.In most cases, you will want to use the <Type>Animation classes, such as DoubleAnimation and ColorAnimation.

A tabela a seguir mostra vários tipos de animação comuns e algumas propriedades com as qual eles são usados.The following table shows several common animation types and some properties with which they are used.

Tipo de propriedadeProperty type Animação básica (De/Para/Por) correspondenteCorresponding basic (From/To/By) animation Animação de quadro chave correspondenteCorresponding key frame animation Animação de caminho correspondenteCorresponding Path Animation Exemplo de usoUsage example
Color ColorAnimation ColorAnimationUsingKeyFrames {1>Nenhum<1}None Anime a Color de um SolidColorBrush ou um GradientStop.Animate the Color of a SolidColorBrush or a GradientStop.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Anime a Width de um DockPanel ou a Height de um Button.Animate the Width of a DockPanel or the Height of a Button.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Anime a posição de Center de um EllipseGeometry.Animate the Center position of an EllipseGeometry.
String {1>Nenhum<1}None StringAnimationUsingKeyFrames {1>Nenhum<1}None Anime a Text de um TextBlock ou a Content de um Button.Animate the Text of a TextBlock or the Content of a Button.

As animações são linhas do tempoAnimations Are Timelines

Todos os tipos de animação herdam da classe Timeline; Portanto, todas as animações são tipos especializados de linhas do tempo.All the animation types inherit from the Timeline class; therefore, all animations are specialized types of timelines. Um Timeline define um segmento de tempo.A Timeline defines a segment of time. Você pode especificar os comportamentos de tempo de uma linha do tempo: sua Duration, quantas vezes ela é repetida e até mesmo quão rápido é o andamento.You can specify the timing behaviors of a timeline: its Duration, how many times it is repeated, and even how fast time progresses for it.

Como uma animação é uma Timeline, ela também representa um segmento de tempo.Because an animation is a Timeline, it also represents a segment of time. Uma animação também calcula valores de saída conforme eles avançam por seu segmento especificado de tempo (ou Duration).An animation also calculates output values as it progresses through its specified segment of time (or Duration). Conforme a animação progride ou é "reproduzida", ela atualiza a propriedade com a qual está associada.As the animation progresses, or "plays," it updates the property that it is associated with.

Três propriedades de tempo usadas com frequência são Duration, AutoReversee RepeatBehavior.Three frequently used timing properties are Duration, AutoReverse, and RepeatBehavior.

A propriedade DurationThe Duration Property

Conforme mencionado anteriormente, uma linha do tempo representa um segmento de tempo.As previously mentioned, a timeline represents a segment of time. O comprimento desse segmento é determinado pelo Duration da linha do tempo, que geralmente é especificado usando um valor de TimeSpan.The length of that segment is determined by the Duration of the timeline, which is usually specified by using a TimeSpan value. Quando uma linha do tempo atinge o final de sua duração, ela completou uma iteração.When a timeline reaches the end of its duration, it has completed an iteration.

Uma animação usa sua propriedade Duration para determinar seu valor atual.An animation uses its Duration property to determine its current value. Se você não especificar um valor Duration para uma animação, ele usará 1 segundo, que é o padrão.If you do not specify a Duration value for an animation, it uses 1 second, which is the default.

A sintaxe a seguir mostra uma versão simplificada da sintaxe do atributo XAML (linguagem XAML)Extensible Application Markup Language (XAML) para a propriedade Duration.The following syntax shows a simplified version of the XAML (linguagem XAML)Extensible Application Markup Language (XAML) attribute syntax for the Duration property.

horas : minutos : segundoshours : minutes : seconds

A tabela a seguir mostra várias configurações de Duration e seus valores resultantes.The following table shows several Duration settings and their resulting values.

ConfiguraçãoSetting Valor resultanteResulting value
0:0:5.50:0:5.5 5,5 segundos.5.5 seconds.
0:30:5.50:30:5.5 30 minutos e 5,5 segundos.30 minutes and 5.5 seconds.
1:30:5.51:30:5.5 1 hora, 30 minutos e 5,5 segundos.1 hour, 30 minutes, and 5.5 seconds.

Uma maneira de especificar um Duration no código é usar o método FromSeconds para criar uma TimeSpane, em seguida, declarar uma nova estrutura de Duration usando essa TimeSpan.One way to specify a Duration in code is to use the FromSeconds method to create a TimeSpan, then declare a new Duration structure using that TimeSpan.

Para obter mais informações sobre valores de Duration e a sintaxe de XAML (linguagem XAML)Extensible Application Markup Language (XAML) completa, consulte a estrutura de Duration.For more information about Duration values and the complete XAML (linguagem XAML)Extensible Application Markup Language (XAML) syntax, see the Duration structure.

AutoReverseAutoReverse

A propriedade AutoReverse especifica se uma linha do tempo é reproduzida após atingir o final de seu Duration.The AutoReverse property specifies whether a timeline plays backward after it reaches the end of its Duration. Se você definir essa propriedade de animação como true, uma animação será invertida depois que atingir o final de seu Duration, jogando de seu valor final de volta ao seu valor inicial.If you set this animation property to true, an animation reverses after it reaches the end of its Duration, playing from its ending value back to its starting value. Por padrão, essa propriedade é false.By default, this property is false.

RepeatBehaviorRepeatBehavior

A propriedade RepeatBehavior especifica quantas vezes uma linha de tempo é reproduzida.The RepeatBehavior property specifies how many times a timeline plays. Por padrão, as linhas do tempo têm uma contagem de iteração de 1.0, o que significa que elas são executadas uma vez e não se repetem.By default, timelines have an iteration count of 1.0, which means they play one time and do not repeat at all.

Para obter mais informações sobre essas propriedades e outras, consulte a visão geral de comportamentos de tempo.For more information about these properties and others, see the Timing Behaviors Overview.

Aplicar uma animação a uma propriedadeApplying an Animation to a Property

As seções anteriores descrevem os diferentes tipos de animações e suas propriedades de temporização.The previous sections describe the different types of animations and their timing properties. Esta seção mostra como aplicar a animação à propriedade que você deseja animar.This section shows how to apply the animation to the property that you want to animate. Storyboard objetos fornecem uma maneira de aplicar animações a propriedades.Storyboard objects provide one way to apply animations to properties. Uma Storyboard é uma linha do tempo de contêiner que fornece informações de destino para as animações que ele contém.A Storyboard is a container timeline that provides targeting information for the animations it contains.

Usar objetos e propriedades como destinoTargeting Objects and Properties

A classe Storyboard fornece as propriedades TargetName e TargetProperty anexadas.The Storyboard class provides the TargetName and TargetProperty attached properties. Ao definir essas propriedades em uma animação, você diz à animação o que animar.By setting these properties on an animation, you tell the animation what to animate. No entanto, antes de uma animação poder usar um objeto como destino, normalmente esse objeto deverá receber um nome.However, before an animation can target an object, the object must usually be given a name.

Atribuir um nome a um FrameworkElement difere da atribuição de um nome a um objeto Freezable.Assigning a name to a FrameworkElement differs from assigning a name to a Freezable object. A maioria dos controles e painéis são elementos framework; no entanto, a maioria dos objetos puramente gráficos como pincéis, transformações e geometrias são objetos congeláveis.Most controls and panels are framework elements; however, most purely graphical objects, such as brushes, transforms, and geometries, are freezable objects. Se você não tiver certeza se um tipo é um FrameworkElement ou um Freezable, consulte a seção hierarquia de herança de sua documentação de referência.If you are not sure whether a type is a FrameworkElement or a Freezable, refer to the Inheritance Hierarchy section of its reference documentation.

  • Para fazer uma FrameworkElement um destino de animação, você dá um nome definindo sua propriedade Name.To make a FrameworkElement an animation target, you give it a name by setting its Name property. No código, você também deve usar o método RegisterName para registrar o nome do elemento com a página à qual ele pertence.In code, you must also use the RegisterName method to register the element name with the page to which it belongs.

  • Para tornar um objeto de Freezable um destino de animação no XAMLXAML, use a diretiva x:Name para atribuir um nome a ele.To make a Freezable object an animation target in XAMLXAML, you use the x:Name Directive to assign it a name. No código, basta usar o método RegisterName para registrar o objeto com a página à qual ele pertence.In code, you just use the RegisterName method to register the object with the page to which it belongs.

As seções a seguir fornecem um exemplo de nomear um elemento em XAMLXAML e código.The sections that follow provide an example of naming an element in XAMLXAML and code. Para obter informações mais detalhadas sobre nomenclatura e direcionamento, consulte a visão geral dos storyboards.For more detailed information about naming and targeting, see the Storyboards Overview.

Aplicar e iniciar StoryboardsApplying and Starting Storyboards

Para iniciar um storyboard em XAMLXAML, você o associa a um EventTrigger.To start a storyboard in XAMLXAML, you associate it with an EventTrigger. Um EventTrigger é um objeto que descreve as ações a serem executadas quando um evento especificado ocorrer.An EventTrigger is an object that describes what actions to take when a specified event occurs. Uma dessas ações pode ser uma ação BeginStoryboard, que você usa para iniciar o storyboard.One of those actions can be a BeginStoryboard action, which you use to start your storyboard. Gatilhos de evento são semelhantes ao conceito de manipuladores de eventos porque eles permitem que você especifique como o aplicativo responde a um evento específico.Event triggers are similar in concept to event handlers because they enable you to specify how your application responds to a particular event. Ao contrário dos manipuladores de eventos, os gatilhos de evento podem ser totalmente descritos em XAMLXAML; nenhum outro código é necessário.Unlike event handlers, event triggers can be fully described in XAMLXAML; no other code is required.

Para iniciar um Storyboard no código, você pode usar um EventTrigger ou usar o método Begin da classe Storyboard.To start a Storyboard in code, you can use an EventTrigger or use the Begin method of the Storyboard class.

Controlar interativamente um storyboardInteractively Control a Storyboard

O exemplo anterior mostrou como iniciar um Storyboard quando ocorre um evento.The previous example showed how to start a Storyboard when an event occurs. Você também pode controlar interativamente um Storyboard depois que ele é iniciado: você pode pausar, retomar, parar, avançar até seu período de preenchimento, buscar e remover o Storyboard.You can also interactively control a Storyboard after it starts: you can pause, resume, stop, advance it to its fill period, seek, and remove the Storyboard. Para obter mais informações e um exemplo que mostra como controlar interativamente um Storyboard, consulte a visão geral de storyboards.For more information and an example that shows how to interactively control a Storyboard, see the Storyboards Overview.

O que acontece após o término da animação?What Happens After an Animation Ends?

A propriedade FillBehavior especifica como uma linha do tempo se comporta quando termina.The FillBehavior property specifies how a timeline behaves when it ends. Por padrão, uma linha do tempo começa Filling quando termina.By default, a timeline starts Filling when it ends. Uma animação Filling mantém seu valor final de saída.An animation that is Filling holds its final output value.

O DoubleAnimation no exemplo anterior não termina porque sua propriedade RepeatBehavior está definida como Forever.The DoubleAnimation in the previous example does not end because its RepeatBehavior property is set to Forever. O exemplo a seguir anima um retângulo usando uma animação similar.The following example animates a rectangle by using a similar animation. Ao contrário do exemplo anterior, as propriedades RepeatBehavior e AutoReverse dessa animação são deixadas com seus valores padrão.Unlike the previous example, the RepeatBehavior and AutoReverse properties of this animation are left at their default values. Portanto, a animação avança de 1 para 0 durante cinco segundos e, em seguida, é interrompida.Therefore, the animation progresses from 1 to 0 over five seconds and then stops.

<Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>

    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0" Duration="0:0:5" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

Como seu FillBehavior não foi alterado de seu valor padrão, que é HoldEnd, a animação mantém seu valor final, 0, quando termina.Because its FillBehavior was not changed from its default value, which is HoldEnd, the animation holds its final value, 0, when it ends. Portanto, a Opacity do retângulo permanece em 0 após o término da animação.Therefore, the Opacity of the rectangle remains at 0 after the animation ends. Se você definir o Opacity do retângulo para outro valor, seu código parece não ter efeito, porque a animação ainda está afetando a propriedade Opacity.If you set the Opacity of the rectangle to another value, your code appears to have no effect, because the animation is still affecting the Opacity property.

Uma maneira de reobter o controle de uma propriedade animada no código é usar o método BeginAnimation e especificar NULL para o parâmetro AnimationTimeline.One way to regain control of an animated property in code is to use the BeginAnimation method and specify null for the AnimationTimeline parameter. Para obter mais informações e um exemplo, consulte definir uma propriedade depois de animá-la com um storyboard.For more information and an example, see Set a Property After Animating It with a Storyboard.

Observe que, embora a definição de um valor de propriedade que tenha uma animação Active ou Filling pareça não ter efeito, o valor da propriedade muda.Note that, although setting a property value that has an Active or Filling animation appears to have no effect, the property value does change. Para obter mais informações, consulte a visão geral da animação e do sistema de tempo.For more information, see the Animation and Timing System Overview.

Associar dados e animar animaçõesData Binding and Animating Animations

A maioria das propriedades de animação pode ser vinculada a dados ou animada; por exemplo, você pode animar a propriedade Duration de um DoubleAnimation.Most animation properties can be data bound or animated; for example, you can animate the Duration property of a DoubleAnimation. No entanto, devido ao modo como o sistema de temporização funciona, animações associadas a dados ou animadas não se comportam como outros objetos animados ou associados a dados.However, because of the way the timing system works, data bound or animated animations do not behave like other data bound or animated objects. Para entender o seu comportamento, é importante entender o que significa aplicar uma animação a uma propriedade.To understand their behavior, it helps to understand what it means to apply an animation to a property.

Consulte o exemplo na seção anterior que mostrou como animar o Opacity de um retângulo.Refer to the example in the previous section that showed how to animate the Opacity of a rectangle. Quando o retângulo no exemplo anterior é carregado, seu gatilho de evento aplica o Storyboard.When the rectangle in the previous example is loaded, its event trigger applies the Storyboard. O sistema de temporização cria uma cópia do Storyboard e sua animação.The timing system creates a copy of the Storyboard and its animation. Essas cópias são congeladas (feitas somente leitura) e os objetos Clock são criados a partir delas.These copies are frozen (made read-only) and Clock objects are created from them. Esses relógios fazem o verdadeiro trabalho de animar as propriedades usadas como destino.These clocks do the actual work of animating the targeted properties.

O sistema de temporização cria um relógio para o DoubleAnimation e o aplica ao objeto e à propriedade especificados pelo TargetName e TargetProperty do DoubleAnimation.The timing system creates a clock for the DoubleAnimation and applies it to the object and property that is specified by the TargetName and TargetProperty of the DoubleAnimation. Nesse caso, o sistema de temporização aplica o relógio à propriedade Opacity do objeto chamado "MyRectangle".In this case, the timing system applies the clock to the Opacity property of the object that is named "MyRectangle."

Embora um relógio também seja criado para a Storyboard, o relógio não é aplicado a nenhuma propriedade.Although a clock is also created for the Storyboard, the clock is not applied to any properties. Sua finalidade é controlar seu relógio filho, o relógio que é criado para o DoubleAnimation.Its purpose is to control its child clock, the clock that is created for the DoubleAnimation.

Para uma animação refletir as alterações de animação ou de associação de dados, seu relógio deve ser regenerado.For an animation to reflect data binding or animation changes, its clock must be regenerated. Os relógios não são regenerados automaticamente para você.Clocks are not regenerated for you automatically. Para fazer uma animação refletir as alterações, reaplique seu storyboard usando um BeginStoryboard ou o método Begin.To make an animation reflect changes, reapply its storyboard by using a BeginStoryboard or the Begin method. Quando você usa qualquer um desses métodos, a animação é reiniciada.When you use either of these methods, the animation restarts. No código, você pode usar o método Seek para deslocar o storyboard de volta para sua posição anterior.In code, you can use the Seek method to shift the storyboard back to its previous position.

Para obter um exemplo de uma animação associada a dados, consulte exemplo de animação da chave spline.For an example of a data bound animation, see Key Spline Animation Sample. Para obter mais informações sobre como funciona a animação e o sistema de temporização, consulte visão geral do sistema de animação e tempo.For more information about how the animation and timing system works, see Animation and Timing System Overview.

Outras maneiras de animarOther Ways to Animate

Os exemplos nesta visão geral mostram como animar pelo uso de storyboards.The examples in this overview show how to animate by using storyboards. Quando você usa código, você pode animar de várias outras maneiras.When you use code, you can animate in several other ways. Para obter mais informações, consulte visão geral das técnicas de animação da propriedade.For more information, see the Property Animation Techniques Overview.

Amostras de animaçãoAnimation Samples

As amostras a seguir podem ajudá-lo a começar a adicionar animações a seus aplicativos.The following samples can help you start adding animation to your applications.

CargoTitle DescriçãoDescription
Visão geral da animação e do sistema de tempoAnimation and Timing System Overview Descreve como o sistema de tempo usa as classes Timeline e Clock, que permitem criar animações.Describes how the timing system uses the Timeline and Clock classes, which allow you to create animations.
Dicas e truques de animaçãoAnimation Tips and Tricks Lista dicas úteis para solucionar problemas com animações, por exemplo, desempenho.Lists helpful tips for solving issues with animations, such as performance.
Visão geral de animações personalizadasCustom Animations Overview Descreve como estender o sistema de animação com quadros chave, classes de animação ou retornos de chamada por quadro.Describes how to extend the animation system with key frames, animation classes, or per-frame callbacks.
Visão geral de animações de/para/porFrom/To/By Animations Overview Descreve como criar uma animação que faz a transição entre dois valores.Describes how to create an animation that transitions between two values.
Visão geral das animações de quadro-chaveKey-Frame Animations Overview Descreve como criar uma animação com vários valores de destino, incluindo a capacidade de controlar o método de interpolação.Describes how to create an animation with multiple target values, including the ability to control the interpolation method.
Funções de easingEasing Functions Explica como aplicar fórmulas matemáticas às suas animações para obter comportamento realista, assim como saltar.Explains how to apply mathematical formulas to your animations to get realistic behavior, such as bouncing.
Visão geral de animações de caminhoPath Animations Overview Descreve como mover ou girar um objeto ao longo de um caminho complexo.Describes how to move or rotate an object along a complex path.
Visão geral das técnicas de animação da propriedadeProperty Animation Techniques Overview Descreve as animações de propriedade usando storyboards, animações locais, relógios e animações por quadro.Describes property animations using storyboards, local animations, clocks, and per-frame animations.
Visão geral de storyboardsStoryboards Overview Descreve como usar storyboards com várias linhas do tempo para criar animações complexas.Describes how to use storyboards with multiple timelines to create complex animations.
Visão geral dos comportamentos de tempoTiming Behaviors Overview Descreve os tipos de Timeline e as propriedades usadas em animações.Describes the Timeline types and properties used in animations.
Visão geral de eventos de tempoTiming Events Overview Descreve os eventos disponíveis nos objetos Timeline e Clock para executar o código em pontos na linha do tempo, como iniciar, pausar, retomar, ignorar ou parar.Describes the events available on the Timeline and Clock objects for executing code at points in the timeline, such as begin, pause, resume, skip, or stop.
Tópicos explicativosHow-to Topics Contém exemplos de código para usar animações e linhas do tempo em seu aplicativo.Contains code examples for using animations and timelines in your application.
Tópicos explicativos de relógiosClocks How-to Topics Contém exemplos de código para usar o objeto Clock em seu aplicativo.Contains code examples for using the Clock object in your application.
Tópicos explicativos sobre quadros-chaveKey-Frame How-to Topics Contém exemplos de código para usar animações de quadro chave em seu aplicativo.Contains code examples for using key-frame animations in your application.
Tópicos explicativos de animação do caminhoPath Animation How-to Topics Contém exemplos de código para usar animações de caminho em seu aplicativo.Contains code examples for using path animations in your application.

ReferênciaReference