Condividi tramite


Cenni preliminari sulle tecniche di animazione delle proprietà

Aggiornamento: novembre 2007

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

Animazione locale

Per istanza

No

No

Animazione orologio

Per istanza

No

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 di animazioni complessa ad albero 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.

  1. Dichiarare uno Storyboard e una o più animazioni.

  2. Utilizzare le proprietà associate TargetName e TargetProperty per specificare l'oggetto di destinazione e la proprietà di ciascuna animazione.

  3. (Solo codice) Definire un oggetto NameScope per FrameworkElement o FrameworkContentElement. Registrare i nomi degli oggetti da animare con FrameworkElement o FrameworkContentElement.

  4. 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

Style

Modello di controllo

Modello di dati

Esempio

BeginStoryboard e EventTrigger

Procedura: animare una proprietà utilizzando uno storyboard

BeginStoryboard e Trigger della proprietà

No

Procedura: attivare un'animazione quando il valore di una proprietà viene modificato

BeginStoryboard e DataTrigger

No

Procedura: attivare un'animazione quando i dati vengono modificati

Metodo Begin

No

No

No

Procedura: animare una proprietà utilizzando uno storyboard

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.

  1. Creare un oggetto AnimationTimeline.

  2. 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;
        }
    }

}

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.

  1. Creare un oggetto AnimationTimeline.

  2. Utilizzare il metodo CreateClock di AnimationTimeline per creare un oggetto AnimationClock.

  3. 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.
*/

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.

  1. Utilizzare gli oggetti ParallelTimeline e AnimationTimeline per creare la struttura ad albero delle temporizzazioni.

  2. Utilizzare CreateClock di ParallelTimeline radice per creare un oggetto ClockGroup.

  3. 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. Per un esempio, vedere Esempio di animazione per frame.

Vedere anche

Concetti

Cenni preliminari sull'animazione

Cenni preliminari sugli storyboard

Cenni preliminari sull'animazione e sul sistema di temporizzazione

Cenni preliminari sulle proprietà di dipendenza