Cenni preliminari sull'animazioneAnimation Overview

Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) fornisce un potente set di funzionalità di grafica e layout che consentono di creare interfacce utente attraenti e documenti accattivanti.Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) provides a powerful set of graphics and layout features that enable you to create attractive user interfaces and appealing documents. L'animazione può migliorare ulteriormente l'aspetto e la facilità di uso dell'interfaccia utente.Animation can make an attractive user interface even more spectacular and usable. Semplicemente animando un colore di sfondo o applicando un Transformanimato, è possibile creare transizioni di schermo drammatiche o fornire segnali visivi utili.By just animating a background color or applying an animated Transform, you can create dramatic screen transitions or provide helpful visual cues.

Questa panoramica offre un'introduzione al sistema di WPFWPF animazione e temporizzazione.This overview provides an introduction to the WPFWPF animation and timing system. Si concentra sull'animazione di oggetti WPFWPF usando gli storyboard.It focuses on the animation of WPFWPF objects by using storyboards.

Introduzione alle animazioniIntroducing Animations

L'animazione è un'illusione ottica creata scorrendo rapidamente una serie di immagini, ognuna leggermente diversa dall'ultima.Animation is an illusion that is created by quickly cycling through a series of images, each slightly different from the last. Il cervello percepisce il gruppo di immagini come un'unica scena che si modifica.The brain perceives the group of images as a single changing scene. Nei film questa illusione viene creata usando fotocamere che registrano molte fotografie (fotogrammi) al secondo.In film, this illusion is created by using cameras that record many photographs, or frames, each second. Quando i fotogrammi vengono riprodotti con un proiettore, il pubblico vede un'immagine in movimento.When the frames are played back by a projector, the audience sees a moving picture.

L'animazione in un computer è simile.Animation on a computer is similar. Un programma che applica una dissolvenza in uscita al disegno di un rettangolo funziona ad esempio nel modo indicato di seguito.For example, a program that makes a drawing of a rectangle fade out of view might work as follows.

  • Il programma crea un timer.The program creates a timer.

  • Il programma controlla il timer a intervalli stabiliti per rilevare la quantità di tempo trascorso.The program checks the timer at set intervals to see how much time has elapsed.

  • Ogni volta che il programma controlla il timer, calcola anche il valore di opacità per il rettangolo in base al tempo trascorso.Each time the program checks the timer, it computes the current opacity value for the rectangle based on how much time has elapsed.

  • Il programma aggiorna quindi il rettangolo in base al nuovo valore e lo ridisegna.The program then updates the rectangle with the new value and redraws it.

Prima di WPFWPF, gli sviluppatori Microsoft Windows dovevano creare e gestire i propri sistemi di temporizzazione o utilizzare librerie personalizzate speciali.Prior to WPFWPF, Microsoft Windows developers had to create and manage their own timing systems or use special custom libraries. WPFWPF include un sistema di temporizzazione efficiente esposto tramite codice gestito e Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) e integrato in modo approfondito in WPFWPF Framework.includes an efficient timing system that is exposed through managed code and Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) and that is deeply integrated into the WPFWPF framework. Le funzionalità disponibili in WPFWPF semplificano l'applicazione di animazioni ai controlli e ad altri oggetti grafici.WPFWPF animation makes it easy to animate controls and other graphical objects.

WPFWPF esegue in modo efficiente tutte le attività automatiche di gestione del sistema di temporizzazione e di aggiornamento dello schermohandles all the behind-the-scenes work of managing a timing system and redrawing the screen efficiently. grazie a classi di temporizzazione che consentono di concentrarsi sugli effetti da creare anziché sulle operazioni per ottenerli.It provides timing classes that enable you to focus on the effects you want to create, instead of the mechanics of achieving those effects. Esponendo le classi di base di animazione da cui le classi dell'utente possono ereditare, WPFWPF semplifica anche la creazione di animazioni personalizzateWPFWPF also makes it easy to create your own animations by exposing animation base classes from which your classes can inherit, to produce customized animations. che sfruttano molti vantaggi in termini di prestazioni delle classi di animazione standard.These custom animations gain many of the performance benefits of the standard animation classes.

Sistema di animazione delle proprietà WPFWPF Property Animation System

Se si conoscono alcuni concetti importanti sul sistema di temporizzazione, WPFWPF animazioni possono essere più facili da usare.If you understand a few important concepts about the timing system, WPFWPF animations can be easier to use. L'aspetto più importante è che, in WPFWPF, si animano gli oggetti applicando animazioni alle rispettive proprietà.Most important is that, in WPFWPF, you animate objects by applying animation to their individual properties. Ad esempio, per aumentare le dimensioni di un elemento del Framework, si animano le relative Width e Height proprietà.For example, to make a framework element grow, you animate its Width and Height properties. Per rendere una dissolvenza dell'oggetto dalla visualizzazione, è necessario animare la relativa proprietà Opacity.To make an object fade from view, you animate its Opacity property.

Affinché una proprietà disponga di funzionalità di animazione, devono essere soddisfatti i tre requisiti seguenti:For a property to have animation capabilities, it must meet the following three requirements:

WPFWPF contiene molti oggetti con proprietà IAnimatable.contains many objects that have IAnimatable properties. I controlli, ad esempio Button e TabControle gli oggetti di Panel e Shape ereditano da DependencyObject.Controls such as Button and TabControl, and also Panel and Shape objects inherit from DependencyObject. La maggior parte delle proprietà di tali oggetti è rappresentata da proprietà di dipendenza.Most of their properties are dependency properties.

È possibile usare le animazioni quasi ovunque, ad esempio in stili e modelli del controllo.You can use animations almost anywhere, which includes in styles and control templates. 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.Animations do not have to be visual; you can animate objects that are not part of the user interface if they meet the criteria that are described in this section.

Esempio - Applicare a un elemento una dissolvenza in entrata e in uscitaExample: Make an Element Fade In and Out of View

Questo esempio illustra come usare un'animazione WPFWPF per animare il valore di una proprietà di dipendenza.This example shows how to use a WPFWPF animation to animate the value of a dependency property. Usa un DoubleAnimation, ovvero un tipo di animazione che genera valori Double, per animare la proprietà Opacity di un Rectangle.It uses a DoubleAnimation, which is a type of animation that generates Double values, to animate the Opacity property of a Rectangle. Di conseguenza, il Rectangle si dissolve in visualizzazione.As a result, the Rectangle fades in and out of view.

Nella prima parte dell'esempio viene creato un elemento Rectangle.The first part of the example creates a Rectangle element. I passaggi seguenti illustrano come creare un'animazione e applicarla alla proprietà Opacity del rettangolo.The steps that follow show how to create an animation and apply it to the rectangle's Opacity property.

Di seguito viene illustrato come creare un elemento Rectangle in un StackPanel in XAML.The following shows how to create a Rectangle element in a StackPanel in XAML.

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

Nell'esempio seguente viene illustrato come creare un elemento Rectangle in una StackPanel nel codice.The following shows how to create a Rectangle element in a StackPanel in code.

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 DoubleAnimationPart 1: Create a DoubleAnimation

Un modo per rendere una dissolvenza dell'elemento in entrata e in uscita è l'animazione della relativa proprietà Opacity.One way to make an element fade in and out of view is to animate its Opacity property. Poiché la proprietà Opacity è di tipo Double, è necessaria un'animazione che produce valori Double.Because the Opacity property is of type Double, you need an animation that produces double values. Una DoubleAnimation è un'animazione di questo tipo.A DoubleAnimation is one such animation. Una DoubleAnimation crea una transizione tra due valori Double.A DoubleAnimation creates a transition between two double values. Per specificare il valore iniziale, impostare la relativa proprietà From.To specify its starting value, you set its From property. Per specificare il valore finale, impostare la relativa proprietà To.To specify its ending value, you set its To property.

  1. Un valore di opacità di 1.0 rende completamente opaco l'oggetto e un valore di opacità di 0.0 lo rende completamente invisibile.An opacity value of 1.0 makes the object completely opaque, and an opacity value of 0.0 makes it completely invisible. Per eseguire la transizione dell'animazione da 1.0 a 0.0 impostare la relativa proprietà From su 1.0 e la relativa proprietà To su 0.0.To make the animation transition from 1.0 to 0.0 you set its From property to 1.0 and its To property to 0.0. Di seguito viene illustrato come creare un DoubleAnimation in XAML.The following shows how to create a DoubleAnimation in XAML.

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

    Di seguito viene illustrato come creare un DoubleAnimation nel codice.The following shows how to create a DoubleAnimation in code.

    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 Duration.Next, you must specify a Duration. Il Duration di un'animazione specifica il tempo necessario per passare dal valore iniziale al valore di destinazione.The Duration of an animation specifies how long it takes to go from its starting value to its destination value. Di seguito viene illustrato come impostare il Duration su cinque secondi in XAML.The following shows how to set the Duration to five seconds in XAML.

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

    Di seguito viene illustrato come impostare il Duration su cinque secondi nel codice.The following shows how to set the Duration to five seconds in code.

    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
    
    myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
    
  3. Nel codice precedente è stata mostrata un'animazione che esegue la transizione da 1.0 a 0.0, che determina la dissolvenza dell'elemento di destinazione da completamente opaco a completamente invisibile.The previous code showed an animation that transitions from 1.0 to 0.0, which causes the target element to fade from completely opaque to completely invisible. Per fare in modo che l'elemento venga nuovamente visualizzato dopo la scomparsa, impostare la proprietà AutoReverse dell'animazione su true.To make the element fade back into view after it vanishes, set the AutoReverse property of the animation to true. Per fare in modo che l'animazione venga ripetuta per un periodo illimitato, impostare la relativa proprietà RepeatBehavior su Forever.To make the animation repeat indefinitely, set its RepeatBehavior property to Forever. Di seguito viene illustrato come impostare le proprietà AutoReverse e RepeatBehavior in XAML.The following shows how to set the AutoReverse and RepeatBehavior properties in XAML.

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

    Di seguito viene illustrato come impostare le proprietà AutoReverse e RepeatBehavior nel codice.The following shows how to set the AutoReverse and RepeatBehavior properties in code.

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

Parte 2 - Creare uno storyboardPart 2: Create a Storyboard

Per applicare un'animazione a un oggetto, è necessario creare un Storyboard e utilizzare le proprietà TargetName e TargetProperty associate per specificare l'oggetto e la proprietà a cui aggiungere un'animazione.To apply an animation to an object, you create a Storyboard and use the TargetName and TargetProperty attached properties to specify the object and property to animate.

  1. Creare il Storyboard e aggiungere l'animazione come figlio.Create the Storyboard and add the animation as its child. Di seguito viene illustrato come creare il Storyboard in XAML.The following shows how to create the Storyboard in XAML.

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

    Per creare il Storyboard nel codice, dichiarare una variabile Storyboard a livello di classe.To create the Storyboard in code, declare a Storyboard variable at the class level.

    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;
    
    Class MainWindow
    
        Private myStoryboard As Storyboard
    

    Inizializzare quindi il Storyboard e aggiungere l'animazione come figlio.Then initialize the Storyboard and add the animation as its child.

    myStoryboard = new Storyboard();
    myStoryboard.Children.Add(myDoubleAnimation);
    
    myStoryboard = New Storyboard()
    myStoryboard.Children.Add(myDoubleAnimation)
    
  2. Il Storyboard deve stabilire dove applicare l'animazione.The Storyboard has to know where to apply the animation. Utilizzare la proprietà associata Storyboard.TargetName per specificare l'oggetto a cui aggiungere un'animazione.Use the Storyboard.TargetName attached property to specify the object to animate. Di seguito viene illustrato come impostare il nome di destinazione del DoubleAnimation su MyRectangle in XAML.The following shows how to set the target name of the DoubleAnimation to 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 del DoubleAnimation per MyRectangle nel codice.The following shows how to set the target name of the DoubleAnimation to MyRectangle in code.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
    
    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
    
  3. Utilizzare la proprietà associata TargetProperty per specificare la proprietà a cui aggiungere un'animazione.Use the TargetProperty attached property to specify the property to animate. Di seguito viene illustrato il modo in cui l'animazione viene configurata per la destinazione della proprietà Opacity della Rectangle in XAML.The following shows how the animation is configured to target the Opacity property of the 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 il modo in cui l'animazione viene configurata per la destinazione della proprietà Opacity della Rectangle nel codice.The following shows how the animation is configured to target the Opacity property of the Rectangle in code.

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

Per ulteriori informazioni sulla sintassi TargetProperty e per altri esempi, vedere Cenni preliminari sugli storyboard.For more information about TargetProperty syntax and for additional examples, see the Storyboards Overview.

Parte 3 (XAML) - Associare lo storyboard a un triggerPart 3 (XAML): Associate the Storyboard with a Trigger

Il modo più semplice per applicare e avviare un Storyboard in XAMLXAML consiste nell'usare un trigger di evento.The easiest way to apply and start a Storyboard in XAMLXAML is to use an event trigger. In questa sezione viene illustrato come associare il Storyboard a un trigger in XAML.This section shows how to associate the Storyboard with a trigger in XAML.

  1. Creare un oggetto BeginStoryboard e associarvi lo storyboard.Create a BeginStoryboard object and associate your storyboard with it. Un BeginStoryboard è un tipo di TriggerAction che si applica e avvia un Storyboard.A BeginStoryboard is a type of TriggerAction that applies and starts a 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 una EventTrigger e aggiungere il BeginStoryboard alla raccolta di Actions.Create an EventTrigger and add the BeginStoryboard to its Actions collection. Impostare la proprietà RoutedEvent della EventTrigger sull'evento indirizzato per il quale si desidera avviare il Storyboard.Set the RoutedEvent property of the EventTrigger to the routed event that you want to start the Storyboard. Per ulteriori informazioni sugli eventi indirizzati, vedere Cenni preliminari sugli eventi indirizzati.(For more information about routed events, see the Routed Events Overview.)

    <!-- 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 la EventTrigger alla raccolta Triggers del rettangolo.Add the EventTrigger to the Triggers collection of the 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 eventiPart 3 (Code): Associate the Storyboard with an Event Handler

Il modo più semplice per applicare e avviare una Storyboard nel codice consiste nell'usare un gestore eventi.The easiest way to apply and start a Storyboard in code is to use an event handler. In questa sezione viene illustrato come associare il Storyboard a un gestore eventi nel codice.This section shows how to associate the Storyboard with an event handler in code.

  1. Eseguire la registrazione per l'evento Loaded del rettangolo.Register for the Loaded event of the rectangle.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
    
    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded
    
  2. Dichiarare il gestore eventi.Declare the event handler. Nel gestore dell'evento usare il metodo Begin per applicare lo storyboard.In the event handler, use the Begin method to apply the 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 completoComplete Example

Nell'esempio seguente viene illustrato come creare un rettangolo che si dissolve in entrata e in uscita in XAML.The following shows how to create a rectangle that fades in and out of view in XAML.

<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.The following shows how to create a rectangle that fades in and out of view in code.

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 animazioneAnimation Types

Poiché le animazioni generano valori di proprietà, per i diversi tipi di proprietà esistono tipi di animazione differenti.Because animations generate property values, different animation types exist for different property types. Per animare una proprietà che accetta un Double, ad esempio la proprietà Width di un elemento, usare un'animazione che produce valori di Double.To animate a property that takes a Double, such as the Width property of an element, use an animation that produces Double values. Per animare una proprietà che accetta una Point, utilizzare un'animazione che produce valori Point e così via.To animate a property that takes a Point, use an animation that produces Point values, and so on. A causa del numero di tipi di proprietà diversi, nello spazio dei nomi System.Windows.Media.Animation sono presenti diverse classi di animazione.Because of the number of different property types, there are several animation classes in the System.Windows.Media.Animation namespace. che fortunatamente seguono una convenzione di denominazione rigorosa che ne facilita la differenziazione:Fortunately, they follow a strict naming convention that makes it easy to differentiate between them:

  • <Tipo>Animation<Type>Animation

    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.Known as a "From/To/By" or "basic" animation, these animate between a starting and destination value, or by adding an offset value to its starting value.

    • Per specificare un valore iniziale, impostare la proprietà From dell'animazione.To specify a starting value, set the From property of the animation.

    • Per specificare un valore finale, impostare la proprietà To dell'animazione.To specify an ending value, set the To property of the animation.

    • Per specificare un valore di offset, impostare la proprietà By dell'animazione.To specify an offset value, set the By property of the animation.

    Gli esempi del presente documento usano queste animazioni perché sono le più semplici.The examples in this overview use these animations, because they are the simplest to use. Le animazioni from/to/by sono descritte in dettaglio in Cenni preliminari sulle animazioni from/to/by.From/To/By animations are described in detail in the From/To/By Animations Overview.

  • <Tipo>AnimationUsingKeyFrames<Type>AnimationUsingKeyFrames

    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.Key frame animations are more powerful than From/To/By animations because you can specify any number of target values and even control their interpolation method. Alcuni tipi possono essere animati solo con animazioni basate su fotogrammi chiave.Some types can only be animated with key frame animations. Le animazioni con fotogramma chiave sono descritte in dettaglio nella Panoramica delle animazioni con fotogrammi chiave.Key frame animations are described in detail in the Key-Frame Animations Overview.

  • <Tipo>AnimationUsingPath<Type>AnimationUsingPath

    Le animazioni basate su tracciato consentono di usare un tracciato geometrico per produrre valori animati.Path animations enable you to use a geometric path in order to produce animated values.

  • <Tipo>AnimationBase<Type>AnimationBase

    Classe astratta che, quando implementata, anima un valore <Type>.Abstract class that, when you implement it, animates a <Type> value. Questa classe funge da classe di base per le classi <Tipo>Animation e <Type>AnimationUsingKeyFrames.This class serves as the base class for <Type>Animation and <Type>AnimationUsingKeyFrames classes. È necessario gestire direttamente queste classi solo se si vuole creare animazioni personalizzate.You have to deal directly with these classes only if you want to create your own custom animations. In caso contrario, usare una classe <Tipo>Animation o KeyFrame<Tipo>Animation.Otherwise, use a <Type>Animation or KeyFrame<Type>Animation.

Nella maggior parte dei casi, è consigliabile usare il tipodi <> classi di animazione, ad esempio DoubleAnimation e ColorAnimation.In most cases, you will want to use the <Type>Animation classes, such as DoubleAnimation and ColorAnimation.

La tabella seguente illustra diversi tipi di animazione comuni e alcune proprietà con cui vengono usati.The following table shows several common animation types and some properties with which they are used.

Tipo di proprietàProperty type Animazione (From/To/By) di base corrispondenteCorresponding basic (From/To/By) animation Animazione basata su fotogrammi chiave corrispondenteCorresponding key frame animation Animazione basata su tracciato corrispondenteCorresponding Path Animation Esempio di usoUsage example
Color ColorAnimation ColorAnimationUsingKeyFrames NoneNone Animare il Color di un SolidColorBrush o di un GradientStop.Animate the Color of a SolidColorBrush or a GradientStop.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Animare il Width di un DockPanel o il Height di una Button.Animate the Width of a DockPanel or the Height of a Button.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Animare la posizione del Center di un EllipseGeometry.Animate the Center position of an EllipseGeometry.
String NoneNone StringAnimationUsingKeyFrames NoneNone Animare il Text di un TextBlock o il Content di una Button.Animate the Text of a TextBlock or the Content of a Button.

Animazioni come sequenze temporaliAnimations Are Timelines

Tutti i tipi di animazione ereditano dalla classe Timeline; tutte le animazioni sono pertanto tipi specializzati di sequenze temporali.All the animation types inherit from the Timeline class; therefore, all animations are specialized types of timelines. Una Timeline definisce un intervallo di tempo.A Timeline defines a segment of time. È possibile specificare i comportamenti temporali di una sequenza temporale: la relativa Duration, il numero di volte che viene ripetuto e anche il tempo di avanzamento del tempo.You can specify the timing behaviors of a timeline: its Duration, how many times it is repeated, and even how fast time progresses for it.

Poiché un'animazione è un Timeline, rappresenta anche un intervallo di tempo.Because an animation is a Timeline, it also represents a segment of time. Un'animazione calcola inoltre i valori di output durante l'avanzamento del periodo di tempo specificato (o Duration).An animation also calculates output values as it progresses through its specified segment of time (or Duration). Con l'avanzamento, ovvero la riproduzione, dell'animazione, viene aggiornata la proprietà associata.As the animation progresses, or "plays," it updates the property that it is associated with.

Tre proprietà temporali utilizzate di frequente sono Duration, AutoReversee RepeatBehavior.Three frequently used timing properties are Duration, AutoReverse, and RepeatBehavior.

Proprietà DurationThe Duration Property

Come accennato in precedenza, una sequenza temporale rappresenta un intervallo di tempo.As previously mentioned, a timeline represents a segment of time. La lunghezza di tale segmento è determinata dalla Duration della sequenza temporale, che viene in genere specificata utilizzando un valore TimeSpan.The length of that segment is determined by the Duration of the timeline, which is usually specified by using a TimeSpan value. Quando una sequenza temporale raggiunge il termine della durata, ha completato un'iterazione.When a timeline reaches the end of its duration, it has completed an iteration.

Un'animazione usa la proprietà Duration per determinare il valore corrente.An animation uses its Duration property to determine its current value. Se non si specifica un valore Duration per un'animazione, viene utilizzato 1 secondo, ovvero l'impostazione predefinita.If you do not specify a Duration value for an animation, it uses 1 second, which is the default.

Nella sintassi seguente viene illustrata una versione semplificata della sintassi dell'attributo Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) per la proprietà Duration.The following syntax shows a simplified version of the Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) attribute syntax for the Duration property.

ore : minuti : secondihours : minutes : seconds

Nella tabella seguente vengono illustrate diverse impostazioni Duration e i valori risultanti.The following table shows several Duration settings and their resulting values.

ImpostazioneSetting Valore risultanteResulting value
0:0:5.50:0:5.5 5,5 secondi.5.5 seconds.
0:30:5.50:30:5.5 30 minuti e 5,5 secondi.30 minutes and 5.5 seconds.
1:30:5.51:30:5.5 1 ora, 30 minuti e 5,5 secondi.1 hour, 30 minutes, and 5.5 seconds.

Un modo per specificare una Duration nel codice consiste nell'usare il metodo FromSeconds per creare un TimeSpan, quindi dichiarare una nuova struttura Duration usando tale TimeSpan.One way to specify a Duration in code is to use the FromSeconds method to create a TimeSpan, then declare a new Duration structure using that TimeSpan.

Per ulteriori informazioni sui valori Duration e sulla sintassi completa Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML), vedere la struttura Duration.For more information about Duration values and the complete Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) syntax, see the Duration structure.

Proprietà AutoReverseAutoReverse

La proprietà AutoReverse specifica se una sequenza temporale viene riprodotta indietro dopo che ha raggiunto la fine del relativo Duration.The AutoReverse property specifies whether a timeline plays backward after it reaches the end of its Duration. Se si imposta questa proprietà di animazione su true, un'animazione viene invertita dopo che raggiunge la fine del relativo Duration, riproducendo il valore iniziale del valore finale.If you set this animation property to true, an animation reverses after it reaches the end of its Duration, playing from its ending value back to its starting value. Per impostazione predefinita, questa proprietà è false.By default, this property is false.

RepeatBehaviorRepeatBehavior

La proprietà RepeatBehavior specifica il numero di volte in cui viene riprodotta una sequenza temporale.The RepeatBehavior property specifies how many times a timeline plays. Per impostazione predefinita, le sequenze temporali hanno un conteggio delle iterazioni di 1.0, il che significa che vengono riprodotte una sola volta e non vengono ripetute.By default, timelines have an iteration count of 1.0, which means they play one time and do not repeat at all.

Per ulteriori informazioni su queste proprietà e altre, vedere Cenni preliminari sui comportamenti temporali.For more information about these properties and others, see the Timing Behaviors Overview.

Applicazione di un'animazione a una proprietàApplying an Animation to a Property

Le sezioni precedenti descrivono i diversi tipi di animazioni e le relative proprietà temporali,The previous sections describe the different types of animations and their timing properties. mentre questa sezione illustra come applicare l'animazione alla proprietà da animare.This section shows how to apply the animation to the property that you want to animate. gli oggetti Storyboard offrono un modo per applicare animazioni alle proprietà.Storyboard objects provide one way to apply animations to properties. Una Storyboard è una sequenza temporale del contenitore che fornisce informazioni di destinazione per le animazioni in esso contenute.A Storyboard is a container timeline that provides targeting information for the animations it contains.

Oggetti di destinazione e proprietàTargeting Objects and Properties

La classe Storyboard fornisce le proprietà TargetName e TargetProperty associate.The Storyboard class provides the TargetName and TargetProperty attached properties. Se si impostano tali proprietà in un'animazione, si indica l'oggetto da animare.By setting these properties on an animation, you tell the animation what to animate. Affinché un oggetto possa diventare la destinazione di un'animazione, è tuttavia necessario assegnargli un nome.However, before an animation can target an object, the object must usually be given a name.

L'assegnazione di un nome a una FrameworkElement è diversa dall'assegnazione di un nome a un oggetto Freezable.Assigning a name to a FrameworkElement differs from assigning a name to a Freezable object. 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.Most controls and panels are framework elements; however, most purely graphical objects, such as brushes, transforms, and geometries, are freezable objects. Se non si è certi che un tipo sia un FrameworkElement o un Freezable, vedere la sezione gerarchia di ereditarietà della documentazione di riferimento.If you are not sure whether a type is a FrameworkElement or a Freezable, refer to the Inheritance Hierarchy section of its reference documentation.

  • Per creare un FrameworkElement una destinazione di animazione, assegnargli un nome impostando la relativa proprietà Name.To make a FrameworkElement an animation target, you give it a name by setting its Name property. Nel codice è anche necessario usare il metodo RegisterName per registrare il nome dell'elemento con la pagina a cui appartiene.In code, you must also use the RegisterName method to register the element name with the page to which it belongs.

  • Per rendere un Freezable oggetto una destinazione dell'animazione in XAMLXAML, usare la direttiva x:Name per assegnarle un nome.To make a Freezable object an animation target in XAMLXAML, you use the x:Name Directive to assign it a name. Nel codice è sufficiente usare il metodo RegisterName per registrare l'oggetto con la pagina a cui appartiene.In code, you just use the RegisterName method to register the object with the page to which it belongs.

Nelle sezioni seguenti viene fornito un esempio di denominazione di un elemento in XAMLXAML e codice.The sections that follow provide an example of naming an element in XAMLXAML and code. Per informazioni più dettagliate sulla denominazione e la destinazione, vedere Cenni preliminari sugli storyboard.For more detailed information about naming and targeting, see the Storyboards Overview.

Applicazione e avvio di storyboardApplying and Starting Storyboards

Per avviare uno storyboard in XAMLXAML, associarlo a una EventTrigger.To start a storyboard in XAMLXAML, you associate it with an EventTrigger. Un EventTrigger è un oggetto che descrive le azioni da intraprendere quando si verifica un evento specificato.An EventTrigger is an object that describes what actions to take when a specified event occurs. Una di queste azioni può essere un'azione BeginStoryboard, che viene usata per avviare lo storyboard.One of those actions can be a BeginStoryboard action, which you use to start your 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.Event triggers are similar in concept to event handlers because they enable you to specify how your application responds to a particular event. A differenza dei gestori eventi, i trigger di evento possono essere descritti completamente in XAMLXAML; non è necessario altro codice.Unlike event handlers, event triggers can be fully described in XAMLXAML; no other code is required.

Per avviare una Storyboard nel codice, è possibile usare un EventTrigger o usare il metodo Begin della classe Storyboard.To start a Storyboard in code, you can use an EventTrigger or use the Begin method of the Storyboard class.

Controllo interattivo di uno storyboardInteractively Control a Storyboard

Nell'esempio precedente è stato illustrato come avviare un Storyboard quando si verifica un evento.The previous example showed how to start a Storyboard when an event occurs. È anche possibile controllare in modo interattivo un Storyboard dopo l'avvio: è possibile sospendere, riprendere, arrestare, spostarlo al periodo di riempimento, cercare e rimuovere il Storyboard.You can also interactively control a Storyboard after it starts: you can pause, resume, stop, advance it to its fill period, seek, and remove the Storyboard. Per ulteriori informazioni e un esempio che illustra come controllare in modo interattivo un Storyboard, vedere Cenni preliminari sugli storyboard.For more information and an example that shows how to interactively control a Storyboard, see the Storyboards Overview.

Effetti del termine di un'animazioneWhat Happens After an Animation Ends?

La proprietà FillBehavior specifica il comportamento di una sequenza temporale al termine di.The FillBehavior property specifies how a timeline behaves when it ends. Per impostazione predefinita, una sequenza temporale inizia Filling al termine.By default, a timeline starts Filling when it ends. Un'animazione Filling include il valore di output finale.An animation that is Filling holds its final output value.

Il DoubleAnimation nell'esempio precedente non termina perché la relativa proprietà RepeatBehavior è impostata su Forever.The DoubleAnimation in the previous example does not end because its RepeatBehavior property is set to Forever. L'esempio seguente anima un rettangolo usando un'animazione analoga.The following example animates a rectangle by using a similar animation. A differenza dell'esempio precedente, le proprietà RepeatBehavior e AutoReverse di questa animazione restano sui valori predefiniti.Unlike the previous example, the RepeatBehavior and AutoReverse properties of this animation are left at their default values. e di conseguenza l'animazione avanza da 1 a 0 in un intervallo di cinque secondi per poi arrestarsi.Therefore, the animation progresses from 1 to 0 over five seconds and then stops.

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

Poiché il FillBehavior non è stato modificato rispetto al valore predefinito, che è HoldEnd, l'animazione deve contenere il valore finale, 0, al termine dell'operazione.Because its FillBehavior was not changed from its default value, which is HoldEnd, the animation holds its final value, 0, when it ends. Di conseguenza, il Opacity del rettangolo rimane a 0 al termine dell'animazione.Therefore, the Opacity of the rectangle remains at 0 after the animation ends. Se si imposta la Opacity del rettangolo su un altro valore, il codice sembra non avere alcun effetto, perché l'animazione continua a influire sulla proprietà Opacity.If you set the Opacity of the rectangle to another value, your code appears to have no effect, because the animation is still affecting the Opacity property.

Un modo per ottenere nuovamente il controllo di una proprietà animata nel codice consiste nell'usare il metodo BeginAnimation e specificare null per il parametro AnimationTimeline.One way to regain control of an animated property in code is to use the BeginAnimation method and specify null for the AnimationTimeline parameter. Per ulteriori informazioni e un esempio, vedere impostare una proprietà dopo averla animata con uno storyboard.For more information and an example, see Set a Property After Animating It with a Storyboard.

Si noti che, anche se l'impostazione di un valore della proprietà con un'animazione Active o Filling non ha alcun effetto, il valore della proprietà viene modificato.Note that, although setting a property value that has an Active or Filling animation appears to have no effect, the property value does change. Per ulteriori informazioni, vedere Cenni preliminari sull'animazione e sul sistema di temporizzazione.For more information, see the Animation and Timing System Overview.

Data binding e animazione di animazioniData Binding and Animating Animations

La maggior parte delle proprietà di animazione può essere associata a dati o animata; ad esempio, è possibile aggiungere un'animazione alla proprietà Duration di un DoubleAnimation.Most animation properties can be data bound or animated; for example, you can animate the Duration property of a 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.However, because of the way the timing system works, data bound or animated animations do not behave like other data bound or animated objects. Per comprendere questo comportamento, è opportuno capire il significato dell'applicazione di un'animazione a una proprietà.To understand their behavior, it helps to understand what it means to apply an animation to a property.

Vedere l'esempio nella sezione precedente che ha illustrato come animare il Opacity di un rettangolo.Refer to the example in the previous section that showed how to animate the Opacity of a rectangle. Quando viene caricato il rettangolo nell'esempio precedente, il trigger di evento applica la Storyboard.When the rectangle in the previous example is loaded, its event trigger applies the Storyboard. Il sistema di temporizzazione crea una copia della Storyboard e della relativa animazione.The timing system creates a copy of the Storyboard and its animation. Queste copie sono bloccate (rese di sola lettura) e Clock vengono creati oggetti.These copies are frozen (made read-only) and Clock objects are created from them. che animano effettivamente le proprietà di destinazione.These clocks do the actual work of animating the targeted properties.

Il sistema di temporizzazione crea un clock per il DoubleAnimation e lo applica all'oggetto e alla proprietà specificati dall'TargetName e TargetProperty della DoubleAnimation.The timing system creates a clock for the DoubleAnimation and applies it to the object and property that is specified by the TargetName and TargetProperty of the DoubleAnimation. In questo caso, il sistema di temporizzazione applica l'orologio alla proprietà Opacity dell'oggetto denominato "derectangle".In this case, the timing system applies the clock to the Opacity property of the object that is named "MyRectangle."

Sebbene venga creato anche un clock per la Storyboard, l'orologio non viene applicato alle proprietà.Although a clock is also created for the Storyboard, the clock is not applied to any properties. Lo scopo è quello di controllare il clock figlio, l'orologio creato per il DoubleAnimation.Its purpose is to control its child clock, the clock that is created for the DoubleAnimation.

Affinché un'animazione rifletta le modifiche di data binding, è necessario rigenerarne l'orologio.For an animation to reflect data binding or animation changes, its clock must be regenerated. Gli orologi non vengono rigenerati automaticamente.Clocks are not regenerated for you automatically. Per fare in modo che un'animazione rifletta le modifiche, riapplicarne lo storyboard usando un BeginStoryboard o il metodo Begin.To make an animation reflect changes, reapply its storyboard by using a BeginStoryboard or the Begin method. Quando si usa uno di questi metodi, l'animazione viene riavviata.When you use either of these methods, the animation restarts. Nel codice è possibile usare il metodo Seek per spostare nuovamente lo storyboard nella posizione precedente.In code, you can use the Seek method to shift the storyboard back to its previous position.

Per un esempio di animazione con associazione a dati, vedere esempio di animazione key spline.For an example of a data bound animation, see Key Spline Animation Sample. Per ulteriori informazioni sul funzionamento del sistema di animazione e temporizzazione, vedere Cenni preliminari sull'animazione e sul sistema di temporizzazione.For more information about how the animation and timing system works, see Animation and Timing System Overview.

Altri modi per applicare un'animazioneOther Ways to Animate

Gli esempi del presente documento illustrano come applicare animazioni tramite storyboard.The examples in this overview show how to animate by using storyboards. Quando si usa il codice, è possibile eseguire questa operazione in diversi altri modi.When you use code, you can animate in several other ways. Per ulteriori informazioni, vedere Cenni preliminari sulle tecniche di animazione delle proprietà.For more information, see the Property Animation Techniques Overview.

Esempi di animazioneAnimation Samples

Gli esempi seguenti consentono di iniziare ad aggiungere animazione alle applicazioni.The following samples can help you start adding animation to your applications.

TitoloTitle DescrizioneDescription
Cenni preliminari sull'animazione e sul sistema di temporizzazioneAnimation and Timing System Overview Viene descritto il modo in cui il sistema di temporizzazione usa le classi Timeline e Clock, che consentono di creare animazioni.Describes how the timing system uses the Timeline and Clock classes, which allow you to create animations.
Suggerimenti sulle animazioniAnimation Tips and Tricks Contiene suggerimenti utili per la risoluzione di problemi relativi alle animazioni, ad esempio problemi di prestazioni.Lists helpful tips for solving issues with animations, such as performance.
Cenni preliminari sulle animazioni personalizzateCustom Animations Overview Descrive come estendere il sistema dell'animazione con fotogrammi chiave, classi di animazione o callback per fotogramma.Describes how to extend the animation system with key frames, animation classes, or per-frame callbacks.
Panoramica sulle animazioni From/To/ByFrom/To/By Animations Overview Descrive come creare un'animazione che effettua la transizione tra due valori.Describes how to create an animation that transitions between two values.
Cenni preliminari sulle animazioni con fotogrammi chiaveKey-Frame Animations Overview Descrive come creare un'animazione con più valori di destinazione, inclusa la possibilità di controllare il metodo di interpolazione.Describes how to create an animation with multiple target values, including the ability to control the interpolation method.
Funzioni di interpolazioneEasing Functions Descrive come applicare formule matematiche alle animazioni per ottenere un comportamento realistico, ad esempio un effetto di rimbalzo.Explains how to apply mathematical formulas to your animations to get realistic behavior, such as bouncing.
Panoramica sulle animazioni tracciatoPath Animations Overview Descrive come spostare o ruotare un oggetto lungo un tracciato complesso.Describes how to move or rotate an object along a complex path.
Cenni preliminari sulle tecniche di animazione delle proprietàProperty Animation Techniques Overview Descrive le animazioni di proprietà in cui si usano storyboard, animazioni locali, orologi e animazioni per fotogramma.Describes property animations using storyboards, local animations, clocks, and per-frame animations.
Cenni preliminari sugli storyboardStoryboards Overview Descrive come usare gli storyboard con più sequenze temporali per creare animazioni complesse.Describes how to use storyboards with multiple timelines to create complex animations.
Cenni preliminari sui comportamenti temporaliTiming Behaviors Overview Vengono descritti i tipi e le proprietà Timeline utilizzati nelle animazioni.Describes the Timeline types and properties used in animations.
Cenni preliminari sugli eventi di tempoTiming Events Overview Vengono descritti gli eventi disponibili nell'Timeline e Clock oggetti per l'esecuzione di codice nei punti della sequenza temporale, ad esempio Begin, pause, Resume, Skip o stop.Describes the events available on the Timeline and Clock objects for executing code at points in the timeline, such as begin, pause, resume, skip, or stop.
Procedure relative alla struttura ad albero e alla serializzazione degli elementiHow-to Topics Contiene esempi di codice per usare animazioni e sequenze temporali in un'applicazione.Contains code examples for using animations and timelines in your application.
Procedure relative a oggetti ClockClocks How-to Topics Contiene esempi di codice per l'utilizzo dell'oggetto Clock nell'applicazione.Contains code examples for using the Clock object in your application.
Procedure relative ai fotogrammi chiaveKey-Frame How-to Topics Contiene esempi di codice per l'uso di animazioni con fotogrammi chiave in un'applicazione.Contains code examples for using key-frame animations in your application.
Procedure relative all'animazione percorsoPath Animation How-to Topics Contiene esempi di codice per l'uso di animazioni basate su tracciato in un'applicazione.Contains code examples for using path animations in your application.

RiferimentoReference