Visão geral da animação

O Windows Presentation Foundation (WPF) fornece um conjunto poderoso de elementos gráficos e recursos de layout que permitem criar interfaces de usuário atraentes e documentos atraentes. A animação pode fazer uma interface do usuário já atraente ficar ainda mais espetacular e usável. Apenas animando uma cor de plano de fundo ou aplicando uma animação Transform, você pode criar transições dramáticas de tela ou fornecer indicações visuais úteis.

Essa visão geral fornece uma introdução ao sistema de animação e temporização do WPF. Ele se concentra na animação de objetos WPF usando storyboards.

Apresentando animações

Animação é uma ilusão que é criada pedalando rapidamente através de uma série de imagens, cada uma ligeiramente diferente da última. O cérebro percebe o grupo de imagens como uma única cena em mudança. No filme, essa ilusão é criada usando câmeras que registram muitas fotografias, ou quadros, a cada segundo. Quando os fotogramas são reproduzidos por um projetor, o público vê uma imagem em movimento.

A animação em um computador é semelhante. Por exemplo, um programa que faz com que um desenho de retângulo desapareça da tela pode funcionar da seguinte maneira.

• O programa cria um temporizador.

• O programa verifica o temporizador em intervalos definidos para ver quanto tempo passou.

• Sempre que o programa verifica o temporizador, ele calcula o valor de opacidade atual do retângulo com base em quanto tempo passou.

• Em seguida, o programa atualiza o retângulo com o novo valor e o redesenha.

Antes do WPF, os desenvolvedores do Microsoft Windows tinham que criar e gerenciar seus próprios sistemas de tempo ou usar bibliotecas personalizadas especiais. O WPF inclui um sistema de tempo eficiente que é exposto por meio de código gerenciado e XAML e que está profundamente integrado à estrutura do WPF. A animação do WPF facilita a animação de controles e outros objetos gráficos.

O WPF lida com todo o trabalho nos bastidores de gerenciar um sistema de temporização e redesenhar a tela de forma eficiente. Ele fornece classes de tempo que permitem que você se concentre nos efeitos que deseja criar, em vez da mecânica de obter esses efeitos. O WPF também facilita a criação de suas próprias animações expondo classes base de animação das quais suas classes podem herdar, para produzir animações personalizadas. Essas animações personalizadas ganham muitos dos benefícios de desempenho das classes de animação padrão.

Sistema de Animação de Propriedades do WPF

Se você entender alguns conceitos importantes sobre o sistema de tempo, as animações do WPF poderão ser mais fáceis de usar. O mais importante é que, no WPF, você anima objetos aplicando animação às suas propriedades individuais. Por exemplo, para fazer um elemento de quadro crescer, você anima suas propriedades Width e Height. Para fazer um objeto desaparecer da exibição, você anima sua Opacity propriedade.

Para que uma propriedade tenha recursos de animação, ela deve atender aos três requisitos a seguir:

• Deve ser uma propriedade de dependência.

• Ele deve pertencer a uma classe que herda DependencyObject e implementa a IAnimatable interface.

• Deve haver um tipo de animação compatível disponível. (Se o WPF não fornecer um, você poderá criar seu próprio. Confira a visão geral das animações personalizadas.)

O WPF contém muitos objetos que têm IAnimatable propriedades. Controles como Button e TabControl, e também Panel e Shape objetos herdam de DependencyObject. A maioria de suas propriedades são propriedades de dependência.

Você pode usar animações em praticamente qualquer lugar, o que inclui estilos e modelos de controle. As animações não precisam ser visuais; você pode animar objetos que não fazem parte da interface do usuário se eles atenderem aos critérios descritos nesta seção.

Exemplo: Fazer um elemento desaparecer dentro e fora de exibição

Este exemplo mostra como usar uma animação do WPF para animar o valor de uma propriedade de dependência. Ele usa um DoubleAnimation, que é um tipo de animação que gera Double valores, para animar a Opacity propriedade de um Rectangle. Como resultado, o Rectangle aparece e desaparece da exibição.

A primeira parte do exemplo cria um Rectangle elemento. As etapas a seguir mostram como criar uma animação e aplicá-la à propriedade do Opacity retângulo.

O exemplo a seguir mostra como criar um Rectangle elemento em um StackPanel XAML.

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

A seguir, mostra como criar um elemento Rectangle em um StackPanel no código.

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 DoubleAnimation

Uma maneira de fazer um elemento desaparecer dentro e fora de exibição é animar sua Opacity propriedade. Como a Opacity propriedade é do tipo Double, você precisa de uma animação que produza valores duplos. A DoubleAnimation é uma dessas animações. Um DoubleAnimation cria uma transição entre dois valores duplos. Para especificar seu valor inicial, defina sua From propriedade. Para especificar seu valor final, defina sua To propriedade.

1. Um valor de 1.0 opacidade torna o objeto completamente opaco, e um valor de 0.0 opacidade o torna completamente invisível. Para fazer a transição da animação de 1.0 para 0.0, você deve definir a propriedade From como 1.0 e a propriedade To como 0.0. A seguir, é mostrado como criar um DoubleAnimation em XAML.

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

   O exemplo a seguir mostra como criar um DoubleAnimation no código.

   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. A Duration de uma animação especifica quanto tempo leva para ir de seu valor inicial para seu valor de destino. O exemplo a seguir mostra como definir o Duration para cinco segundos em XAML.

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

   O exemplo a seguir mostra como definir o Duration para cinco segundos no código.

   myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
   

   myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
   

3. O código anterior mostrou uma animação que faz a transição de 1.0 para 0.0, o que faz com que o elemento de destino esmaeça de completamente opaco para completamente invisível. Para fazer o elemento reaparecer gradualmente depois que ele desaparecer, defina a AutoReverse propriedade da animação como true. Para que a animação se repita indefinidamente, defina sua RepeatBehavior propriedade como Forever. O exemplo a seguir mostra como definir as propriedades AutoReverse e RepeatBehavior em XAML.

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

   O exemplo a seguir mostra como definir as propriedades AutoReverse e RepeatBehavior no código.

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

   myDoubleAnimation.AutoReverse = True
   myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever
   

Parte 2: Criar um storyboard

Para aplicar uma animação a um objeto, você cria um Storyboard e usa as propriedades anexadas TargetName e TargetProperty para especificar o objeto e a propriedade a serem animados.

1. Crie o Storyboard e adicione a animação como seu elemento filho. O exemplo a seguir mostra como criar o Storyboard no 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 a variável Storyboard no nível da classe.

   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 elemento.

   myStoryboard = new Storyboard();
   myStoryboard.Children.Add(myDoubleAnimation);
   

   myStoryboard = New Storyboard()
   myStoryboard.Children.Add(myDoubleAnimation)
   

2. Storyboard precisa saber onde aplicar a animação. Use a Storyboard.TargetName propriedade anexada para especificar o objeto a ser animado. O exemplo a seguir mostra como definir o nome de destino do DoubleAnimation para MyRectangle no XAML.

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

   O exemplo a seguir mostra como definir o nome de destino de DoubleAnimation para MyRectangle no código.

   Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
   

   Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
   

3. Utilize a propriedade anexada TargetProperty para especificar a propriedade que deseja animar. O exemplo a seguir mostra como a animação é configurada para direcionar a propriedade Opacity do Rectangle destino em 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 exemplo a seguir mostra como a animação é configurada para direcionar a propriedade Opacity do Rectangle no código.

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

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

Para obter mais informações sobre TargetProperty sintaxe e exemplos adicionais, consulte a Visão geral dos Storyboards.

Parte 3 (XAML): Associar o storyboard a um gatilho

A maneira mais fácil de aplicar e iniciar um Storyboard em XAML é usar um gatilho de evento. Esta seção mostra como associar o Storyboard com um gatilho em XAML.

1. Crie um BeginStoryboard objeto e associe seu storyboard a ele. A BeginStoryboard é um tipo de TriggerAction que aplica e inicia um 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 BeginStoryboard à sua coleção Actions. Defina a propriedade RoutedEvent do EventTrigger para o evento roteado que você deseja iniciar o Storyboard. (Para obter mais informações sobre eventos roteados, consulte a Visão geral de eventos roteados.)

   <!-- 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 Triggers do Retângulo.

   <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 a um manipulador de eventos

A maneira mais fácil de aplicar e iniciar um Storyboard código é usar um manipulador de eventos. Esta seção mostra como associar o Storyboard com um manipulador de eventos em código.

1. Registre-se para o Loaded evento do retângulo.

   myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
   

   AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded
   

2. Declare o manipulador de eventos. No manipulador de eventos, use o método Begin para aplicar o 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 completo

O exemplo a seguir mostra como criar um retângulo que desaparece dentro e fora de exibição no 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 desaparece dentro e fora de exibição no código.

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ção

Como as animações geram valores de propriedade, existem diferentes tipos de animação para diferentes tipos de propriedade. Para animar uma propriedade que aceita um Double, como a propriedade Width de um elemento, use uma animação que produza valores Double. Para animar uma propriedade que usa um Point, utilize uma animação que resulte em valores de Point, entre outros. Devido ao número de tipos de propriedade diferentes, há várias classes de animação no System.Windows.Media.Animation namespace. Felizmente, eles seguem uma convenção de nomenclatura estrita que facilita a diferenciação entre eles:

• < Tipo>Animação

  Conhecidas como animação "De/para/Por" ou "básica", elas animam entre um valor inicial e de destino ou adicionando um valor de deslocamento ao seu valor inicial.

  • Para especificar um valor inicial, defina a propriedade From da animação.

  • Para especificar um valor final, defina a propriedade To da animação.

  • Para especificar um valor de deslocamento, defina a propriedade By da animação.

  Os exemplos nesta visão geral usam essas animações, pois elas são as mais simples de usar. Animações De/Para/Por são descritas em detalhes na Visão Geral de Animações De/Para/Por.

• < Tipo>AnimaçãoUsandoQuadrosChave

  As animações de quadro-chave são mais poderosas do que as animações do tipo 'De/Para/Por', porque você pode especificar qualquer número de valores de destino e até mesmo controlar seu método de interpolação. Alguns tipos só podem ser animados com animações de quadro-chave. As animações de quadro-chave são descritas em detalhes na Key-Frame Visão Geral de Animações.

• < Tipo>AnimaçãoUsandoCaminho

  As animações de caminho permitem que você use um caminho geométrico para produzir valores animados.

• < Tipo>AnimationBase

  Classe abstrata que, quando implementada, anima um valor do tipo <. Esta classe serve como classe base para <Type>Animation e <Type>AnimationUsingKeyFrames. Você precisa lidar diretamente com essas classes somente se quiser criar suas próprias animações personalizadas. Caso contrário, use uma < animação de tipo>ou <KeyFramede tipo> animação.

Na maioria das vezes, você desejará usar as < classes de Animação do Tipo>, como DoubleAnimation e ColorAnimation.

A tabela a seguir mostra vários tipos de animação comuns e algumas propriedades com as quais eles são usados.

Animações são linhas do tempo

Todos os tipos de animação herdam da Timeline classe; portanto, todas as animações são tipos especializados de linhas do tempo. Um Timeline define um segmento de tempo. Você pode especificar os comportamentos de temporização de um cronograma: seu Duration, quantas vezes é repetido e até mesmo a rapidez com que o tempo avança para ele.

Como uma animação é uma Timeline, ela também representa um segmento de tempo. Uma animação também calcula os valores de saída à medida que progride por meio de seu segmento de tempo especificado (ou Duration). À medida que a animação progride, ou "toca", ela atualiza a propriedade à qual está associada.

Três propriedades de tempo usadas com frequência são Duration, AutoReversee RepeatBehavior.

A propriedade Duration

Como mencionado anteriormente, uma linha do tempo representa um segmento de tempo. O comprimento desse segmento é determinado pela linha do tempo Duration, que geralmente é especificada com um valor TimeSpan. Quando uma linha do tempo atinge o fim de sua duração, ela concluiu uma iteração.

Uma animação usa sua Duration propriedade para determinar seu valor atual. Se você não especificar um Duration valor para uma animação, ele usará 1 segundo, que é o padrão.

A sintaxe a seguir mostra uma versão simplificada da sintaxe do atributo XAML (Extensible Application Markup Language) para a Duration propriedade.

horas:minutos:segundos

A tabela a seguir mostra várias Duration configurações e seus valores resultantes.

Uma maneira de especificar um Duration no código é usar o método FromSeconds para criar um TimeSpan, e então declarar uma nova estrutura Duration usando esse TimeSpan.

Para obter mais informações sobre Duration valores e a sintaxe completa do XAML (Extensible Application Markup Language), consulte a estrutura Duration.

AutoReverso

A AutoReverse propriedade especifica se uma linha do tempo será reproduzida para trás depois de atingir o final de sua Duration. Se você definir essa propriedade de animação como true, uma animação será revertida depois que ela atingir o final de sua Duration, reproduzindo de volta de seu valor final para seu valor inicial. Por padrão, essa propriedade é false.

RepeatBehavior

A RepeatBehavior propriedade especifica quantas vezes uma linha do tempo é reproduzida. Por padrão, as linhas do tempo têm uma contagem de iteração de 1.0, o que significa que elas se reproduzem uma vez e não se repetem.

Para obter mais informações sobre essas propriedades e outras, consulte a visão geral de comportamentos de tempo.

Aplicando uma animação a uma propriedade

As seções anteriores descrevem os diferentes tipos de animações e suas propriedades de tempo. Esta seção mostra como aplicar a animação à propriedade que você deseja animar. Storyboard os objetos fornecem uma maneira de aplicar animações às propriedades. Uma Storyboard é uma linha de tempo contêiner que fornece informações de direcionamento para as animações que contém.

Direcionamento de objetos e propriedades

A classe Storyboard fornece as propriedades anexadas TargetName e TargetProperty. Ao definir essas propriedades em uma animação, você informa à animação o que animar. No entanto, antes que uma animação possa atingir um objeto, o objeto geralmente deve receber um nome.

Atribuir um nome a um FrameworkElement difere da atribuição de um nome a um Freezable objeto. A maioria dos controles e painéis são elementos de estrutura de software; no entanto, objetos puramente gráficos na sua maioria, como pincéis, transformações e geometrias, são objetos congeláveis. 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.

• Para transformar um FrameworkElement em um destino de animação, atribua um nome definindo sua propriedade Name. No código, você também deve usar o RegisterName método para registrar o nome do elemento com a página à qual ele pertence.

• Para tornar um objeto um Freezable destino de animação em XAML, use a Diretiva x:Name para atribuir um nome a ele. No código, basta usar o RegisterName método para registrar o objeto com a página à qual ele pertence.

As seções a seguir fornecem um exemplo de nomeação de um elemento em XAML e código. Para obter informações mais detalhadas sobre nomenclatura e direcionamento, consulte a Visão geral dos Storyboards.

Aplicação e início de storyboards

Para iniciar um storyboard no XAML, associe-o a um EventTrigger. Um EventTrigger é um objeto que descreve quais ações tomar quando ocorre um evento especificado. Uma dessas ações pode ser uma BeginStoryboard ação, que você usa para iniciar seu storyboard. Os gatilhos de evento são semelhantes em conceito aos manipuladores de eventos porque permitem especificar como seu aplicativo responde a um evento específico. Ao contrário dos manipuladores de eventos, os gatilhos de evento podem ser totalmente descritos em XAML; nenhum outro código é necessário.

Para iniciar um Storyboard no código, você pode usar um EventTrigger ou usar o método Begin da classe Storyboard.

Controlar interativamente um storyboard

O exemplo anterior mostrou como iniciar um Storyboard quando ocorre um evento. Você também pode controlar interativamente um Storyboard após o início: você pode pausar, retomar, parar, avançá-lo para o período de preenchimento, buscar e remover o Storyboard. Para obter mais informações e um exemplo que mostra como controlar interativamente um Storyboard, consulte a Visão geral dos Storyboards.

O que acontece depois que uma animação termina?

A FillBehavior propriedade especifica como uma linha do tempo se comporta quando termina. Por padrão, uma linha do tempo começa Filling quando termina. Uma animação que Filling mantém seu valor final de saída.

O DoubleAnimation exemplo anterior não termina porque sua RepeatBehavior propriedade é definida como Forever. O exemplo a seguir anima um retângulo usando uma animação semelhante. Ao contrário do exemplo anterior, as propriedades RepeatBehavior e AutoReverse dessa animação são deixadas em seus valores padrão. Portanto, a animação progride de 1 a 0 em cinco segundos e, em seguida, é interrompida.

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

FillBehavior Como ele não foi alterado de seu valor padrão, ou sejaHoldEnd, a animação mantém seu valor final, 0, quando termina. Portanto, o Opacity retângulo permanece em 0 após o término da animação. Se você atribuir outro valor ao Opacity do retângulo, seu código parece não ter efeito, porque a animação ainda está afetando a propriedade Opacity.

Uma maneira de recuperar o controle de uma propriedade animada no código é usar o BeginAnimation método e especificar nulo para o AnimationTimeline parâmetro. Para obter mais informações e um exemplo, consulte Definir uma propriedade após animá-la com um storyboard.

Observe que, embora a definição de um valor de propriedade que tenha uma Active ou Filling animação pareça não ter efeito, o valor da propriedade é alterado. Para obter mais informações, consulte a visão geral do sistema de animação e temporização.

Vinculação de Dados e Animação de Animações

A maioria das propriedades de animação pode ser associada a dados ou animada; por exemplo, você pode animar a Duration propriedade de um DoubleAnimation. No entanto, devido à maneira como o sistema de tempo funciona, animações animadas ou associadas a dados não se comportam como outros objetos animados ou associados a dados. Para entender seu comportamento, ajuda a entender o que significa aplicar uma animação a uma propriedade.

Consulte o exemplo na seção anterior que mostrou como animar o retângulo Opacity. Quando o retângulo no exemplo anterior é carregado, seu gatilho de evento aplica o Storyboard. O sistema de tempo cria uma cópia da Storyboard e de sua animação. Essas cópias são congeladas (feitas somente leitura) e Clock os objetos são criados a partir delas. Esses relógios fazem o trabalho real de animar as propriedades alvo.

O sistema de temporização cria um relógio para o DoubleAnimation e aplica-o ao objeto e à propriedade especificados pelo TargetNameTargetProperty do DoubleAnimation. Nesse caso, o sistema de tempo aplica o relógio à propriedade Opacity do objeto chamado "MyRectangle".

Embora esteja sendo criado um relógio para o Storyboard, o relógio não é aplicado a nenhuma propriedade. Sua finalidade é controlar seu relógio filho, o relógio que é criado para o DoubleAnimation.

Para que uma animação reflita as alterações de associação de dados ou animação, seu relógio deve ser regenerado. Os relógios não são regenerados automaticamente para você. Para fazer uma animação refletir alterações, reaplicar seu storyboard usando um BeginStoryboard ou o Begin método. Quando você usa qualquer um desses métodos, a animação é reiniciada. No código, você pode usar o Seek método para mudar o storyboard de volta para sua posição anterior.

Para obter um exemplo de uma animação associada a dados, consulte Exemplo de animação de spline de chave. Para obter mais informações sobre como o sistema de animação e tempo funciona, consulte a Visão geral do sistema de animação e tempo.

Outras maneiras de animar

Os exemplos nesta visão geral mostram como animar usando storyboards. Ao usar o código, você pode animar de várias outras maneiras. Para obter mais informações, consulte a visão geral das técnicas de animação de propriedade.

Exemplos de animação

Os exemplos a seguir podem ajudá-lo a começar a adicionar animação aos seus aplicativos.

• Exemplo de Animação de Valores de Alvo De, Para e Por

  Demonstra configurações diferentes de/para/Por.

• Amostra de comportamento de tempo da animação

  Demonstra as diferentes maneiras de controlar o comportamento de tempo de uma animação. Este exemplo também mostra como associar os dados ao valor de destino de uma animação.

Tópicos relacionados

Referência

• Timeline

• Storyboard

• BeginStoryboard

• Clock