Condividi tramite

Cenni preliminari sull'animazione

  • Articolo

Windows Presentation Foundation (WPF) offre un potente set di funzionalità di grafica e layout che consentono di creare interfacce utente accattivanti e documenti accattivanti. L'animazione può migliorare ulteriormente l'aspetto e la facilità di uso dell'interfaccia utente. Animando semplicemente un colore di sfondo o applicando un'animazione Transform, è possibile creare transizioni di schermo drammatiche o fornire segnali visivi utili.

Questa panoramica offre un'introduzione all'animazione e al sistema di temporizzazione WPF. È incentrato sull'animazione di oggetti WPF usando storyboard.

Introduzione alle animazioni

L'animazione è un'illusione ottica creata scorrendo rapidamente una serie di immagini, ognuna leggermente diversa dall'ultima. Il cervello percepisce il gruppo di immagini come un'unica scena che si modifica. Nei film questa illusione viene creata usando fotocamere che registrano molte fotografie (fotogrammi) al secondo. Quando i fotogrammi vengono riprodotti con un proiettore, il pubblico vede un'immagine in movimento.

L'animazione in un computer è simile. Un programma che applica una dissolvenza in uscita al disegno di un rettangolo funziona ad esempio nel modo indicato di seguito.

  • Il programma crea un timer.

  • Il programma controlla il timer a intervalli stabiliti per rilevare la quantità di tempo trascorso.

  • Ogni volta che il programma controlla il timer, calcola anche il valore di opacità per il rettangolo in base al tempo trascorso.

  • Il programma aggiorna quindi il rettangolo in base al nuovo valore e lo ridisegna.

Prima di WPF, gli sviluppatori di Microsoft Windows dovevano creare e gestire i propri sistemi di temporizzazione o usare librerie personalizzate speciali. WPF include un sistema di temporizzazione efficiente esposto tramite codice gestito e XAML ed è completamente integrato nel framework WPF. L'animazione WPF semplifica l'animazione dei controlli e di altri oggetti grafici.

WPF gestisce tutte le operazioni in background di gestione di un sistema di temporizzazione e di ridisegnare lo schermo in modo efficiente. grazie a classi di temporizzazione che consentono di concentrarsi sugli effetti da creare anziché sulle operazioni per ottenerli. WPF semplifica anche la creazione di animazioni personalizzate esponendo classi di base di animazione da cui le classi possono ereditare, per produrre animazioni personalizzate. che sfruttano molti vantaggi in termini di prestazioni delle classi di animazione standard.

Sistema di animazione delle proprietà WPF

Se si conoscono alcuni concetti importanti relativi al sistema di temporizzazione, le animazioni WPF possono essere più facili da usare. La cosa più importante è che, in WPF, si animano gli oggetti applicando l'animazione alle singole proprietà. Ad esempio, per aumentare l'aumento di un elemento framework, animarne Width le proprietà e Height . Per rendere un oggetto dissolvente dalla visualizzazione, animarne la Opacity proprietà.

Affinché una proprietà disponga di funzionalità di animazione, devono essere soddisfatti i tre requisiti seguenti:

  • Deve essere una proprietà di dipendenza.

  • Deve appartenere a una classe che eredita da DependencyObject e implementa l'interfaccia IAnimatable .

  • Deve essere disponibile un tipo di animazione compatibile. Se WPF non ne fornisce uno, è possibile crearne uno personalizzato. Vedere Cenni preliminari sulle animazioni personalizzate.

WPF contiene molti oggetti con IAnimatable proprietà. Controlli quali Button e TabControle anche Panel gli Shape oggetti ereditano da DependencyObject. La maggior parte delle proprietà di tali oggetti è rappresentata da proprietà di dipendenza.

È possibile usare le animazioni quasi ovunque, ad esempio in stili e modelli del controllo. Le animazioni non devono necessariamente essere oggetti visivi ed è possibile animare oggetti che non appartengono all'interfaccia utente se soddisfano i criteri descritti in questa sezione.

Esempio - Applicare a un elemento una dissolvenza in entrata e in uscita

In questo esempio viene illustrato come usare un'animazione WPF per animare il valore di una proprietà di dipendenza. Usa un DoubleAnimationoggetto , che è un tipo di animazione che genera Double valori, per animare la Opacity proprietà di un oggetto Rectangle. Di conseguenza, la Rectangle dissolvenza in e fuori vista.

La prima parte dell'esempio crea un Rectangle elemento . I passaggi che seguono illustrano come creare un'animazione e applicarla alla proprietà del Opacity rettangolo.

Di seguito viene illustrato come creare un Rectangle elemento in un StackPanel in XAML.

<StackPanel Margin="10">
    <Rectangle
        Name="MyRectangle"
        Width="100" 
        Height="100"
        Fill="Blue">
    </Rectangle>
</StackPanel>

Di seguito viene illustrato come creare un Rectangle elemento in un StackPanel oggetto nel codice .

var myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);

var myRectangle = new Rectangle();
myRectangle.Name = "myRectangle";
this.RegisterName(myRectangle.Name, myRectangle);
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = Brushes.Blue;
myPanel.Children.Add(myRectangle);
this.Content = myPanel;

Dim myPanel As New StackPanel()
myPanel.Margin = New Thickness(10)

Dim myRectangle As New Rectangle()
myRectangle.Name = "myRectangle"
Me.RegisterName(myRectangle.Name, myRectangle)
myRectangle.Width = 100
myRectangle.Height = 100
myRectangle.Fill = Brushes.Blue

myPanel.Children.Add(myRectangle)
Me.Content = myPanel

Parte 1 - Creare un oggetto DoubleAnimation

Un modo per rendere un elemento dissolvenza in entrata e in uscita dalla visualizzazione consiste nell'animare la relativa Opacity proprietà. Poiché la Opacity proprietà è di tipo Double, è necessaria un'animazione che produce valori double. Un DoubleAnimation è un'animazione di questo tipo. Un DoubleAnimation oggetto crea una transizione tra due valori double. Per specificare il valore iniziale, impostarne la From proprietà. Per specificare il valore finale, impostarne la To proprietà.

  1. Un valore di opacità rende 1.0 l'oggetto completamente opaco e un valore di opacità lo 0.0 rende completamente invisibile. Per eseguire la transizione dell'animazione da 1.0 a 0.0 impostarne la From proprietà su 1.0 e la relativa To proprietà su 0.0. Di seguito viene illustrato come creare un DoubleAnimation oggetto in XAML.

    <DoubleAnimation From="1.0" To="0.0" />

    Di seguito viene illustrato come creare un oggetto DoubleAnimation nel codice.

    var myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;

    Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0

  2. Successivamente, è necessario specificare un oggetto Duration. L'oggetto Duration di un'animazione specifica il tempo necessario per passare dal valore iniziale al valore di destinazione. Di seguito viene illustrato come impostare su Duration cinque secondi in XAML.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />

    Di seguito viene illustrato come impostare su Duration cinque secondi nel codice.

    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

    myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

  3. Il codice precedente ha mostrato un'animazione che passa da 1.0 a 0.0, che fa dissolvere l'elemento di destinazione da completamente opaco a completamente invisibile. Per rendere l'elemento di nuovo in visualizzazione dopo la sua scomparsa, impostare la AutoReverse proprietà dell'animazione su true. Per ripetere l'animazione per un periodo illimitato, impostarne la RepeatBehavior proprietà su Forever. Di seguito viene illustrato come impostare le AutoReverse proprietà e RepeatBehavior in XAML.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>

    Di seguito viene illustrato come impostare le AutoReverse proprietà e RepeatBehavior nel codice.

    myDoubleAnimation.AutoReverse = true;
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

    myDoubleAnimation.AutoReverse = True
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

Parte 2 - Creare uno storyboard

Per applicare un'animazione a un oggetto, crei un Storyboard oggetto e usi le TargetName proprietà associate e TargetProperty per specificare l'oggetto e la proprietà da animare.

  1. Storyboard Creare e aggiungere l'animazione come figlio. Di seguito viene illustrato come creare l'oggetto Storyboard in XAML.

    <Storyboard>
    <DoubleAnimation
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    Per creare l'oggetto Storyboard nel codice, dichiarare una Storyboard variabile a livello di classe.

    public partial class MainWindow : Window
{
    private Storyboard myStoryboard;

    Class MainWindow

    Private myStoryboard As Storyboard

    Inizializzare Storyboard quindi e aggiungere l'animazione come figlio.

    myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

    myStoryboard = New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

  2. Deve Storyboard sapere dove applicare l'animazione. Utilizzare la Storyboard.TargetName proprietà associata per specificare l'oggetto da animare. Di seguito viene illustrato come impostare il nome di destinazione di su DoubleAnimation MyRectangle in XAML.

    <Storyboard>
    <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    Di seguito viene illustrato come impostare il nome di destinazione di su DoubleAnimation MyRectangle nel codice.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)

  3. Utilizzare la TargetProperty proprietà associata per specificare la proprietà da animare. Di seguito viene illustrato come l'animazione è configurata per impostare come destinazione la Opacity proprietà di Rectangle in XAML.

    <Storyboard>
    <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    Di seguito viene illustrato come l'animazione è configurata per impostare come destinazione la Opacity proprietà di Rectangle nel codice.

    Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

    Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

Per altre informazioni sulla TargetProperty sintassi e per altri esempi, vedere Cenni preliminari sugli storyboard.

Parte 3 (XAML) - Associare lo storyboard a un trigger

Il modo più semplice per applicare e avviare un Storyboard in XAML consiste nell'usare un trigger di eventi. Questa sezione illustra come associare l'oggetto Storyboard a un trigger in XAML.

  1. Creare un BeginStoryboard oggetto e associarlo allo storyboard. Un BeginStoryboard è un tipo di TriggerAction che si applica e avvia un oggetto Storyboard.

    <BeginStoryboard>
  <Storyboard>
    <DoubleAnimation
      Storyboard.TargetName="MyRectangle" 
      Storyboard.TargetProperty="Opacity"
      From="1.0" To="0.0" Duration="0:0:5" 
      AutoReverse="True" RepeatBehavior="Forever" />
  </Storyboard>
</BeginStoryboard>

  2. Creare un oggetto EventTrigger e aggiungerlo BeginStoryboard alla relativa Actions raccolta. Impostare la RoutedEvent proprietà dell'oggetto EventTrigger sull'evento indirizzato che si desidera avviare .Storyboard Per altre informazioni sugli eventi indirizzati, vedere Cenni preliminari sugli eventi indirizzati.

    <!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
  <BeginStoryboard>
    <Storyboard>
      <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
  </BeginStoryboard>
</EventTrigger>

  3. Aggiungere l'oggetto EventTrigger Triggers alla raccolta di Rectangle.

    <Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>
    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Parte 3 (codice) - Associare lo storyboard a un gestore eventi

Il modo più semplice per applicare e avviare un oggetto Storyboard nel codice consiste nell'usare un gestore eventi. Questa sezione illustra come associare l'oggetto Storyboard a un gestore eventi nel codice.

  1. Registrarsi per l'evento Loaded del rettangolo.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

  2. Dichiarare il gestore eventi. Nel gestore eventi usare il Begin metodo per applicare lo storyboard.

    private void myRectangleLoaded(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin(this);
}

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Begin(Me)
End Sub

Esempio completo

Di seguito viene illustrato come creare un rettangolo che sbiadisce in XAML e fuori visualizzazione.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel Margin="10">
            <Rectangle
                Name="MyRectangle"
                Width="100" 
                Height="100"
                Fill="Blue">
                <Rectangle.Triggers>
                    <!-- Animates the rectangle's opacity. -->
                    <EventTrigger RoutedEvent="Rectangle.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="MyRectangle" 
                                    Storyboard.TargetProperty="Opacity"
                                    From="1.0" To="0.0" Duration="0:0:5" 
                                    AutoReverse="True" RepeatBehavior="Forever" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Rectangle.Triggers>
            </Rectangle>
        </StackPanel>
    </Grid>
</Window>

L'esempio seguente illustra come creare un rettangolo a cui viene applicata la dissolvenza in entrata e in uscita nel codice.

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

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;

        public MainWindow()
        {
            InitializeComponent();

            StackPanel myPanel = new StackPanel();
            myPanel.Margin = new Thickness(10);

            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 1.0;
            myDoubleAnimation.To = 0.0;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

            // Use the Loaded event to start the Storyboard.
            myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
            myPanel.Children.Add(myRectangle);
            this.Content = myPanel;
        }

        private void myRectangleLoaded(object sender, RoutedEventArgs e)
        {
            myStoryboard.Begin(this);
        }
    }
}

Imports System.Windows.Media.Animation

Class MainWindow

    Private myStoryboard As Storyboard

    Public Sub New()
        InitializeComponent()

        Dim myPanel As New StackPanel()
        myPanel.Margin = New Thickness(10)

        Dim myRectangle As New Rectangle()
        myRectangle.Name = "myRectangle"
        Me.RegisterName(myRectangle.Name, myRectangle)
        myRectangle.Width = 100
        myRectangle.Height = 100
        myRectangle.Fill = Brushes.Blue

        Dim myDoubleAnimation As New DoubleAnimation()
        myDoubleAnimation.From = 1.0
        myDoubleAnimation.To = 0.0
        myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
        myDoubleAnimation.AutoReverse = True
        myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

        myStoryboard = New Storyboard()
        myStoryboard.Children.Add(myDoubleAnimation)
        Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
        Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

        ' Use the Loaded event to start the Storyboard.
        AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

        myPanel.Children.Add(myRectangle)
        Me.Content = myPanel
    End Sub

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
        myStoryboard.Begin(Me)
    End Sub

End Class

Tipi di animazione

Poiché le animazioni generano valori di proprietà, per i diversi tipi di proprietà esistono tipi di animazione differenti. Per animare una proprietà che accetta un Doubleoggetto , ad esempio la Width proprietà di un elemento, usare un'animazione che produce Double valori. Per animare una proprietà che accetta un Pointoggetto , usare un'animazione che produce Point valori e così via. A causa del numero di tipi di proprietà diversi, esistono diverse classi di animazione nello spazio dei System.Windows.Media.Animation nomi . che fortunatamente seguono una convenzione di denominazione rigorosa che ne facilita la differenziazione:

  • <Animazione del tipo>

    Nota come animazione "From/To/By" o "di base", viene applicata tra un valore iniziale e un valore di destinazione o con l'aggiunta di un valore di offset al valore iniziale.

    • Per specificare un valore iniziale, impostare la proprietà From dell'animazione.

    • Per specificare un valore finale, impostare la proprietà To dell'animazione.

    • Per specificare un valore di offset, impostare la proprietà By dell'animazione.

    Gli esempi del presente documento usano queste animazioni perché sono le più semplici. Per informazioni dettagliate sulle animazioni From/To/By, vedere Cenni preliminari sulle animazioni From/To/By.

  • <Animazione dei>tipiUsingKeyFrames

    Le animazioni basate su fotogrammi chiave sono più efficaci delle animazioni From/To/By perché è possibile specificare un numero qualsiasi di valori di destinazione e controllarne il metodo di interpolazione. Alcuni tipi possono essere animati solo con animazioni basate su fotogrammi chiave. Per informazioni dettagliate sulle animazioni basate su fotogrammi chiave, vedere Cenni preliminari sulle animazioni con fotogrammi chiave.

  • <Animazione dei tipiUsingPath>

    Le animazioni basate su tracciato consentono di usare un tracciato geometrico per produrre valori animati.

  • <Type>AnimationBase

    Classe astratta che, quando viene implementata, anima un <valore type>. Questa classe funge da classe base per <le classi Type>Animation e <Type>AnimationUsingKeyFrames. È necessario gestire direttamente queste classi solo se si vuole creare animazioni personalizzate. In caso contrario, usa un'animazione di tipo>o un'animazione del tipo di>fotogramma<chiave.<

Nella maggior parte dei casi, è consigliabile usare le <classi Di animazione del tipo>, ad esempio DoubleAnimation e ColorAnimation.

La tabella seguente illustra diversi tipi di animazione comuni e alcune proprietà con cui vengono usati.

Tipo di proprietà Animazione (From/To/By) di base corrispondente Animazione basata su fotogrammi chiave corrispondente Animazione basata su tracciato corrispondente Esempio di utilizzo
Color ColorAnimation ColorAnimationUsingKeyFrames None Animare l'oggetto Color di un SolidColorBrush oggetto o un oggetto GradientStop.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Animare l'oggetto Width di un DockPanel oggetto o Height di un oggetto Button.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Animare la Center posizione di un oggetto EllipseGeometry.
String None StringAnimationUsingKeyFrames None Animare l'oggetto Text di un TextBlock oggetto o Content di un oggetto Button.

Animazioni come sequenze temporali

Tutti i tipi di animazione ereditano dalla Timeline classe , pertanto tutte le animazioni sono tipi specializzati di sequenze temporali. Un Timeline oggetto definisce un segmento di tempo. È possibile specificare i comportamenti di temporizzazione di una sequenza temporale: , Durationil numero di volte in cui viene ripetuto e anche il tempo di avanzamento rapido per esso.

Poiché un'animazione è un Timelineoggetto , rappresenta anche un segmento di tempo. Un'animazione calcola anche i valori di output man mano che procede attraverso il segmento di tempo specificato (o Duration). Con l'avanzamento, ovvero la riproduzione, dell'animazione, viene aggiornata la proprietà associata.

Tre proprietà di intervallo usate di frequente sono Duration, AutoReversee RepeatBehavior.

Proprietà Duration

Come accennato in precedenza, una sequenza temporale rappresenta un intervallo di tempo. La lunghezza di tale segmento è determinata dalla Duration sequenza temporale, che viene in genere specificata usando un TimeSpan valore. Quando una sequenza temporale raggiunge il termine della durata, ha completato un'iterazione.

Un'animazione usa la relativa Duration proprietà per determinare il valore corrente. Se non specifichi un Duration valore per un'animazione, usa 1 secondo, ovvero l'impostazione predefinita.

La sintassi seguente mostra una versione semplificata della sintassi dell'attributo XAML (Extensible Application Markup Language) per la Duration proprietà .

ore : minuti secondi :

La tabella seguente illustra diverse Duration impostazioni e i relativi valori risultanti.

Impostazione Valore risultante
0:0:5.5 5,5 secondi.
0:30:5.5 30 minuti e 5,5 secondi.
1:30:5.5 1 ora, 30 minuti e 5,5 secondi.

Un modo per specificare un Duration oggetto nel codice consiste nell'usare il FromSeconds metodo per creare un TimeSpanoggetto , quindi dichiarare una nuova Duration struttura usando tale TimeSpanoggetto .

Per altre informazioni sui Duration valori e sulla sintassi XAML (Extensible Application Markup Language) completa, vedi la Duration struttura.

Proprietà AutoReverse

La AutoReverse proprietà specifica se una sequenza temporale viene riprodotta all'indietro dopo che raggiunge la fine del relativo Durationoggetto . Se imposti questa proprietà di animazione su true, un'animazione si inverte dopo che raggiunge la fine della proprietà Duration, riproducendo dal valore finale al valore iniziale. Per impostazione predefinita, questa proprietà è false.

RepeatBehavior

La RepeatBehavior proprietà specifica quante volte viene riprodotta una sequenza temporale. Per impostazione predefinita, alle sequenze temporali è associato un numero di iterazioni pari a 1.0, che ne determina una sola riproduzione senza alcuna ripetizione.

Per altre informazioni su queste e su altre proprietà, vedere Cenni preliminari sui comportamenti temporali.

Applicazione di un'animazione a una proprietà

Le sezioni precedenti descrivono i diversi tipi di animazioni e le relative proprietà temporali, mentre questa sezione illustra come applicare l'animazione alla proprietà da animare. Storyboard gli oggetti consentono di applicare animazioni alle proprietà. È Storyboard una sequenza temporale del contenitore che fornisce informazioni di destinazione per le animazioni contenute.

Oggetti di destinazione e proprietà

La Storyboard classe fornisce le TargetName proprietà associate e TargetProperty . Se si impostano tali proprietà in un'animazione, si indica l'oggetto da animare. Affinché un oggetto possa diventare la destinazione di un'animazione, è tuttavia necessario assegnargli un nome.

L'assegnazione di un nome a un FrameworkElement oggetto è diversa dall'assegnazione di un nome a un Freezable oggetto . La maggior parte dei controlli e dei pannelli sono elementi del framework, mentre gli oggetti più strettamente grafici, ad esempio pennelli, trasformazioni e geometrie, sono bloccabili. Se non si è certi che un tipo sia o FrameworkElement , Freezablefare riferimento alla sezione Gerarchia di ereditarietà della relativa documentazione di riferimento.

  • Per impostare una FrameworkElement destinazione di animazione, assegnargli un nome impostandone la Name proprietà. Nel codice è necessario usare anche il metodo per registrare il RegisterName nome dell'elemento con la pagina a cui appartiene.

  • Per rendere un oggetto una Freezable destinazione di animazione in XAML, usa la direttiva x:Name per assegnargli un nome. Nel codice si usa solo il RegisterName metodo per registrare l'oggetto con la pagina a cui appartiene.

Le sezioni seguenti forniscono un esempio di denominazione di un elemento in XAML e codice. Per informazioni più dettagliate sull'assegnazione dei nomi e l'impostazione di destinazioni, vedere Cenni preliminari sugli storyboard.

Applicazione e avvio di storyboard

Per avviare uno storyboard in XAML, associarlo a un oggetto EventTrigger. È EventTrigger un oggetto che descrive le azioni da eseguire quando si verifica un evento specificato. Una di queste azioni può essere un'azione BeginStoryboard che viene usata per avviare lo storyboard. I trigger di evento sono concettualmente analoghi ai gestori eventi poiché consentono di specificare il modo in cui l'applicazione risponde a un determinato evento. A differenza dei gestori eventi, i trigger di evento possono essere descritti completamente in XAML; non è necessario alcun altro codice.

Per avviare un oggetto Storyboard nel codice, è possibile usare un EventTrigger oggetto o usare il Begin metodo della Storyboard classe .

Controllo interattivo di uno storyboard

Nell'esempio precedente è stato illustrato come avviare un Storyboard oggetto quando si verifica un evento. È anche possibile controllare in modo interattivo un oggetto Storyboard dopo l'avvio: è possibile sospendere, riprendere, arrestare, avanzare fino al periodo di riempimento, cercare e rimuovere .Storyboard Per altre informazioni e un esempio che illustra come controllare in modo interattivo un Storyboardoggetto , vedere Cenni preliminari sugli storyboard.

Effetti del termine di un'animazione

La FillBehavior proprietà specifica il comportamento di una sequenza temporale al termine. Per impostazione predefinita, una sequenza temporale inizia Filling al termine. Animazione che contiene Filling il valore di output finale.

L'oggetto DoubleAnimation nell'esempio precedente non termina perché la relativa RepeatBehavior proprietà è impostata su Forever. L'esempio seguente anima un rettangolo usando un'animazione analoga. A differenza dell'esempio precedente, le RepeatBehavior proprietà e AutoReverse di questa animazione vengono lasciate ai valori predefiniti. e di conseguenza l'animazione avanza da 1 a 0 in un intervallo di cinque secondi per poi arrestarsi.

<Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>

    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0" Duration="0:0:5" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

FillBehavior Poiché non è stato modificato rispetto al valore predefinito, ovvero HoldEnd, l'animazione contiene il valore finale, 0, al termine. Pertanto, l'oggetto Opacity del rettangolo rimane a 0 dopo la fine dell'animazione. Se imposti l'oggetto Opacity del rettangolo su un altro valore, il codice sembra non avere alcun effetto, perché l'animazione sta ancora influenzando la Opacity proprietà.

Un modo per recuperare il controllo di una proprietà animata nel codice consiste nell'usare il BeginAnimation metodo e specificare null per il AnimationTimeline parametro . Per altre informazioni e per un esempio, vedere Impostare una proprietà dopo averla animata con uno storyboard.

Si noti che, sebbene l'impostazione di un valore della proprietà con un'animazione Active o Filling non abbia alcun effetto, il valore della proprietà cambia. Per altre informazioni, vedere Cenni preliminari sull'animazione e sul sistema di temporizzazione.

Data binding e animazione di animazioni

La maggior parte delle proprietà di animazione può essere associata a dati o animata; Ad esempio, è possibile animare la Duration proprietà di un oggetto DoubleAnimation. A causa della modalità di funzionamento del sistema di temporizzazione, tuttavia, le animazioni associate a dati o animate si comportano in modo diverso rispetto ad altri oggetti associati a dati o animati. Per comprendere questo comportamento, è opportuno capire il significato dell'applicazione di un'animazione a una proprietà.

Fare riferimento all'esempio nella sezione precedente che ha illustrato come animare l'oggetto Opacity di un rettangolo. Quando il rettangolo nell'esempio precedente viene caricato, il trigger di evento applica .Storyboard Il sistema di temporizzazione crea una copia dell'oggetto e della Storyboard relativa animazione. Queste copie vengono bloccate (di sola lettura) e Clock gli oggetti vengono creati da essi. che animano effettivamente le proprietà di destinazione.

Il sistema di temporizzazione crea un orologio per DoubleAnimation e lo applica all'oggetto e alla proprietà specificata da TargetName e TargetProperty di DoubleAnimation. In questo caso, il sistema di temporizzazione applica l'orologio alla Opacity proprietà dell'oggetto denominato "MyRectangle".

Anche se viene creato un orologio per , Storyboardl'orologio non viene applicato ad alcuna proprietà. Lo scopo è controllare l'orologio figlio, l'orologio creato per l'oggetto DoubleAnimation.

Affinché un'animazione rifletta le modifiche di data binding, è necessario rigenerarne l'orologio. Gli orologi non vengono rigenerati automaticamente. Per apportare modifiche a un'animazione, riapplicare lo storyboard usando un BeginStoryboard oggetto o il Begin metodo . Quando si usa uno di questi metodi, l'animazione viene riavviata. Nel codice è possibile usare il Seek metodo per riportare lo storyboard alla posizione precedente.

Per un esempio di animazione associata a dati, vedere Key Spline Animation Sample (Esempio di animazione con key spline). Per altre informazioni sul funzionamento dell'animazione e del sistema di temporizzazione, vedere Cenni preliminari sull'animazione e sul sistema di temporizzazione.

Altri modi per applicare un'animazione

Gli esempi del presente documento illustrano come applicare animazioni tramite storyboard. Quando si usa il codice, è possibile eseguire questa operazione in diversi altri modi. Per altre informazioni, vedere Cenni preliminari sulle tecniche di animazione delle proprietà.

Esempi di animazione

Gli esempi seguenti consentono di iniziare ad aggiungere animazione alle applicazioni.

Posizione Descrizione
Cenni preliminari sull'animazione e sul sistema di temporizzazione Descrive in che modo il sistema di temporizzazione usa le Timeline classi e Clock , che consentono di creare animazioni.
Suggerimenti sulle animazioni Contiene suggerimenti utili per la risoluzione di problemi relativi alle animazioni, ad esempio problemi di prestazioni.
Cenni preliminari sulle animazioni personalizzate Descrive come estendere il sistema dell'animazione con fotogrammi chiave, classi di animazione o callback per fotogramma.
Panoramica sulle animazioni From/To/By Descrive come creare un'animazione che effettua la transizione tra due valori.
Cenni preliminari sulle animazioni con fotogrammi chiave Descrive come creare un'animazione con più valori di destinazione, inclusa la possibilità di controllare il metodo di interpolazione.
Funzioni di interpolazione Descrive come applicare formule matematiche alle animazioni per ottenere un comportamento realistico, ad esempio un effetto di rimbalzo.
Panoramica sulle animazioni tracciato Descrive come spostare o ruotare un oggetto lungo un tracciato complesso.
Cenni preliminari sulle tecniche di animazione delle proprietà Descrive le animazioni di proprietà in cui si usano storyboard, animazioni locali, orologi e animazioni per fotogramma.
Cenni preliminari sugli storyboard Descrive come usare gli storyboard con più sequenze temporali per creare animazioni complesse.
Cenni preliminari sui comportamenti temporali Descrive i Timeline tipi e le proprietà usati nelle animazioni.
Cenni preliminari sugli eventi di tempo Descrive gli eventi disponibili negli oggetti e Clock per l'esecuzione Timeline di codice in punti nella sequenza temporale, ad esempio begin, pause, resume, skip o stop.
Procedure relative alle risorse Contiene esempi di codice per usare animazioni e sequenze temporali in un'applicazione.
Procedure relative a oggetti Clock Contiene esempi di codice per l'uso dell'oggetto Clock nell'applicazione.
Procedure relative ai fotogrammi chiave Contiene esempi di codice per l'uso di animazioni con fotogrammi chiave in un'applicazione.
Procedure relative all'animazione percorso Contiene esempi di codice per l'uso di animazioni basate su tracciato in un'applicazione.

Riferimento