Cenni preliminari sulle tecniche di animazione delle proprietà

In questo argomento vengono descritti i diversi approcci per l'animazione delle proprietà: storyboard, animazioni locali, timer e animazioni per fotogramma.

Prerequisiti

Per comprendere questo argomento, è necessario avere familiarità con le funzionalità di animazione di base descritte in Panoramica dell'animazione.

Modi diversi per animare

Poiché esistono molti scenari diversi per l'animazione delle proprietà, WPF offre diversi approcci per l'animazione delle proprietà.

Per ogni approccio, la tabella seguente indica se può essere usata per ogni istanza, negli stili, nei modelli di controllo o nei modelli di dati; se può essere usato in XAML; e se l'approccio consente di controllare in modo interattivo l'animazione. "Per istanza" si riferisce alla tecnica di applicazione di 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.

Animazioni della sceneggiatura visiva

Usa un oggetto Storyboard quando vuoi definire e applicare le animazioni in XAML, controllare in modo interattivo le animazioni dopo l'avvio, creare un albero complesso di animazioni, o animare in un oggetto Style, ControlTemplate o DataTemplate. Affinché un oggetto venga animato da un Storyboardoggetto , deve essere un FrameworkElement oggetto o FrameworkContentElementoppure deve essere utilizzato per impostare un FrameworkElement oggetto o FrameworkContentElement. Per ulteriori dettagli, consultare la Panoramica sugli storyboard.

Un Storyboard è un tipo speciale di contenitore Timeline che fornisce informazioni di destinazione per le animazioni contenute. Per animare con un Storyboard, completa i seguenti tre passaggi.

1. Dichiarare un Storyboard oggetto e una o più animazioni.

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

3. Definire un NameScope per un FrameworkElement o FrameworkContentElement. Registra i nomi degli oggetti da animare con quel FrameworkElement o FrameworkContentElement.

4. Avviare il Storyboard.

L'inizio di un Storyboard oggetto applica animazioni alle proprietà che animano e le avvia. Esistono due modi per iniziare un oggetto Storyboard: è possibile usare il Begin metodo fornito dalla Storyboard classe oppure è possibile usare un'azione BeginStoryboard . L'unico modo per animare in XAML consiste nell'usare un'azione BeginStoryboard . Un'azione BeginStoryboard può essere usata in una EventTriggerproprietà Trigger, o in un oggetto DataTrigger.

La tabella seguente illustra le diverse posizioni in cui ogni Storyboard tecnica di inizio è supportata: per istanza, stile, modello di controllo e modello di dati.

Per ulteriori informazioni sugli oggetti Storyboard, vedere Cenni preliminari sugli storyboard.

Animazioni locali

Le animazioni locali offrono un modo pratico per animare una proprietà di dipendenza di qualsiasi Animatable oggetto. Usa animazioni locali quando vuoi applicare una singola animazione a una proprietà e non devi controllare in modo interattivo l'animazione dopo l'avvio. A differenza di un'animazioneStoryboard, un'animazione locale può animare un oggetto che non è associato a un FrameworkElement o a un FrameworkContentElement. Non è necessario definire un NameScope per questo tipo di animazione.

Le animazioni locali possono essere usate solo nel codice e non possono essere definite in stili, modelli di controllo o modelli di dati. Un'animazione locale non può essere controllata in modo interattivo dopo l'avvio.

Per animare usando un'animazione locale, completare la procedura seguente.

1. Creare un oggetto AnimationTimeline.

2. Utilizzare il BeginAnimation metodo dell'oggetto da animare per applicare l'oggetto AnimationTimeline alla proprietà specificata.

Nell'esempio seguente viene illustrato come animare la larghezza e il colore di sfondo di un 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

Animazioni orologio

Usa gli oggetti Clock quando vuoi animare senza utilizzare un Storyboard e creare alberi temporali complessi o controllare interattivamente le animazioni dopo che sono iniziate. È possibile utilizzare oggetti Clock per animare una proprietà di dipendenza di qualsiasi Animatable oggetto.

Non è possibile utilizzare Clock oggetti direttamente per animare gli stili, i modelli di controllo o i modelli di dati. Il sistema di animazione e temporizzazione utilizza effettivamente Clock oggetti per animare stili, modelli di controllo e modelli di dati, ma deve creare quegli Clock oggetti per te da un Storyboard. Per ulteriori informazioni sulla relazione tra Storyboard oggetti e Clock oggetti, vedere la sezione Panoramica del sistema di animazione e temporizzazione.

Per applicare un singolo elemento Clock a una proprietà, completa la procedura seguente.

1. Creare un oggetto AnimationTimeline.

2. Usa il metodo CreateClock di AnimationTimeline per creare un AnimationClock.

3. Utilizzare il ApplyAnimationClock metodo dell'oggetto da animare per applicare l'oggetto AnimationClock alla proprietà specificata.

Nell'esempio seguente viene illustrato come creare un AnimationClock e 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);
        }
    }
}

'
'    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

Per creare un albero di temporizzazione e usarlo per animare le proprietà, completare i passaggi seguenti.

1. Utilizzare ParallelTimeline oggetti e AnimationTimeline per creare l'albero di temporizzazione.

2. Usare l'oggetto CreateClock della radice ParallelTimeline per creare un oggetto ClockGroup.

3. Iterare attraverso l'oggetto Children del ClockGroup e applicare i suoi oggetti figlio Clock. Per ogni AnimationClock elemento figlio, utilizza il metodo ApplyAnimationClock dell'oggetto che vuoi animare per applicare il AnimationClock alla proprietà specificata

Per altre informazioni sugli oggetti Clock, vedere Cenni preliminari sul sistema di animazione e temporizzazione.

Animazione Per-Frame: aggirare il sistema di animazione e temporizzazione

Usare questo approccio quando è necessario ignorare completamente il sistema di animazione WPF. Uno scenario per questo approccio è costituito dalle animazioni fisiche, in cui ogni passaggio dell'animazione richiede la ricompilazione degli oggetti in base all'ultimo set di interazioni tra oggetti.

Le animazioni per fotogrammi non possono essere definite all'interno di stili, modelli di controllo o modelli di dati.

Per animare fotogramma per fotogramma, ci si registra all'evento Rendering dell'oggetto che contiene gli oggetti che si vogliono animare. Questo metodo del gestore eventi viene chiamato una volta per fotogramma. Ogni volta che WPF trasferisce i dati di rendering persistenti dall'albero visivo all'albero di composizione, viene chiamato il metodo del gestore degli eventi.

Nel gestore eventi eseguire i calcoli necessari per l'effetto di animazione e impostare le proprietà degli oggetti da animare con questi valori.

Per ottenere l'ora di presentazione del frame corrente, si può fare 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 altre informazioni, vedere la pagina Rendering.

Vedere anche

• Panoramica dell'animazione
• Panoramica degli Storyboards
• Cenni preliminari sul sistema di temporizzazione e animazione
• Panoramica delle proprietà di dipendenza