Compartilhar via

Visão geral da animação

  • Artigo

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 do usuário ainda mais espetacular e utilizável. Apenas animando uma cor de fundo ou aplicando uma animação Transform, você pode criar transições dramáticas de tela ou fornecer dicas visuais úteis.

Esta 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 precisavam criar e gerenciar seus próprios sistemas de temporização ou usar bibliotecas personalizadas especiais. O WPF inclui um sistema de tempo eficiente que é exposto por meio de código gerenciado e XAML e que é profundamente integrado à estrutura do WPF. A animação do WPF facilita a animação de controles e outros objetos gráficos.

O WPF lida com todo o trabalho nos bastidores de gerenciar um sistema de 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 Width propriedades e Height . Para fazer com que um objeto desapareça da visualização, você anima sua Opacity propriedade.

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

  • Ela deve ser uma propriedade de dependência.

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

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

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

Você pode usar animações em 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 do WPF para animar o valor de uma propriedade de dependência. Ele usa um DoubleAnimation, que é um tipo de animação que gera Double valores, para animar a Opacity propriedade de um Rectangle. Como resultado, o Rectangle desaparece e desaparece 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.

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

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

Veja a seguir 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 aparecer e desaparecer da exibição é animar sua Opacity propriedade. Como a propriedade é do tipo Double, você precisa de uma animação que produza Opacity 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 o torna completamente invisível. Para fazer a transição da animação de 1.0 para, 0.0 defina sua From propriedade como 1.0 e sua To propriedade como 0.0. Veja a seguir como criar um DoubleAnimation arquivo em XAML.

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

    Veja a seguir como criar um DoubleAnimation código in.

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

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

    Veja a seguir como definir o Duration como cinco segundos no código.

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

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

  3. O código anterior mostrava 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 fazer com que o elemento volte a ser exibido depois que ele 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. Veja a seguir como definir as AutoReverse propriedades and RepeatBehavior em XAML.

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

    Veja a seguir como definir as AutoReverse propriedades and 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 e TargetProperty anexadas TargetName para especificar o objeto e a propriedade a serem animados.

  1. Crie e Storyboard adicione a animação como seu filho. Veja a seguir como criar o Storyboard arquivo em XAML.

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

    Para criar o Storyboard código, 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 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. Eles Storyboard precisam saber onde aplicar a animação. Use a propriedade anexada Storyboard.TargetName para especificar o objeto a ser animado. Veja a seguir como definir o nome de destino do DoubleAnimation to MyRectangle em XAML.

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

    Veja a seguir como definir o nome de destino do DoubleAnimation to MyRectangle no código.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)

  3. Use a propriedade anexada TargetProperty para especificar a propriedade a ser animada. O exemplo a seguir mostra como a animação é configurada Rectangle para direcionar a Opacity propriedade do XAML in.

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

    O exemplo a seguir mostra como a animação é configurada para direcionar a Opacity propriedade do Rectangle código in.

    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 o a Storyboard um gatilho em XAML.

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

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

Parte 3 (código): associar o storyboard com um manipulador de eventos

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

Veja a seguir como criar um retângulo que aparece e desaparece gradualmente 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>

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 um Double, como a propriedade de um elemento, use uma animação que produza Double Width valores. Para animar uma propriedade que usa um Point, use uma animação que produza 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 detalhadamente na visão geral de animações de/para/por.

  • <Digite>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. Animações de quadro chave são descritas detalhadamente na Visão geral das animações de quadro chave.

  • <Digite>AnimationUsingPath

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

  • <Tipo>AnimationBase

    Abstract que, quando você a implementa, anima um <valor Type>. Essa classe serve como a classe base para <as classes Type>Animation e< Type>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 tipoou Animação de< tipo>de quadro-chave<.>

Na maioria dos casos, você desejará usar as <classes Type>Animation, 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 o 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 EllipseGeometryarquivo .
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. 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 a rapidez com que o tempo avança 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 avança em 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 temporização 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 pelo Duration da linha do tempo, que geralmente é especificado 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, ela 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 é usar o FromSeconds método para criar um TimeSpan, em seguida, declarar uma nova Duration estrutura usando esse TimeSpan.

Para obter mais informações sobre Duration valores e a sintaxe XAML completa da 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 de atingir o final de seu Duration, reproduzindo de seu valor final de volta ao seu valor inicial. Por padrão, essa propriedade é false.

RepeatBehavior

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

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

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. A Storyboard é uma 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 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 é diferente de atribuir 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 é a FrameworkElement ou um Freezable, consulte a seção Hierarquia de herança de sua documentação de referência.

  • Para criar um destino de FrameworkElement 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 na página à qual ele pertence.

  • Para tornar um Freezable objeto um 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 na 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 nomeação e direcionamento, consulte a Visão geral de storyboards.

Aplicar e iniciar Storyboards

Para iniciar um storyboard em XAML, associe-o a um EventTriggerarquivo . An 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. 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 eventos podem ser totalmente descritos em XAML; nenhum outro código é necessário.

Para iniciar um Storyboard código in, você pode usar um EventTrigger ou usar o Begin Storyboard método da 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 seu início: você pode pausar, retomar, parar, avançar 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 conté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 similar. Ao contrário do exemplo anterior, as RepeatBehavior propriedades e AutoReverse 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))

Como não FillBehavior foi alterado de seu valor padrão, 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 como outro valor, seu código parecerá 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 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 configuraçã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 a Visão geral da animação e do sistema de temporização.

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.

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, 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 (tornadas 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 temporização cria um relógio para o DoubleAnimation e o aplica ao objeto e à propriedade especificados pelo TargetName e TargetProperty do DoubleAnimation. Nesse caso, o sistema de temporização aplica o relógio à Opacity propriedade 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 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 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 para sua posição anterior.

Para um exemplo de animação associada a dados, consulte Amostra de animação de spline-chave. Para obter mais informações sobre como a animação e o sistema de temporização funcionam, consulte Visão geral da animação e do sistema de temporização.

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 Timeline classes and Clock , 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 de 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 de eventos de tempo Descreve os eventos disponíveis nos Timeline objetos and Clock para executar código em pontos da linha do tempo, como begin, pause, resume, skip ou stop.
Tópicos explicativos 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