Revisão de Animação

Windows Presentation Foundation (WPF) fornece um conjunto poderoso de gráficos e funcionalidades de layout para permitir você criar interfaces de usuário atrativas e documentos apelativos. Animações podem criar interfaces de usuário atrativas ainda mais espetaculares e usáveis. Somente criando uma cor de fundo animada ou aplicando um Transform animado você pode criar transições dramáticas de tela ou prover ajudas visuais úteis.

Esta revisão fornece uma introdução para a animação de WPF e sistema de temporização. Ela foca na animação de objetos WPF usando storyboards.

Este tópico contém as seguintes seções.

• Introdução a Animações
• Sistema WPF de Propriedade de Animação
• Exemplo: Tornar atenuar um elemento e reduzindo do modo de exibição
• Tipos de Animação
• Aplicando uma Animação em uma Propriedade
• Controlar um Storyboard Interativamente
• O Que Acontece Depois que a Animação Acaba?
• Associação de Dados e Animando Animações
• Outras Maneiras para Animar
• Exemplos de animação
• Tópicos relacionados

Introdução a Animações

Animação é uma ilusão que é criada ao rapidamente ciclar por uma série de imagens, cada uma levemente diferente da anterior. O cérebro percebe o grupo de imagens como uma única cena que muda. Em filmes, essa ilusão é criada usando câmeras que gravam várias fotografias, ou quadros, a cada segundo. Quando os quadros são tocados por um projetor, a audiência vê uma filme de fotografia.

Animação em um computador é similar. Por exemplo, um programa que cria um desenho de um retângulo sumir da visão pode funcionar como o seguinte.

• O programa cria um timer.

• O programa checa o timer em intervalos definidos para ver quanto tempo passou.

• Cada vez que o programa checa o timer, o computador cria um valor de opacidade atual para o retângulo baseado em quanto tempo passou.

• O programa então atualiza o retângulo com o novo valor e redesenha-o.

Antes para WPF, Microsoft Windows os desenvolvedores precisavam criar e gerenciar seus próprios sistemas de temporização ou usar bibliotecas especiais personalizadas. WPF inclui um sistema eficiente de tempo que é exposto por meio de código gerenciado e Extensible Application Markup Language (XAML) e que está integrado ao profundamente o WPF estrutura. WPF animação torna mais fácil de animar controles e outros objetos gráficos.

WPF cuida de todo o trabalho por trás de gerenciar um sistema de temporização e redesenhar a tela eficientemente. Ele fornece classes de tempo que permitem que você enfocar os efeitos desejados para criar, em vez da mecânica de atingir esses efeitos. WPF também torna mais fácil para criar suas próprias animações, expondo a partir do qual as classes podem herdar de classes base do animação, produzir animações personalizadas. Estas animações personalizadas ganham muitos benefícios de performance das classes de animação padrão.

Sistema WPF de Propriedade de Animação

Se você intender alguns conceitos importantes sobre o sistema de temporização, animações WPF será mais fácil de usar. Mais importante que isto, em WPF, você anima objetos ao aplicar animações a suas propriedades individuais. Por exemplo, para um elemento de framework crescer, você anima suas propriedades Width e Height. Para fazer um objeto sumir gradualmente da visão, você anima sua propriedade Opacity.

Para uma propriedade ter capacidade de animação, ela deve atender aos três seguintes requisitos:

• Ela deve ser uma propriedade de dependência.

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

• Deve existir um tipo de animação compatível disponível. (Se Windows Presentation Foundation (WPF) não fornecer um, você pode criar o seu próprio. Consulte Visão Geral de Animações Personalizadas.)

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

Você pode usar animação em quase qualquer lugar, o que inclui estilos e templates de controle. Animações não precisam ser visual; você pode animar objetos que não são parte da interface de usuário desde que elas atendam os critérios que são descritos nesta seção.

Exemplo: Tornar atenuar um elemento e reduzindo do modo de 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 valores Double, para animar a propriedade Opacity de um Rectangle. Como um resultado, o Rectangle some e aparece gradualmente da visão.

A primeira parte do exemplo cria um elemento Rectangle e exibe-o em um Page. Os passos que seguem mostram como criar uma animação e aplicá-la a propriedade Opacity do retângulo.

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">
    
    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
    </Rectangle> 
  </StackPanel>
</Page>

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

namespace Microsoft.SDK.Animation
{
    public class RectangleOpacityFadeExample : Page
    {
        public RectangleOpacityFadeExample()
        {
            NameScope.SetNameScope(this, new NameScope());
            this.WindowTitle = "Fading Rectangle Example";
            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;
            myPanel.Children.Add(myRectangle);
            this.Content = myPanel; 
        }
    }
}

Parte 1: Criar um DoubleAnimation

Uma maneira de criar um elemento de sumir e aparecer gradualmente da visão é animar sua propriedade Opacity. Como a propriedade Opacity é do tipo Double, você precisa de uma animação que produza valores double. Um DoubleAnimation é uma destas animação. Um DoubleAnimation cria uma transição entre dois valores double. Para especificar seu valor de início, você define sua propriedade From. Para especificar seu valor final, você define sua propriedade To.

1. Um valor de opacidade de 1.0 faz com que o objeto seja completamente opaco, e um valor de opacidade de 0.0 faz com que ele seja completamente invisível. Para fazer a animação de transição de 1.0 para 0.0 você define sua propriedade From para 1.0 e sua propriedade To para 0.0.

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

   [C#]

   DoubleAnimation myDoubleAnimation = new DoubleAnimation();
   myDoubleAnimation.From = 1.0;
   myDoubleAnimation.To = 0.0;
   

2. Então, você especifica um Duration. O Duration de uma animação especifica o quanto demora para ir do seu valor inicial para o valor final. No seguinte exemplo, é dada a duração de cinco segundos para a animação.

   ...
   <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />        
   ...
   
   myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
   

3. O código mostrado anteriormente mostrou uma animação que transicionar de 1.0 par a0.0, que faz com que o elemento alvo vá de completamente opaco para completamente invisível. Para fazer o elemento reaparecer na visão depois de sumir, defina a propriedade AutoReverse da animação para true. Para fazer a animação repetir indefinidamente, defina sua propriedade RepeatBehavior para Forever.

   ...
   <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>        
   ...
   
   myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
   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 anexas TargetName e TargetProperty para especificar um objeto e propriedade para animar.

1. Crie o Storyboard e adicione a animação como seu filho.

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

   No código, declare o Storyboard como uma classe membro.

   public class RectangleOpacityFadeExample : Page
   { 
       private Storyboard myStoryboard;
   

   Então inicialize o Storyboard e adicione a animação como seu filho.

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

2. O Storyboard deve saber onde aplicar a animação. Use a propriedade anexa Storyboard.TargetName para especificar o objeto para animar. No seguinte exemplo, é dado um nome alvo de MyRectangle para o DoubleAnimation, que é o nome do objeto a ser animado.

   ...
   <Storyboard>
     <DoubleAnimation
       Storyboard.TargetName="MyRectangle" 
       From="1.0" To="0.0" Duration="0:0:1" 
       AutoReverse="True" RepeatBehavior="Forever" />
   </Storyboard>
   ...
   
   Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
   

   Observação:

   Ao criar storyboards no código, você deve executar duas etapas adicionais: Crie um nome de escopo e registre o nome do objeto para animar. O código no início desta seção que criou a página e retângulo também declarado um NameScope e registrado um nome para o retângulo. Use o método SetNameScope para criar um NameScope, se um ainda não existe. Use o método RegisterName para registrar o nome do objeto alvo com o elemento para o qual você criou um NameScope. Caso contrário, o Storyboard não será capaz de encontrar o objeto para animá-lo. Para um exemplo adicional, consulte Como: Definir um escopo de nomes.

3. Use a propriedade anexa TargetProperty para especificar a propriedade a ser animada. No seguinte código, a animação é configurada para apontar para a propriedade Opacity de um Rectangle.

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

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

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

Parte 3 (XAML): Associar o storyboard com um disparar

A maneira mais fácil de aplicar e começar um Storyboard em umXAML é usar um gatilho de evento.

Criar um objeto BeginStoryboard e associar seu storyboard a ele. Um BeginStoryboard é um tipo de TriggerAction que aplica e começa 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>

Cria um EventTrigger e adiciona o BeginStoryboard a sua coleção Actions. Consulte a propriedade RoutedEvent do EventTrigger para o evento roteado que você quer iniciar o Storyboard. (Para mais informações sobre eventos roteados, consulte o Visão geral sobre 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>

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

A maneira mais fácil de aplicar e começar um Storyboard em um código é usar um manipulador e evento.

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

   [C#]

   myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
   

2. Declare o manipulador de evento. No manipulador de evento, use o método Begin para aplicar o storyboard.

   [C#]

   ...
   public void myRectangleLoaded(object sender, RoutedEventArgs e)
   {
       myStoryboard.Begin(this);
   }
   ...
   

Exemplo Completo

O seguinte exemplo mostra o código completo para criar um retângulo que some e aparece gradualmente numa visualização.

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <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>
</Page>

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

namespace SDKSample
{

    public class RectangleOpacityFadeExample : Page
    {
        private Storyboard myStoryboard;

        public RectangleOpacityFadeExample()
        {
            NameScope.SetNameScope(this, new NameScope());

            this.WindowTitle = "Fading Rectangle Example";
            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);
        }

    }
}

Tipos de Animação

Como animações geram valores de propriedades, tipos diferentes de animação existem para tipos diferentes de propriedades. Para animar uma propriedade que recebe um Double, como a propriedade Width de um elemento, use uma animação que produz valores Double. Para animar uma propriedade que recebe um Point, use uma animação que produz valores Point, e etc. Por causa do número de tipos de propriedades diferentes, existem várias classes de animações no namespace System.Windows.Media.Animation. Felizmente, elas seguem uma convenção de nomes estrita que torna fácil diferenciá-las:

• <TypeAnimation

  Conhecida como "De/Para/Por" ou animação "básica", anima entre um valor de início e um valor final, ou adicionando um valor de offset a seu valor de início.

  • 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 offset, defina a propriedade By da animação.

  Os exemplos neste resumo usam essas animações, porque elas são as mais simples de usar. Animações De/Para/Por são descritas em detalhes no Visão geral sobre animações de/para/por.

• <Type>AnimationUsingKeyFrames

  Animações de chave de quadro são mais poderosas que animações De/Para/Por porque você pode especificar qualquer número de valores finais e até mesmo controlar seu método de interpolação. Alguns tipos podem somente ser animados com animações de chave de quadro. Animações de chave de quadro são descritas em detalhe no Visão geral de animações de Quadro-Chave.

• <Type>AnimationUsingPath

  Animações de caminho permitem você usar um caminho geométrico para produzir valores animados.

• <Type>AnimationBase

  Classe abstrata que, quando você a implementa, anima um valor <Type> Esta classe serve como a classe base para Animação de <Type> e AnimationUsingKeyFrames de classes <Type>. Você tem que lidar diretamente com essas classes somente se você quer criar suas próprias animações customizadas. Caso contrário, use um <Type>Animation ou KeyFrame<Type>Animation.

Na maioria dos casos, você irá querer usar as classes <Type>Animation, tal como DoubleAnimation e ColorAnimation.

A seguinte tabela mostra vários tipos de animação comum e algumas propriedades com quais elas podem ser usadas.

Tipo de propriedade	Animação (De/Para/Por) correspondente básica	Animação de chave de quadro correspondente	Animação de caminho correspondente	Exemplo de uso
Color	ColorAnimation	ColorAnimationUsingKeyFrames	Nenhum	Anima o Color de um SolidColorBrush ou um GradientStop.
Double	DoubleAnimation	DoubleAnimationUsingKeyFrames	DoubleAnimationUsingPath	Anime o Width de um DockPanel ou o Height de um Button.
Point	PointAnimation	PointAnimationUsingKeyFrames	PointAnimationUsingPath	Anime a posição Center de um EllipseGeometry.
String	Nenhum	StringAnimationUsingKeyFrames	Nenhum	Anime o Text de um TextBlock ou o Content de um Button.

Animações são Timelines

Todas os tipos de animação herdam da classe Timeline; portanto, todas animações são tipos de timelines especializadas. Um Timeline define um segmento de tempo. Você pode especificar o comportamentos de temporização de uma linha de tempo: its Duration, quantas vezes ele é progride repetido e até mesmo o time de velocidade para ele.

Como uma animação é um Timeline, ela também representa um segmento de tempo. Uma animação também calcula valores de saída enquanto processa através do segmento de tempo especificado (ou Duration). Ao longo da animação, ele atualiza a propriedade que é associada a ele.

Três propriedades de temporização frequentemente usadas são Duration, AutoReverse, e RepeatBehavior.

A Propriedade Duração

Como mencionado anteriormente, uma linha de tempo representa um segmento de tempo. O comprimento daquele segmento é determinado pelo Duration de uma linha de tempo, o qual é usualmente especificado usando um valor TimeSpan. Quando uma linha de tempo atinge o final de sua duração, ela completou uma iteração.

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

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

horas:minutos segundos de:

A seguinte tabela mostra várias definições de Duration e seus valores resultantes.

Configuração	Valor resultante
0:0:5.5	5,5 segundos.
0:30:5.5	30 minutos e 5,5 segundos.
1:30:5.5	1 hora, 30 minutos, e 5,5 segundos.

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 o TimeSpan.

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

AutoReverse

A propriedade AutoReverse especifica se uma linha de tempo reproduz de volta após atingir o final de sua Duration. Se você definir esta propriedade de animação para true, uma animação volta depois que atinge o final de sua Duration, tocando do valor final de volta até o seu valor inicial. Por padrão, essa propriedade é false.

RepeatBehavior

A propriedade RepeatBehavior especifica quantas vezes uma linha de tempo é reproduzida. Por padrão, linhas de tempo tem uma contagem de iteração de 1.0, que significa que elas tocam uma vez e não repetem.

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

Aplicando uma Animação em uma Propriedade

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

Objetos de Alvo e Propriedades

A classe Storyboard fornece as propriedades anexas TargetName e TargetProperty. Ao definir essas propriedades em uma animação, você diz a animação o que animar. Entretanto, antes de uma animação poder apontar um objeto, o objeto deve normalmente ter um nome.

Atribuir um nome a um FrameworkElement é diferente de atribuir um nome a um objeto Freezable. A maioria dos controles e painéis são elementos de estrutura; entretanto, objetos puramente gráficos, como pinceladas, transformações e geométricos são objetos congeláveis. Se você não tem certeza se um tipo é um FrameworkElement ou um Freezable, referencie a seção Hierarquia de Herança de sua página de tipos.

• Para fazer com que um FrameworkElement seja um alvo de animação, você dá um nome a ele definindo a propriedade Name. No código, você também deve usar o método RegisterName para registrar o nome do elemento na página a qual pertence.

• Para tornar um Freezable um destino de animação no objeto XAML, você usa o x:Name Attribute Para atribuir a ele um nome. No código, você somente usa o método RegisterName para registrar o objeto na página a qual pertence.

As seções que seguem fornecem um exemplo de nomeação de um elemento em XAML e no código. Para informações mais detalhadas sobre nomeação e alvo, consulte o Visão geral sobre Storyboards.

Aplicando e Iniciando Storyboards

Para iniciar um storyboard em XAML, você associa-o com um EventTrigger. Um EventTrigger é um objeto que descreve quais ações devem ser tomadas quando um evento especificado acontece. Uma dessas ações podem ser uma ação BeginStoryboard, que você usa para iniciar seu storyboard. Gatilhos de eventos são similares ao conceito de manipuladores de evento porque permitem você especificar como sua aplicação responde a um evento particular. Diferente de manipuladores de eventos, gatilhos de eventos podem ser totalmente descritos em XAML; nenhum código é necessário.

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

Controlar um Storyboard Interativamente

O exemplo anterior mostrou como iniciar um Storyboard quando um evento acontece. Você pode controlar também interativamente um Storyboard Depois que for iniciado: Você pode pausar, continuar, parar, avançá-lo para o seu período de preenchimento, busca e remover o Storyboard. Para mais informações e um exemplo de mostra como interativamente controlar um Storyboard, consulte Visão geral sobre Storyboards.

O Que Acontece Depois que a Animação Acaba?

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

O DoubleAnimation no exemplo anterior não acaba porque sua propriedade RepeatBehavior é definida como Forever. O seguinte exemplo anima um retângulo usando uma animação similar. Diferente do exemplo anterior, as propriedade RepeatBehavior e AutoReverse dessa animação são deixadas em seus valores padrões. Portanto, a animação avança de 1 para 0 durante cinco segundos e depois 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));

Como seu FillBehavior não foi modificado de seu valor padrão, que é HoldEnd, a animação mantém seu valor final, 0, quando termina. Portanto, o Opacity do retângulo é mantido em 0 depois que a animação acaba. Se você definir o Opacity do retângulo para outro valor, seu código aparentemente não possui efeito, porque a animação ainda está afetando a propriedade Opacity.

Uma maneira de retomar o controle de uma propriedade animada em código é usar o método BeginAnimation para especificar nulo o parâmetro AnimationTimeline. Para mais informações e um exemplo, consulte Como: Definir uma Propriedade Após Animá-la com um Storyboard.

Perceba que, embora definir um valor de propriedade que tem uma animação Active ou Filling aparentemente não tem efeito, o valor da propriedade não muda. Para obter mais informações, consulte o Visão Geral de Animação e Sistema de Tempo.

Associação de Dados e Animando Animações

A maioria das propriedades de animações podem ser associadas a dados ou animadas; por exemplo você pode animar a propriedade Duration de um DoubleAnimation. Entretanto, por causa da maneira como o sistema de temporização trabalha, associação de dados ou animações animadas não se comportam como outras associações de dados ou objetos animados. Para entender seu comportamento, é útil entender o significado de aplicar uma animação a uma propriedade.

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

O sistema de temporização cria um relógio para o DoubleAnimation e aplica ao objeto e propriedade especificados pelo TargetName e TargetProperty do DoubleAnimation. Neste caso, o sistema de temporização aplica o relógio à propriedade Opacity do objeto com nome "MyRetangle".

Embora um relógio também seja criado para o Storyboard, o relógio não é aplicado em nenhuma propriedade. O propósito é controlar seus relógios filhos, o relógio que é criado para o DoubleAnimation.

Para animações refletir associação de dados ou mudanças na animação, seu relógio precisa ser regenerado. Relógios não são regenerados automaticamente para você. Para fazer uma animação refletir mudanças, reaplique seu storyboard usando um BeginStoryboard ou o método Begin. Quando você usa um desses métodos, a animação recomeça. No código, você pode usar o método Seek para reposicionar o storyboard na posição anterior.

Para um exemplo de animação associada a dados, consulte Exemplo de animação spline chave. Para mais informações sobre como animações e sistema de temporização funcionam, consulte Visão Geral de Animação e Sistema de Tempo.

Outras Maneiras para Animar

Os exemplos nesta revisão mostram como animar usando storyboards. Quando você usa código, você pode animar de várias outras maneiras. Para obter mais informações, consulte o Visão geral de técnicas de animação de propriedades.

Exemplos de animação

Os seguintes exemplos podem ajudá-lo a começar a adicionar animações para suas aplicações.

• Exemplo de animação de propriedade

  Mostra como aplicar animações para elementos estruturais e objetos congeláveis.

• De, Para e By exemplo de vParalores de destino de ParanimParação

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

• Exemplo de comportamento de intervalo de animação

  Demonstra as diferentes maneiras que você pode controlar o comportamento de temporização de uma animação. Este exemplo também mostra como associar o valor de destino de uma animação a dados.

Consulte também

Conceitos

Visão geral sobre animações de/para/por

Visão geral de animações de Quadro-Chave

Visão geral sobre Storyboards

Visão geral sobre comportamentos de temporização

Visão Geral de Animação e Sistema de Tempo

Visão geral Eventos de Temporizadores

Getting Started with Windows Presentation Foundation

Referência

Timeline

Storyboard