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 plano de fundo ou aplicando uma animação Transform, você pode criar transições de tela dramáticas ou fornecer dicas visuais úteis.

Esta visão geral fornece uma introdução ao sistema de animação e temporização 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 temporização ou usar bibliotecas personalizadas especiais. O WPF inclui um sistema de temporização eficiente que é exposto por meio de código gerenciado e XAML e que está profundamente integrado à estrutura do WPF. A animação WPF facilita a animação de controles e outros objetos gráficos.

O WPF lida com todo o trabalho de bastidores de gerenciar um sistema de temporização e redesenhar a tela de forma eficiente. 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 temporização, as animações do WPF podem ser mais fáceis de usar. O mais importante é que, no WPF, você anima objetos aplicando animação a suas propriedades individuais. Por exemplo, para fazer um elemento de estrutura crescer, você anima suas Width e Height propriedades. Para fazer um objeto desaparecer da exibiçã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ê pode criar o seu próprio. Consulte a Visão geral de animações personalizadas.)

WPF contém muitos objetos que têm IAnimatable propriedades. Controles como Button e , e também Panel e TabControlShape 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 , que é um tipo de animação que gera Double valores, para animar a Opacity propriedade de um DoubleAnimationRectanglearquivo . Como resultado, o Rectangle faes entra e sai da vista.

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

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

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

A seguir mostra como criar um elemento em um RectangleStackPanel código in.

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

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

    A seguir mostra 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. A seguir mostra como definir o Duration para cinco segundos em XAML.

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

    A seguir mostra como definir o Duration para cinco segundos no código.

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

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

  3. O código anterior mostrou uma animação que faz a transição de para , o que faz com que o elemento de destino desapareça de 1.0 completamente opaco para 0.0completamente invisível. Para fazer com que o elemento volte à exibição 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. A seguir mostra como definir as AutoReverse propriedades e RepeatBehavior em XAML.

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

    A seguir mostra como definir as AutoReverse propriedades e RepeatBehavior no código.

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

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

Parte 2: criar um storyboard

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

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

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

    Para criar o Storyboard 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 o Storyboard e adicione a animação como seu filho.

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

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

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

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

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

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)

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

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

    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 Visão geral de storyboards.

Parte 3 (XAML): associar o storyboard com um gatilho

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

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

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

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

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

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Begin(Me)
End Sub

Exemplo completo

A seguir mostra como criar um retângulo que desaparece e desaparece da exibição em XAML.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel Margin="10">
            <Rectangle
                Name="MyRectangle"
                Width="100" 
                Height="100"
                Fill="Blue">
                <Rectangle.Triggers>
                    <!-- Animates the rectangle's opacity. -->
                    <EventTrigger RoutedEvent="Rectangle.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="MyRectangle" 
                                    Storyboard.TargetProperty="Opacity"
                                    From="1.0" To="0.0" Duration="0:0:5" 
                                    AutoReverse="True" RepeatBehavior="Forever" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Rectangle.Triggers>
            </Rectangle>
        </StackPanel>
    </Grid>
</Window>

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 , como a Width propriedade de um Doubleelemento, use uma animação que produza 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:

  • <Animação de tipo>

    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.

  • <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. Animações de quadro chave são descritas detalhadamente 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, quando você a implementa, anima um <valor Type>. Essa classe serve como a classe base para <Type>Animation e <Type>AnimationUsingKeyFrames classes. 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 uma <animação de tipo>>KeyFrame.<

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 ou de um GradientStopSolidColorBrush .
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Animar o de um ou o Width de um DockPanelButton.Height
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Animar a Center posição de um EllipseGeometryarquivo .
String Nenhum StringAnimationUsingKeyFrames Nenhum Animar o de um ou o Text de um TextBlockButton.Content

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: seu Duration, quantas vezes ele é repetido e até mesmo quão rápido o tempo progride para ele.

Como uma animação é um , ela também representa um Timelinesegmento de tempo. Uma animação também calcula os valores de saída à medida que avança pelo 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, 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 código in é usar o método para criar um DurationTimeSpan, em seguida, declarar uma nova Duration estrutura usando esse TimeSpan.FromSeconds

Para obter mais informações sobre Duration valores e a sintaxe XAML (Extensible Application Markup Language) completa, 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 seu Duration, sendo reproduzida 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, 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 ela 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 difere de atribuir um nome a um FrameworkElementFreezable 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 ou um FrameworkElementFreezable, consulte a seção Hierarquia de herança de sua documentação de referência.

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

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

As seções a seguir fornecem um exemplo de nomeação de um elemento em XAML e código. Para obter informações mais detalhadas sobre 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 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 eventos podem ser totalmente descritos em XAML; nenhum outro código é necessário.

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

Controlar interativamente um storyboard

O exemplo anterior mostrou como iniciar um quando um Storyboard evento ocorre. Você também pode controlar interativamente um Storyboard depois que ele começa: você pode pausar, retomar, parar, adiantá-lo para seu 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 de 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 mantém Filling seu valor de saída final.

O DoubleAnimation no exemplo anterior não termina porque sua RepeatBehavior propriedade é 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 ele FillBehavior não foi alterado de seu valor padrão, que é HoldEnd, a animação mantém seu valor final, 0, quando termina. Portanto, o do retângulo permanece em 0 após o Opacity término da animação. Se você definir o Opacity do retângulo para outro valor, seu código parece não ter efeito, porque a animação ainda está afetando a Opacity propriedade.

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

Observe que, embora a definição de um valor de propriedade que tenha uma Active animação OR 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 vinculada a dados ou animada; Por exemplo, você pode animar a Duration propriedade de um DoubleAnimationarquivo . 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 (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 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 , o Storyboardrelógio não é aplicado a nenhuma propriedade. Seu objetivo é 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 com que uma animação reflita as alterações, reaplique seu storyboard usando um BeginStoryboard ou o Begin método. Quando você usa qualquer um desses métodos, a animação é reiniciada. No código, você pode usar o método para deslocar o Seek 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 temporização usa as Timeline classes e 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 Timeline eventos disponíveis no e Clock objetos para executar código em pontos na linha do tempo, como iniciar, pausar, retomar, ignorar ou parar.
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