Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
Este tópico descreve as diferentes abordagens para animar propriedades: storyboards, animações locais, temporizadores e animações quadro a quadro.
Pré-requisitos
Para entender este tópico, você deve estar familiarizado com os recursos básicos de animação descritos na Visão Geral da Animação.
Diferentes formas de animar
Como há muitos cenários diferentes para animar propriedades, o 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 controle ou em modelos de dados; se ele pode ser usado no XAML; e se a abordagem permite controlar 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 um estilo, modelo de controle ou modelo de dados.
| Técnica de animação | Cenários | Dá suporte a XAML | Controlável interativamente |
|---|---|---|---|
| Animação de storyboard | Por instância, Style, ControlTemplate, DataTemplate | Sim | Sim |
| Animação local | Para cada instância | Não | Não |
| Animação de relógio | Para cada instância | Não | Sim |
| Animação por quadro | Para cada instância | Não | Não aplicável |
Animações do storyboard
Use um Storyboard quando quiser definir e aplicar suas animações em XAML, controlar interativamente suas animações depois que elas forem iniciadas, 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 a Visão geral dos Storyboards.
Um Storyboard é um tipo especial de contêiner Timeline que fornece informações de direcionamento para as animações que ele contém. Para animar com um Storyboard, conclua as três etapas a seguir.
Declare uma Storyboard e uma ou mais animações.
Use as propriedades anexadas TargetName e TargetProperty para especificar o objeto de destino e a propriedade de cada animação.
(Somente código) Definir um NameScope para um FrameworkElement ou FrameworkContentElement. Registre os nomes dos objetos para animar com FrameworkElement ou FrameworkContentElement.
Inicie o Storyboard.
Iniciar uma Storyboard aplica animações às propriedades que são animadas e as inicia. Há duas maneiras de começar um Storyboard: você pode usar o método Begin fornecido pela classe Storyboard, ou pode usar uma ação BeginStoryboard. A única maneira de animar em XAML é usar uma BeginStoryboard ação. Uma BeginStoryboard ação pode ser usada em um EventTrigger, uma propriedade Trigger ou um DataTrigger.
A tabela a seguir mostra os diferentes locais em que cada Storyboard técnica de início tem suporte: por instância, estilo, modelo de controle e modelo de dados.
| O processamento do storyboard é iniciado usando... | Para cada instância | Estilo | Modelo de controle | Modelo de dados | Exemplo |
|---|---|---|---|---|---|
| BeginStoryboard e um EventTrigger | Sim | Sim | Sim | Sim | Animar uma propriedade usando um storyboard |
| BeginStoryboard e uma propriedade Trigger | Não | Sim | Sim | Sim | Disparar uma animação quando um valor de propriedade for alterado |
| BeginStoryboard e um DataTrigger | Não | Sim | Sim | Sim | Como disparar uma animação quando os dados são alterados |
| método Begin | Sim | Não | Não | Não | Animar uma propriedade usando um storyboard |
Para obter mais informações sobre Storyboard objetos, consulte a Visão geral de Storyboards.
Animações locais
As animações locais fornecem uma maneira conveniente de animar uma propriedade de dependência de qualquer Animatable objeto. Use animações locais quando quiser aplicar uma única animação a uma propriedade e não precisar controlar interativamente a animação depois que ela for iniciada. Ao contrário de uma Storyboard animação, uma animação local pode animar um objeto que não está associado a um FrameworkElement ou um FrameworkContentElement. Você também não precisa definir um NameScope para esse tipo de animação.
Animações locais só podem ser usadas em 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 interativamente depois de ser iniciada.
Para animar usando uma animação local, conclua as etapas a seguir.
Crie um objeto AnimationTimeline.
Use o método BeginAnimation do objeto que você deseja animar para aplicar AnimationTimeline na propriedade especificada.
O exemplo a seguir mostra como animar a largura e a cor da tela 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.
*/
using namespace System;
using namespace System::Windows;
using namespace System::Windows::Navigation;
using namespace System::Windows::Media;
using namespace System::Windows::Media::Animation;
using namespace System::Windows::Shapes;
using namespace System::Windows::Controls;
namespace Microsoft {
namespace Samples {
namespace Animation {
namespace LocalAnimations {
// Create the demonstration.
public ref class LocalAnimationExample : Page {
public:
LocalAnimationExample ()
{
WindowTitle = "Local Animation Example";
StackPanel^ myStackPanel = gcnew StackPanel();
myStackPanel->Margin = Thickness(20);
// Create and set the Button.
Button^ aButton = gcnew Button();
aButton->Content = "A Button";
// Animate the Button's Width.
DoubleAnimation^ myDoubleAnimation = gcnew DoubleAnimation();
myDoubleAnimation->From = 75;
myDoubleAnimation->To = 300;
myDoubleAnimation->Duration = 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 = gcnew SolidColorBrush();
myBrush->Color = Colors::Blue;
ColorAnimation^ myColorAnimation = gcnew ColorAnimation();
myColorAnimation->From = Colors::Blue;
myColorAnimation->To = Colors::Red;
myColorAnimation->Duration = 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;
};
};
}
}
}
}
/*
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;
}
}
}
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
'''This sample demonstrates how to apply non-storyboard animations to a property.
'''To animate in markup, you must use storyboards.
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
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
Animações de relógio
Use Clock objetos quando quiser animar sem usar um Storyboard e você deseja criar árvores de tempo complexas ou controlar interativamente as animações após o início. Você pode usar objetos Clock para animar uma propriedade de dependência de qualquer Animatable objeto.
Você não pode usar Clock objetos diretamente para animar em estilos, modelos de controle ou modelos de dados. (O sistema de animação e tempo realmente usa Clock objetos para animar em estilos, modelos de controle e modelos de dados, mas deve criar esses Clock objetos para você a partir de um Storyboard. Para obter mais informações sobre a relação entre Storyboard objetos e Clock objetos, consulte a Visão geral da animação e do sistema de tempo.)
Para aplicar um único Clock a uma propriedade, conclua as etapas a seguir.
Crie um objeto AnimationTimeline.
Use o CreateClock método do AnimationTimeline para criar um AnimationClock.
Use o método ApplyAnimationClock do objeto que você deseja animar para aplicar AnimationClock na propriedade especificada.
O exemplo a seguir mostra como criar um AnimationClock e aplicá-lo 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);
}
}
}
'
' This example shows how to create and apply
' an AnimationClock.
'
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation
Namespace Microsoft.Samples.Animation.TimingBehaviors
Public Class AnimationClockExample
Inherits Page
Private ReadOnly myScaleTransform As ScaleTransform
Public Sub New()
WindowTitle = "Opacity Animation Example"
Background = Brushes.White
Dim myStackPanel As New StackPanel With {
.Margin = New Thickness(20)
}
' Create a button that with a ScaleTransform.
' The ScaleTransform will animate when the
' button is clicked.
Dim myButton As New Button With {
.Margin = New Thickness(50),
.HorizontalAlignment = HorizontalAlignment.Left,
.Content = "Click Me"
}
myScaleTransform = New ScaleTransform(1,1)
myButton.RenderTransform = myScaleTransform
' Associate an event handler with the
' button's Click event.
AddHandler myButton.Click, AddressOf myButton_Clicked
myStackPanel.Children.Add(myButton)
Content = myStackPanel
End Sub
' Create and apply and animation when the button is clicked.
Private Sub myButton_Clicked(sender As Object, e As RoutedEventArgs)
' Create a DoubleAnimation to animate the
' ScaleTransform.
Dim myAnimation As New DoubleAnimation(1, 5, New Duration(TimeSpan.FromSeconds(5))) With {
.AutoReverse = True
} ' "To" value - "From" value
' Create a clock the for the animation.
Dim myClock As AnimationClock = 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)
End Sub
End Class
End Namespace
Para criar uma árvore de tempo e usá-la para animar propriedades, conclua as etapas a seguir.
Use ParallelTimeline e AnimationTimeline objetos para criar a árvore de tempo.
Use o CreateClock da raiz ParallelTimeline para criar um ClockGroup.
Iterar através do Children de ClockGroup e aplicar seus objetos filho Clock. Para cada AnimationClock filho, use o ApplyAnimationClock método do objeto que você deseja animar para aplicar a AnimationClock propriedade especificada
Para obter mais informações sobre objetos Clock, consulte a Visão geral do sistema de animação e temporização.
animação Per-Frame: contornar o sistema de animação e temporização
Use essa abordagem quando precisar ignorar completamente o sistema de animação do WPF. Um cenário para essa abordagem são as animações físicas, em que cada etapa na animação requer que os objetos sejam recomputados 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, registre-se para o Rendering evento do objeto que contém os objetos que você deseja animar. Esse método de manipulador de eventos é chamado uma vez por quadro. Sempre que o WPF transfere os dados de renderização persistidos da árvore visual para a árvore de composição, o método do seu manipulador de eventos é chamado.
No manipulador de eventos, execute todos os 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 o tempo de apresentação do quadro atual, o EventArgs associado a esse evento pode ser convertido como RenderingEventArgs, que fornece uma RenderingTime propriedade que você pode usar para obter o tempo de renderização do quadro atual.
Para obter mais informações, consulte a Rendering página.
Consulte também
- Visão geral da animação
- Visão geral de storyboards
- Visão geral do sistema de temporização e animação
- Visão geral das propriedades de dependência
Colaborar conosco no GitHub
A fonte deste conteúdo pode ser encontrada no GitHub, onde você também pode criar e revisar problemas e solicitações de pull. Para obter mais informações, confira o nosso guia para colaboradores.
.NET Desktop feedback