Visão geral da animação

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

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

Apresentando animações

A animação é uma ilusão que se cria ao percorrer rapidamente 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 cinema, 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 um desenho de um retângulo desaparecer da vista pode funcionar da seguinte maneira.

• O programa cria um temporizador.

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

• Cada vez que o programa verifica o temporizador, calcula o valor de opacidade atual para o retângulo com base no tempo decorrido.

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

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

O WPF lida com todo o trabalho de bastidores de gerenciamento de um sistema de cronometragem e redesenho da 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 alcançar 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 obtêm 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 temporização, as animações WPF podem ser mais fáceis de usar. O mais importante é que, no WPF, você anime objetos aplicando animação a suas propriedades individuais. Por exemplo, para fazer um elemento de estrutura crescer, você anima suas Width e Height propriedades. Para fazer com que um objeto desapareça gradualmente da visão, você anima sua propriedade Opacity.

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ê pode criar o seu próprio. Consulte a Visão geral de animações personalizadas.)

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 têm de 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 entrar e sair da exibição

Este exemplo mostra como usar uma animação 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 propriedade Opacity de um Rectangle. Como resultado, o Rectangle desvanece-se dentro e fora de vista.

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.

A seguir mostra como criar um Rectangle elemento em um StackPanel em XAML.

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

A seguir mostra como criar um elemento Rectangle no StackPanel em 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 um DoubleAnimation

Uma maneira de fazer com que um elemento desapareça e apareça na vista é animar a sua propriedade Opacity. Como a Opacity propriedade é do tipo Double, você precisa de uma animação que produza valores duplos. A DoubleAnimation é uma dessas animações. A 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 opacidade de 1.0 torna o objeto completamente opaco, e um valor de opacidade de 0.0 torna-o completamente invisível. Para fazer a transição da animação de 1.0 para 0.0, defina a sua propriedade From como 1.0 e a sua propriedade To como 0.0. A seguir mostra como criar um DoubleAnimation em XAML.

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

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

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

   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 mostrava uma animação que transita de 1.0 para 0.0, o que faz com que o elemento de destino desapareça de completamente opaco para completamente invisível. Para fazer com que o elemento volte a aparecer depois de desaparecer, defina a AutoReverse propriedade da animação como true. Para fazer com que a animação se repita indefinidamente, defina sua RepeatBehavior propriedade como Forever. A seguir mostra como definir as AutoReverse propriedades e RepeatBehavior em XAML.

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

   A seguir mostra como definir as AutoReverse propriedades 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, crie um Storyboard e use 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 sub-elemento. A seguir mostra como criar o Storyboard em XAML.

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

   Para criar o Storyboard em código, declare uma variável Storyboard ao 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 filho.

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

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

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

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

   A seguir mostra como definir o nome de destino do DoubleAnimation para MyRectangle no código.

   Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
   

   Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
   

3. Utilize a propriedade associada TargetProperty para especificar a propriedade que deseja animar. A seguir, é mostrado como a animação é configurada para visar a propriedade Opacity do Rectangle 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>
   

   Segue-se como a animação é configurada para direcionar à 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 Visão geral do 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 Storyboard a um gatilho em XAML.

1. Crie um BeginStoryboard objeto e associe seu storyboard a ele. Um 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 o BeginStoryboard à sua Actions coleção. Defina a propriedade RoutedEvent do EventTrigger para o evento encaminhado que pretende 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 à Triggers coleção 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 forma mais fácil de aplicar e iniciar um Storyboard em código é usar um manipulador de eventos. Esta seção mostra como associar o Storyboard a um manipulador de eventos no código.

1. Inscreva-se no evento do retângulo Loaded.

   myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
   

   AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded
   

2. Declare o manipulador de eventos. No manipulador de eventos, utilize 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

A seguir mostra como criar um retângulo que aparece e desaparece gradualmente da exibição em 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>

A seguir, mostra como criar um retângulo que surge e desaparece da visualizaçã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 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. 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 rigorosa convenção de nomenclatura que facilita a diferenciação entre eles:

• < Tipo>Animação

  Conhecidas como uma animação "De/Para/Por" ou "básica", elas são animadas entre um valor inicial e um valor 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, configure a propriedade "By" na animação.

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

• < Tipo>Animação Usando KeyFrames

  As animações de quadros-chave são mais poderosas do que as animações De/Para/Por porque é possível especificar qualquer número de valores-alvo e até controlar o seu método de interpolação. Alguns tipos só podem ser animados com animações de quadros-chave. As animações de quadros-chave são descritas em detalhes na Visão geral de animaçõesKey-Frame.

• < 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, ao ser implementada, anima um valor do tipo <Type>. Essa classe serve como a classe base para <Type>Animation e <Type>AnimationUsingKeyFrames. Você tem que lidar diretamente com essas classes apenas se você quiser criar suas próprias animações personalizadas. Caso contrário, use uma animação <ou uma > animação<de quadro-chave>.

Na maioria dos casos, você deve querer usar a classe <Type>Animation, 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. A Timeline define um segmento de tempo. 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 tempo progride para ela.

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

Três propriedades de temporização usadas com freqüência são Duration, AutoReverse, e RepeatBehavior.

A propriedade Duração

Como mencionado anteriormente, uma linha do tempo representa um segmento de tempo. O comprimento desse segmento é determinado pela Duration linha do tempo, que geralmente é especificada usando um TimeSpan valor. Quando uma linha do tempo atinge o final 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, ela 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 FromSeconds método para criar um TimeSpane, em seguida, declarar uma nova Duration estrutura usando esse TimeSpan.

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

Reversão Automática

A AutoReverse propriedade especifica se uma linha do tempo é reproduzida para trás depois de atingir o final de seu Duration. Se definir esta propriedade de animação como true, a animação reverte após atingir o fim do seu Duration, passando do seu valor final até o 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 são reproduzidas uma vez e não se repetem de forma alguma.

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

Aplicando uma animação a uma propriedade

As seções anteriores descrevem os diferentes tipos de animações e suas propriedades de temporização. 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. A Storyboard é uma cronologia de contêiner que fornece informações de alvo para as animações que contém.

Focalizando objetos e propriedades

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

Atribuir um nome a um FrameworkElement difere de atribuir um nome a um Freezable objeto. A maioria dos controles e painéis são elementos de estrutura; No entanto, a maioria dos objetos puramente gráficos, 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 criar um FrameworkElement destino de animação, dê um nome a ele definindo sua Name propriedade. 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 Freezable objeto um destino de animação em XAML, use a diretiva x:Name para atribuir-lhe um nome. 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 segmentação, consulte Visão geral do Storyboards.

Aplicando e iniciando Storyboards

Para iniciar um storyboard em XAML, associe-o a um EventTriggerelemento. Um EventTrigger é um objeto que descreve quais ações devem ser executadas 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 eventos podem ser totalmente descritos em XAML; nenhum outro código é necessário.

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

Controle interativamente um Storyboard

O exemplo anterior mostrou como iniciar um Storyboard quando ocorre um evento. Você também pode controlar interativamente um Storyboard depois de iniciado: pode pausar, retomar, parar, avançá-lo até ao seu período de preenchimento, localizar e remover o Storyboard. Para obter mais informações e um exemplo que mostra como controlar interativamente um Storyboard, consulte a Visão geral do 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 mantém Filling seu valor de saída final.

O DoubleAnimation no exemplo anterior não termina porque sua RepeatBehavior propriedade está 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 desta animação são deixadas nos seus valores predefinidos. Portanto, a animação progride de 1 para 0 em cinco segundos e, em seguida, para.

<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 o seu FillBehavior valor padrão não foi alterado, que é HoldEnd, 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ê 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 Opacity propriedade.

Uma maneira de recuperar o controle de uma propriedade animada no código é usar o BeginAnimation método e especificar null 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 animação ou Filling pareça não ter efeito, o valor da propriedade é alterado. Para obter mais informações, consulte Visão geral do sistema de animação e cronometragem.

Vinculação de dados e animações

A maioria das propriedades de animação pode ser vinculada a dados ou animada; Por exemplo, pode-se animar a propriedade Duration de um DoubleAnimation. No entanto, devido à forma como o sistema de cronometragem funciona, as animações animadas ou ligadas a dados não se comportam como outros objetos ligados a dados ou animados. 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 Opacity de um retângulo. Quando o retângulo no exemplo anterior é carregado, o seu disparador de eventos aplica o Storyboard. O sistema de cronometragem cria uma cópia do Storyboard e da sua animação. Essas cópias são congeladas (transformadas em apenas leitura) e a partir delas, os objetos Clock são criados. 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 TargetName e TargetProperty do DoubleAnimation. Nesse caso, o sistema de temporização aplica o relógio à propriedade Opacity do objeto chamado "MyRectangle".

Embora um relógio também seja criado para o Storyboard, o relógio não é aplicado a nenhuma propriedade. Seu objetivo é controlar seu relógio filho, o relógio que é criado para o DoubleAnimation.

Para que uma animação reflita a ligação de dados ou as alterações de animação, seu relógio deve ser regenerado. Os relógios não são regenerados automaticamente para si. Para fazer com que uma animação reflita as alterações, reaplique 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 deslocar o storyboard de volta à sua posição anterior.

Para obter um exemplo de uma animação associada a dados, consulte Key Spline Animation Sample. Para obter mais informações sobre como funciona o sistema de animação e cronometragem, consulte Visão geral do sistema de animação e cronometragem.

Outras maneiras de animar

Os exemplos nesta visão geral mostram como animar usando storyboards. Quando você usa 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 Valores de Destino "From", "To" e "By" em Animação

  Demonstra configurações diferentes De/Para/Por.

• Exemplo de comportamento de temporização de animação

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

Tópicos relacionados

Referência

• Timeline

• Storyboard

• BeginStoryboard

• Clock