Cenni preliminari sulle tecniche di animazione delle proprietà
In questo argomento vengono illustrati i diversi metodi di animazione delle proprietà: storyboard, animazioni locali, orologi e animazioni per frame.
Prerequisiti
Per comprendere questo argomento, è necessario conoscere le funzionalità di animazione di base descritte in Cenni preliminari sull'animazione.
Diverse modalità di animazione
Poiché esistono diversi scenari per le proprietà di animazione, WPF fornisce numerosi approcci per tali proprietà.
Per ciascun approccio, la tabella riportata di seguito indica se può essere utilizzato per istanza, negli stili, nei modelli di controllo o nei modelli di dati; se può essere utilizzato in XAML e se consente di controllare l'animazione in modo interattivo. "Per istanza" si riferisce alla tecnica di applicare un'animazione o uno storyboard direttamente a istanze di un oggetto, piuttosto che in uno stile, un modello di controllo o un modello di dati.
Tecnica di animazione |
Scenari |
Supporta XAML |
Controllabile in modo interattivo |
|---|---|---|---|
Animazione storyboard |
Per istanza, Style, ControlTemplate, DataTemplate |
Sì |
Sì |
Animazione locale |
Per istanza |
No |
No |
Animazione orologio |
Per istanza |
No |
Sì |
Animazione per frame |
Per istanza |
No |
N/D |
Animazioni storyboard
Utilizzare uno Storyboard per definire e applicare le animazioni in XAML, per controllare in modo interattivo le animazioni dopo l'avvio, per creare una struttura ad albero complessa di animazioni o per eseguire animazioni in uno Style, ControlTemplate o DataTemplate. Perché un oggetto sia animato da uno Storyboard, è necessario che sia FrameworkElement o FrameworkContentElement oppure deve essere utilizzato per impostare FrameworkElement o FrameworkContentElement. Per ulteriori informazioni, vedere Cenni preliminari sugli storyboard.
Uno Storyboard è un tipo di contenitore Timeline speciale che fornisce informazioni sulla destinazione delle animazioni che contiene. Per eseguire animazioni con uno Storyboard, è necessario completare i tre passaggi riportati di seguito.
Dichiarare uno Storyboard e una o più animazioni.
Utilizzare le proprietà associate TargetName e TargetProperty per specificare l'oggetto di destinazione e la proprietà di ciascuna animazione.
(Solo codice) Definire un oggetto NameScope per FrameworkElement o FrameworkContentElement. Registrare i nomi degli oggetti da animare con FrameworkElement o FrameworkContentElement.
Iniziare lo Storyboard.
L'inizio di uno Storyboard consente di applicare le animazioni alle proprietà animate e di avviarle. Sono disponibili due modalità di inizio di uno Storyboard: è possibile utilizzare il metodo Begin fornito dalla classe Storyboard oppure utilizzare un'azione BeginStoryboard. L'unico modo per eseguire le animazioni in XAML è di utilizzare un'azione BeginStoryboard. Un'azione BeginStoryboard può essere utilizzata in un oggetto EventTrigger, Trigger della proprietà o DataTrigger.
Nella tabella seguente sono riportate le diverse posizioni in cui è supportata la tecnica di inizio di ciascuno Storyboard: per istanza, stile, modello di controllo e modello di dati.
Storyboard iniziato utilizzando… |
Per istanza |
Stile |
Modello di controllo |
Modello di dati |
Esempio |
|---|---|---|---|---|---|
Sì |
Sì |
Sì |
Sì |
||
BeginStoryboard e Trigger della proprietà |
No |
Sì |
Sì |
Sì |
Procedura: attivare un'animazione quando il valore di una proprietà viene modificato |
No |
Sì |
Sì |
Sì |
||
Metodo Begin |
Sì |
No |
No |
No |
Per ulteriori informazioni sugli oggetti Storyboard, vedere Cenni preliminari sugli storyboard.
Animazioni locali
Le animazioni locali costituiscono un comodo mezzo per animare una proprietà di dipendenza di qualsiasi oggetto Animatable. È possibile utilizzare le animazioni locali per applicare una singola animazione a una proprietà, senza bisogno di controllare in modo interattivo l'animazione dopo l'avvio. A differenza di un'animazione Storyboard, un'animazione locale può animare un oggetto non associato a FrameworkElement o a FrameworkContentElement. Inoltre, non è necessario definire un oggetto NameScope per questo tipo di animazione.
Le animazioni locali possono essere utilizzate solo nel codice e non possono essere definite negli stili, nei modelli di controllo o nei modelli di dati. Un'animazione locale non può essere controllata in modo interattivo dopo l'avvio.
Per animare utilizzando un'animazione locale, è necessario completare i passaggi riportati di seguito.
Creare un oggetto AnimationTimeline.
Utilizzare il metodo BeginAnimation dell'oggetto che si desidera animare per applicare AnimationTimeline alla proprietà specificata.
Nell'esempio seguente viene illustrato come animare la larghezza e il colore di sfondo di un oggetto 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;
}
}
}
/*
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;
};
};
}
}
}
}
Animazioni orologio
Utilizzare gli oggetti Clock quando si desidera eseguire animazioni senza utilizzare uno Storyboard e si desidera creare complesse strutture ad albero delle temporizzazioni o controllare in modo interattivo le animazioni dopo l'avvio. È possibile utilizzare gli oggetti Clock per animare una proprietà di dipendenza di qualsiasi oggetto Animatable.
Non è possibile utilizzare direttamente gli oggetti Clock per eseguire l'animazione negli stili, nei modelli di controllo o nei modelli di dati. (Il sistema di animazione e di temporizzazione utilizza effettivamente gli oggetti Clock per l'animazione negli stili, nei modelli di controllo e di dati ma questi oggetti Clock devono essere creati appositamente da uno Storyboard. Per ulteriori informazioni sulla relazione tra gli oggetti Storyboard e gli oggetti Clock, vedere Cenni preliminari sull'animazione e sul sistema di temporizzazione.)
Per applicare un singolo oggetto Clock a una proprietà, è necessario completare i passaggi riportati di seguito.
Creare un oggetto AnimationTimeline.
Utilizzare il metodo CreateClock di AnimationTimeline per creare un oggetto AnimationClock.
Utilizzare il metodo ApplyAnimationClock dell'oggetto che si desidera animare per applicare AnimationClock alla proprietà specificata.
Nell'esempio riportato di seguito viene illustrato come creare un oggetto AnimationClock e come applicarlo a due proprietà simili.
'
' This example shows how to create and apply
' an AnimationClock.
'
Imports System
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 myScaleTransform As ScaleTransform
Public Sub New()
Me.WindowTitle = "Opacity Animation Example"
Me.Background = Brushes.White
Dim myStackPanel As New StackPanel()
myStackPanel.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()
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.
AddHandler myButton.Click, AddressOf myButton_Clicked
myStackPanel.Children.Add(myButton)
Me.Content = myStackPanel
End Sub
' Create and apply and animation when the button is clicked.
Private Sub myButton_Clicked(ByVal sender As Object, ByVal e As RoutedEventArgs)
' Create a DoubleAnimation to animate the
' ScaleTransform.
Dim myAnimation As New DoubleAnimation(1, 5, New Duration(TimeSpan.FromSeconds(5))) ' "To" value - "From" value
myAnimation.AutoReverse = True
' 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
/*
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);
}
}
}
Per creare una struttura ad albero delle temporizzazioni e utilizzarne le proprietà animate, è necessario completare i passaggi riportati di seguito.
Utilizzare gli oggetti ParallelTimeline e AnimationTimeline per creare la struttura ad albero delle temporizzazioni.
Utilizzare CreateClock di ParallelTimeline radice per creare un oggetto ClockGroup.
Scorrere Children di ClockGroup e applicare i relativi oggetti Clock figlio. Per ciascun AnimationClock figlio, utilizzare il metodo ApplyAnimationClock dell'oggetto che si desidera animare per applicare AnimationClock alla proprietà specificata.
Per ulteriori informazioni sugli oggetti Clock, vedere Cenni preliminari sull'animazione e sul sistema di temporizzazione.
Animazione per frame: ignorare il sistema di animazione e di temporizzazione
Utilizzare questo approccio quando è necessario ignorare completamente il sistema di animazione WPF. Uno scenario di questo approccio è rappresentato dalle animazioni fisiche, dove ciascun passaggio dell'animazione richiede che gli oggetti siano ricalcolati in base all'ultima serie di interazioni dell'oggetto.
Le animazioni per frame non possono essere definite negli stili, nei modelli di controllo o nei modelli di dati.
Per l'animazione frame per frame, è necessario eseguire la registrazione per l'evento Rendering dell'oggetto che contiene gli oggetti da animare. Questo metodo per la gestione eventi viene chiamato una volta per ciascun frame. Ogni volta che WPF esegue il marshalling dei dati di rendering permanenti della struttura ad albero visuale nella struttura della composizione, viene chiamato il metodo per la gestione eventi.
Nel gestore eventi, eseguire i calcoli necessari per l'effetto di animazione e impostare le proprietà degli oggetti da animare con tali valori.
Per ottenere l'ora di presentazione del frame corrente, è possibile eseguire il cast dell'oggetto EventArgs associato a questo evento come RenderingEventArgs che fornisce una proprietà RenderingTime utilizzabile per ottenere l'ora di rendering del frame corrente.
Per ulteriori informazioni, vedere la pagina Rendering.
Vedere anche
Concetti
Cenni preliminari sull'animazione
Cenni preliminari sugli storyboard
Cenni preliminari sull'animazione e sul sistema di temporizzazione