Visão geral da animação

Windows Presentation Foundation (WPF) fornece um conjunto avançado de elementos gráficos e recursos de layout que permitem criar interfaces de usuário atraentes e documentos atraentes. A animação pode tornar uma interface do usuário ainda mais espetacular e utilizável. Ao apenas animar uma cor de tela de fundo ou aplicar uma animação Transform, você pode criar transições de tela dramáticas ou fornecer indicações visuais úteis.

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

Introdução a animações

A animação é uma ilusão criada passando-se rapidamente por uma série de imagens, cada uma ligeiramente diferente da anterior. O cérebro vê a sequência de imagens como uma única cena em mudança. Em filmes, essa ilusão é criada usando câmeras que gravam várias fotografias, ou quadros, a cada segundo. Quando os quadros são executados por um projetor, o público-alvo vê um filme animado.

A animação em um computador é semelhante. Por exemplo, um programa que cria um desenho de um retângulo que desaparece pode funcionar conforme descrito a seguir.

  • O programa cria um temporizador.

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

  • Cada vez que o programa verifica o temporizador, ele calcula o valor de opacidade atual para o retângulo com base em quanto tempo transcorreu.

  • O programa então 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 estrutura WPF. A animação do WPF facilita a animação de controles e outros objetos gráficos.

O WPF lida com todo o trabalho de bastidores de gerenciar um sistema de tempo e redesenhar a tela com eficiência. Ele fornece classes de temporização que permitem que você se concentre nos efeitos que deseja criar, em vez de precisar concentrar-se na mecânica envolvida para atingir tais efeitos. 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 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 estrutura crescer, você anima suas propriedades e Height propriedadesWidth. Para fazer um objeto desaparecer do modo de exibição, você anima sua Opacity propriedade.

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

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 quase qualquer lugar, o que inclui em estilos e modelos de controle. Animações não precisam ser visuais; você pode animar objetos que não fazem parte da interface do usuário se eles atendem aos critérios descritos nesta seção.

Exemplo: fazer com que um elemento apareça e desapareça 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 DoubleAnimationtipo de animação que gera Double valores para animar a Opacity propriedade de um Rectangle. Como resultado, o Rectangle esmaecimento entra e sai 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>

O seguinte mostra como criar um Rectangle elemento em um StackPanel 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 produz 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 opacidade o 0.0 torna completamente invisível. Para fazer a transição de animação de 1.0 para 0.0 você definir sua From propriedade como 1.0 e sua To propriedade como 0.0. O exemplo a seguir mostra como criar um DoubleAnimation em XAML.

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

    O exemplo a seguir mostra como criar um DoubleAnimation código 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 os Duration cinco segundos em XAML.

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

    O exemplo a seguir mostra como definir os Duration 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 desapareça de completamente opaco para completamente invisível. Para tornar o elemento desbotado novamente em exibição 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 seguinte mostra como definir as propriedades e RepeatBehavior as AutoReverse propriedades 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 e RepeatBehavior as AutoReverse propriedades 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ê criará e Storyboard usará as TargetName propriedades e TargetProperty as propriedades anexadas para especificar o objeto e a propriedade a serem animados.

  1. Crie e Storyboard adicione a animação como seu filho. O exemplo a seguir mostra como criar o Storyboard XAML in.

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

    Para criar o Storyboard código in, declare uma Storyboard variável no nível da classe.

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

    Em seguida, inicialize e Storyboard adicione a animação como seu filho.

    myStoryboard = new Storyboard();
    myStoryboard.Children.Add(myDoubleAnimation);
    
    myStoryboard = New Storyboard()
    myStoryboard.Children.Add(myDoubleAnimation)
    
  2. É Storyboard preciso saber onde aplicar a animação. Use a Storyboard.TargetName propriedade anexada para especificar o objeto a ser animado. O seguinte 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>
    

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

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
    
    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
    
  3. Use a TargetProperty propriedade anexada para especificar a propriedade a ser animada. O exemplo a seguir mostra como a animação é configurada para direcionar a Opacity propriedade do Rectangle XAML no.

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

    A seguir, mostra como a animação é configurada para direcionar a Opacity propriedade do Rectangle código em.

    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 de Storyboards.

Parte 3 (XAML): associar o storyboard com 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 a Storyboard um gatilho em XAML.

  1. Crie um BeginStoryboard objeto e associe seu storyboard a ele. Um BeginStoryboard é um tipo que TriggerAction se 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 a BeginStoryboard sua Actions coleção. Defina a RoutedEvent propriedade do EventTrigger evento roteado que você deseja iniciar 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 a EventTriggerTriggers 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 com um manipulador de eventos

A maneira mais fácil de aplicar e iniciar um Storyboard código no código é usar um manipulador de eventos. Esta seção mostra como associar o manipulador de Storyboard eventos a um 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 Begin método 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 aparece e desaparece 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

Já que as animações geram valores de propriedade, existem diferentes tipos de animação para diferentes tipos de propriedades. Para animar uma propriedade que usa uma Doublepropriedade Width de um elemento, use uma animação que produz Double valores. Para animar uma propriedade que usa um Point, use uma animação que produz Point valores 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, elas seguem uma convenção de nomenclatura estrita que facilita a diferenciação entre elas:

  • <Tipo> Animação

    Conhecida como "de/para/por" ou animação "básica", ela anima entre um valor inicial e outro de destino, ou então pela adição de um valor de deslocamento ao seu valor inicial.

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

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

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

    Os exemplos nesta visão geral usam essas animações porque elas são 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> AnimationUsingKeyFrames

    Animações de quadro chave são mais avançadas que animações de/para/por porque você pode especificar qualquer número de valores de destino e até mesmo controlar seu método de interpolação. Alguns tipos só podem ser animados com animações de quadro chave. As animações de quadro-chave são descritas em detalhes na visão geral das animações de quadro-chave.

  • <Tipo> AnimationUsingPath

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

  • <Tipo> AnimationBase

    Classe abstrata que, ao implementá-la, anima um < valor type>. Essa classe serve como a classe base para < as classes Animação de Tipo>e <Tipo>AnimationUsingKeyFrames. Você só precisará lidar diretamente com essas classes se quiser criar suas próprias animações personalizadas. Caso contrário, use uma < animação de tipo>ou animaçãode tipo>keyframe<.

Na maioria dos casos, você deseja usar as < classes de Animação de Tipo>, como DoubleAnimation e ColorAnimation.

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

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

As 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 tempo de uma linha do tempo: ela Duration, quantas vezes ela é repetida e até mesmo o quão rápido o tempo progride para ela.

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). Conforme a animação progride ou é "reproduzida", ela atualiza a propriedade com a qual está associada.

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

A propriedade Duration

Conforme mencionado anteriormente, uma linha do tempo representa um segmento de tempo. O comprimento desse segmento é determinado pela linha do Duration tempo, que geralmente é especificada usando um TimeSpan valor. Quando uma linha do tempo atinge o final de sua duração, ela completou 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 de 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.

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 código no código é usar o FromSeconds método para criar uma TimeSpan, em seguida, declarar uma nova Duration estrutura usando isso TimeSpan.

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

AutoReverse

A AutoReverse propriedade especifica se uma linha do tempo é reproduzida para trás depois de atingir o final de seu Duration. Se você definir essa propriedade de animação como true, uma animação será revertida depois que ela atingir o final de sua Durationexecução, reproduzindo de seu valor final de volta 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, 1.0o que significa que elas jogam 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.

Aplicar 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. Uma Storyboard linha do tempo de contêiner que fornece informações de direcionamento para as animações que ele contém.

Usar objetos e propriedades como destino

A Storyboard classe fornece as TargetName propriedades e TargetProperty as propriedades anexadas. Ao definir essas propriedades em uma animação, você diz à animação o que animar. No entanto, antes de uma animação poder usar um objeto como destino, normalmente esse objeto deverá 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 framework; 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 tornar um FrameworkElement destino de animação, dê-lhe um nome 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 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 nomenclatura 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.

Aplicar e iniciar Storyboards

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

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

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, adicioná-lo para o período de preenchimento, procurar 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 após o término da animação?

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 contém seu valor de saída final.

O DoubleAnimation 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 similar. Ao contrário do exemplo anterior, as propriedades e AutoReverse as RepeatBehavior propriedades dessa animação são deixadas em seus valores padrão. Portanto, a animação avança de 1 para 0 durante 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 ela não foi alterada 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ê definir o Opacity retângulo como outro valor, seu código parece não ter efeito, pois 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 nulo para o AnimationTimeline parâmetro. Para obter mais informações e um exemplo, consulte Definir uma propriedade depois de animá-la com um Storyboard.

Observe que, embora a configuração de um valor de propriedade que tenha uma animação Active ou Filling uma 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 tempo.

Associar dados e animar 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 ao modo como o sistema de temporização funciona, animações associadas a dados ou animadas não se comportam como outros objetos animados ou associados a dados. Para entender o seu comportamento, é importante entender o que significa aplicar uma animação a uma propriedade.

Veja o exemplo na seção anterior que mostrou como animar o Opacity retângulo. Quando o retângulo no exemplo anterior é carregado, seu gatilho de evento aplica o Storyboard. O sistema de tempo cria uma cópia da animação e da Storyboard 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 verdadeiro trabalho de animar as propriedades usadas como destino.

O sistema de tempo cria um relógio para o e aplica-o DoubleAnimation ao objeto e à propriedade que é especificado pelo TargetName e TargetProperty do DoubleAnimation. Nesse caso, o sistema de tempo aplica o relógio à Opacity propriedade do objeto chamado "MyRectangle".

Embora um relógio também seja criado para o Storyboardrelógio, 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 uma animação refletir as alterações de animação ou de associação de dados, 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 animação associada a dados, consulte o Exemplo de Animação do Key Spline. Para obter mais informações sobre como funciona o sistema de animação e tempo, 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 pelo uso de 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.

Amostras de animação

As amostras a seguir podem ajudá-lo a começar a adicionar animações a seus aplicativos.

Título Descrição
Visão geral da animação e do sistema de tempo Descreve como o sistema de tempo usa as classes e Clock as Timeline classes, que permitem criar animações.
Dicas e truques de animação Lista dicas úteis para solucionar problemas com animações, por exemplo, desempenho.
Visão geral de animações personalizadas Descreve como estender o sistema de animação com quadros chave, classes de animação ou retornos de chamada por quadro.
Visão geral de animações de/para/por Descreve como criar uma animação que faz a transição entre dois valores.
Visão geral das animações de quadro-chave Descreve como criar uma animação com vários valores de destino, incluindo a capacidade de controlar o método de interpolação.
Funções de easing Explica como aplicar fórmulas matemáticas às suas animações para obter comportamento realista, assim como saltar.
Visão geral de animações do caminho Descreve como mover ou girar um objeto ao longo de um caminho complexo.
Visão geral das técnicas de animação da propriedade Descreve as animações de propriedade usando storyboards, animações locais, relógios e animações por quadro.
Visão geral de storyboards Descreve como usar storyboards com várias linhas do tempo para criar animações complexas.
Visão geral dos comportamentos de tempo Descreve os Timeline tipos e propriedades usados em animações.
Visão geral dos eventos de tempo Descreve os eventos disponíveis e objetos para executar código TimelineClock em pontos da linha do tempo, como iniciar, pausar, retomar, ignorar ou parar.
Tópicos de instruções Contém exemplos de código para usar animações e linhas do tempo em seu aplicativo.
Tópicos explicativos de relógios Contém exemplos de código para usar o Clock objeto em seu aplicativo.
Tópicos explicativos sobre quadros-chave Contém exemplos de código para usar animações de quadro chave em seu aplicativo.
Tópicos explicativos de animação do caminho Contém exemplos de código para usar animações de caminho em seu aplicativo.

Referência