Visão geral de técnicas de animação de propriedades

Este tópico descreve as diferentes abordagens para animar propriedades: storyboards, animações locais, relógios e animações por quadro.

Pré-requisitos

Para entender esse tópico, você deve estar familiarizado com os recursos básicos de animação descritos em Revisão de Animação.

Diferentes maneiras de animar

Como há muitos cenários diferentes para animação de propriedades, WPF fornece várias abordagens para animar propriedades.

Para cada abordagem, a tabela a seguir indica se ela pode ser usada por instância, em estilos, em modelos de controles, ou em modelos de dados; se ela pode ser usada no XAML; e se a abordagem permite que você controle interativamente a animação. "Por instância" refere-se à técnica de aplicar uma animação ou storyboard diretamente às instâncias de um objeto, em vez de em um estilo, modelo de controle ou modelo de dados.

Animação storyboard

Use um Storyboard quando você deseja definir e aplicar suas animações em XAML, controlar as animações interativamente após elas iniciarem, criar uma árvore complexa de animações ou animar em um Style,ControlTemplate ou DataTemplate. Para que um objeto seja animado por um Storyboard, ele deve ser um FrameworkElement ou FrameworkContentElement, ou deve ser usado para definir um FrameworkElement ou FrameworkContentElement. Para obter mais detalhes, consulte Visão geral sobre Storyboards.

Um Storyboard é um tipo especial de recipiente Timeline que fornece informações de direcionamento para as animações que ele contém. Para animar com um Storyboard, você completa as três etapas seguintes.

1. Declare um Storyboard e uma ou mais animações.

2. Use as propriedades anexadas TargetName e TargetProperty para especificar o objeto e a propriedade de destino de cada animação.

3. (Código somente) Defina um NameScope para um FrameworkElement ou FrameworkContentElement. Registrar os nomes dos objetos para animar com aquele FrameworkElement ou FrameworkContentElement.

4. Inicie o Storyboard.

Iniciar um Storyboard aplica animações às propriedades que elas animam e as inicia. Há duas maneiras para iniciar um Storyboard: Você pode usar o Begin método fornecido pela Storyboard classe, ou você pode usar um BeginStoryboard ação. A única maneira de animar em XAML é usar um BeginStoryboard ação. UM BeginStoryboard ação pode ser usada em um EventTrigger, propriedade Trigger, ou um DataTrigger.

A tabela a seguir mostra diferentes lugares onde cada Storyboard começar a técnica é suportada: -instância, estilo, modelo de controle e modelo de dados.

Para obter mais informações sobre objetos Storyboard, consulte Visão geral sobre Storyboards.

Animações locais

Animações locais fornecem uma maneira conveniente de animar uma propriedade de dependência de qualquer objeto Animatable. Use animações locais quando você deseja aplicar uma única animação a uma propriedade e você não precisa controlar interativamente a animação após ela ter iniciado. Ao contrário de uma animação Storyboard, uma animação local pode animar um objeto que não esteja associado a um FrameworkElement ou a um FrameworkContentElement. Você também não precisa definir um NameScope para este tipo de animação.

Animações locais só podem ser usadas no código e não podem ser definidas em estilos, modelos de controle, ou modelos de dados. Uma animação local não pode ser controlada de forma interativa depois que ela é iniciada.

Para animar usando um animação local, complete as seguintes etapas.

1. Crie um objeto AnimationTimeline.

2. Use o método BeginAnimation do objeto que você deseja animar para aplicar o AnimationTimeline à propriedade que você especificar.

O seguinte exemplo mostra como animar a largura e cor de fundo de um Button.

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
'''This sample demonstrates how to apply non-storyboard animations to a property.
'''To animate in markup, you must use storyboards.
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

Imports System
Imports System.Windows
Imports System.Windows.Navigation
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports System.Windows.Controls

Namespace Microsoft.Samples.Animation.LocalAnimations

    ' Create the demonstration.
    Public Class LocalAnimationExample
        Inherits Page

        Public Sub New()

            WindowTitle = "Animate Property Example"
            Dim myStackPanel As New StackPanel()
            myStackPanel.Margin = New Thickness(20)

            ' Create and set the Button.
            Dim aButton As New Button()
            aButton.Content = "A Button"

            ' Animate the Button's Width.
            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 75
            myDoubleAnimation.To = 300
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
            myDoubleAnimation.AutoReverse = True
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Apply the animation to the button's Width property.
            aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation)

            ' Create and animate a Brush to set the button's Background.
            Dim myBrush As New SolidColorBrush()
            myBrush.Color = Colors.Blue

            Dim myColorAnimation As New ColorAnimation()
            myColorAnimation.From = Colors.Blue
            myColorAnimation.To = Colors.Red
            myColorAnimation.Duration = New Duration(TimeSpan.FromMilliseconds(7000))
            myColorAnimation.AutoReverse = True
            myColorAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Apply the animation to the brush's Color property.
            myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation)
            aButton.Background = myBrush

            ' Add the Button to the panel.
            myStackPanel.Children.Add(aButton)
            Me.Content = myStackPanel
        End Sub
    End Class
End Namespace

/*

   This sample demonstrates how to apply non-storyboard animations to a property.
   To animate in markup, you must use storyboards.

*/

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

namespace Microsoft.Samples.Animation.LocalAnimations
{

    // Create the demonstration.
    public class LocalAnimationExample : Page 
    {




        public LocalAnimationExample()
        {


            WindowTitle = "Local Animation Example";
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);                     


            // Create and set the Button.
            Button aButton = new Button();
            aButton.Content = "A Button";

            // Animate the Button's Width.
            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 75;
            myDoubleAnimation.To = 300;
            myDoubleAnimation.Duration =  new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Apply the animation to the button's Width property.
            aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation);       

            // Create and animate a Brush to set the button's Background.
            SolidColorBrush myBrush = new SolidColorBrush();
            myBrush.Color = Colors.Blue;            

            ColorAnimation myColorAnimation = new ColorAnimation();
            myColorAnimation.From = Colors.Blue;
            myColorAnimation.To = Colors.Red;
            myColorAnimation.Duration =  new Duration(TimeSpan.FromMilliseconds(7000));
            myColorAnimation.AutoReverse = true;
            myColorAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Apply the animation to the brush's Color property.
            myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation);           
            aButton.Background = myBrush;

            // Add the Button to the panel.
            myStackPanel.Children.Add(aButton);
            this.Content = myStackPanel;
        }
    }

}

Animação por relógio

Use objetos Clock quando você deseja animar sem usar um Storyboard e você deseja criar árvores complexas de tempo ou controlar interativamente animações após elas terem iniciado. Você pode usar objetos Clock para animar uma propriedade de dependência de qualquer objeto Animatable.

Não é possível usar objetos Clock diretamente para animar em estilos, modelos de controle ou modelos de dados. (O sistema de animação e timing, na verdade, usa objetos Clock para animar em estilos, modelos de controle e modelos de dados, mas ele deverá criar esses objetos Clock para você de um Storyboard. Para mais informações sobre a relação entre objetos Storyboard e Clock, consulte o Visão Geral de Animação e Sistema de Tempo.

Para aplicar um único Clock a uma propriedade, você completa as etapas a seguir.

1. Crie um objeto AnimationTimeline.

2. Use o método CreateClock de AnimationTimeline para criar um AnimationClock.

3. Use o método ApplyAnimationClock do objeto que você deseja animar para aplicar o AnimationClock à propriedade que você especificar.

O exemplo a seguir mostra como criar um AnimationClock e aplicá-la a duas propriedades semelhantes.

/*
    This example shows how to create and apply
    an AnimationClock.
*/

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


namespace Microsoft.Samples.Animation.TimingBehaviors
{
    public class AnimationClockExample : Page
    {

        ScaleTransform myScaleTransform;

        public AnimationClockExample()
        {

            this.WindowTitle = "Opacity Animation Example";
            this.Background = Brushes.White;
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);

            // Create a button that with a ScaleTransform.
            // The ScaleTransform will animate when the
            // button is clicked.
            Button myButton = new Button();
            myButton.Margin = new Thickness(50);
            myButton.HorizontalAlignment = HorizontalAlignment.Left;
            myButton.Content = "Click Me";           
            myScaleTransform = new ScaleTransform(1,1);
            myButton.RenderTransform = myScaleTransform;


            // Associate an event handler with the
            // button's Click event.
            myButton.Click += new RoutedEventHandler(myButton_Clicked);

            myStackPanel.Children.Add(myButton);
            this.Content = myStackPanel;
        }

        // Create and apply and animation when the button is clicked.
        private void myButton_Clicked(object sender, RoutedEventArgs e)
        {

            // Create a DoubleAnimation to animate the
            // ScaleTransform.
            DoubleAnimation myAnimation = 
                new DoubleAnimation(
                    1, // "From" value
                    5, // "To" value 
                    new Duration(TimeSpan.FromSeconds(5))
                );
            myAnimation.AutoReverse = true;

            // Create a clock the for the animation.
            AnimationClock myClock = myAnimation.CreateClock();            

            // Associate the clock the ScaleX and
            // ScaleY properties of the button's
            // ScaleTransform.
            myScaleTransform.ApplyAnimationClock(
                ScaleTransform.ScaleXProperty, myClock);
            myScaleTransform.ApplyAnimationClock(
                ScaleTransform.ScaleYProperty, myClock);
        }
    }
}

Para criar uma árvore de tempo e usá-la para animar propriedades, você completa as etapas a seguir.

1. Use objetos ParallelTimeline e AnimationTimeline para criar a árvore de tempo.

2. Use o CreateClock do ParallelTimeline raiz para criar um ClockGroup.

3. Percorrer o Children do ClockGroup e aplicar seus objetos filhos Clock. Para cada AnimationClock filho, use o método ApplyAnimationClock do objeto que você deseja animar para aplicar o AnimationClock à propriedade que você especificar.

Para obter mais informações sobre objetos Clock, consulte Visão Geral de Animação e Sistema de Tempo.

Por quadro de animação: Ignorar o sistema de tempo e animação

Utilize esta abordagem quando você precisar contornar completamente o sistema de animação do WPF. Um cenário para essa abordagem são animações físicas, nas quais cada etapa na animação requer que objetos sejam recalculados com base no último conjunto de interações de objeto.

Animações por quadro não podem ser definidas dentro de estilos, modelos de controle ou modelos de dados.

Para animar quadro-a-quadro, você registra para o evento Rendering do objeto que contém os objetos que você deseja animar. O método manipulador de evento é chamado uma vez por quadro. Cada vez que o WPF realizar marshaling de dados de renderização persistidos na árvore visual pela árvore de composição, seu método manipulador de evento é chamado.

No seu manipulador de eventos, execute quaisquer cálculos necessários para o efeito de animação e defina as propriedades dos objetos que você deseja animar com esses valores.

Para obter a hora de apresentação para o quadro atual, o EventArgs associado com esse evento pode ser convertido como RenderingEventArgs, que fornece uma propriedade RenderingTime que você pode utilizar para obter o tempo de processamento do quadro atual.

Para mais informações, consulte a página Rendering. Para um exemplo, veja Exemplo de animação por quadro.

Consulte também

Conceitos

Revisão de Animação

Visão geral sobre Storyboards

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

Visão geral sobre propriedades de dependência