Animazioni con storyboardStoryboarded animations

Le animazioni con storyboard non sono semplici animazioni visive.Storyboarded animations are not just animations in the visual sense. Un'animazione con storyboard consente di modificare il valore di una proprietà di dipendenza come funzione temporale.A storyboarded animation is a way to change the value of a dependency property as a function of time. Uno dei motivi principali per cui ti potrebbe servire un'animazione con storyboard non inclusa nella libreria di animazioni è definire lo stato di visualizzazione di un controllo nell'ambito di un modello di controllo o di una definizione pagina.One of the main reasons you might need a storyboarded animation that's not from the animation library is to define the visual state for a control, as part of a control template or page definition.

Differenze con Silverlight e WPFDifferences with Silverlight and WPF

Leggi questa sezione se hai familiarità con Microsoft Silverlight o Windows Presentation Foundation, in caso contrario puoi saltarla.If you are familiar with Microsoft Silverlight or Windows Presentation Foundation (WPF), read this section; otherwise, you can skip it.

La creazione di animazioni con storyboard nelle app di Windows Runtime è simile a Silverlight o WPF.In general, creating storyboarded animations in a Windows Runtime app is like Silverlight or WPF. Esistono tuttavia alcune importanti differenze:But there are a number of important differences:

  • Le animazioni con storyboard non sono l'unico modo disponibile per animare visivamente l'interfaccia utente, né necessariamente il più semplice.Storyboarded animations are not the only way to visually animate a UI, nor are they necessarily the easiest way for app developers to do so. In fase di progettazione, invece delle animazioni con storyboard spesso è meglio usare le animazioni di tema o gli effetti di transizione,Rather than using storyboarded animations it's often a better design practice to use theme animations and transition animations. che permettono di creare rapidamente le animazioni consigliate per l'interfaccia utente senza le complicazioni legate alla definizione della destinazione delle proprietà di animazione.These can quickly create recommended UI animations without getting into the intricacies of animation property targeting. Per altre informazioni, vedi Panoramica delle animazioni.For more info see Animations overview.
  • In Windows Runtime molti controlli XAML includono nel comportamento predefinito animazioni di tema ed effetti di transizione,In the Windows Runtime, many XAML controls include theme animations and transition animations as part of their built-in behavior. mentre gran parte dei controlli di WPF e Silverlight non disponeva di un comportamento predefinito per quanto riguarda le animazioni.For the most part, WPF and Silverlight controls didn't have a default animation behavior.
  • Non tutte le animazioni personalizzate che crei possono essere eseguite in un'app di Windows Runtime per impostazione predefinita, se il sistema di animazione determina che potrebbero ridurre le prestazioni dell'interfaccia utente.Not all custom animations you create can run by default in a Windows Runtime app, if the animation system determines that the animation might cause bad performance in your UI. Le animazioni per cui il sistema determina che potrebbero influire sulle prestazioni sono denominate animazioni dipendenti.Animations where the system determines there could be a performance impact are called dependent animations. Sono dipendenti perché la temporizzazione dell'animazione ostacola direttamente il thread dell'interfaccia utente, che fornisce il contesto per l'input da parte dell'utente attivo e in cui gli altri aggiornamenti tentano di applicare le modifiche di runtime all'interfaccia utente.It's dependent because the clocking of your animation is directly working against the UI thread, which is also where active user input and other updates are trying to apply the runtime changes to UI. Un'animazione dipendente che consuma una notevole quantità di risorse di sistema nel thread dell'interfaccia utente può provocare un'apparente mancanza di risposta dell'app in determinate situazioni.A dependent animation that's consuming extensive system resources on the UI thread can make the app appear unresponsive in certain situations. Se un'animazione causa una modifica del layout o ha un potenziale impatto sulle prestazioni del thread dell'interfaccia utente, spesso è necessario abilitarla esplicitamente affinché venga eseguita.If your animation causes a layout change or otherwise has the potential to impact performance on the UI thread, you often need to explicitly enable the animation to see it run. Questo è proprio lo scopo della proprietà EnableDependentAnimation per specifiche classi di animazione.That's what the EnableDependentAnimation property on specific animation classes is for. Per altre info, vedi Animazioni dipendenti e indipendenti.See Dependent and independent animations for more info.
  • Attualmente, Windows Runtime non supporta funzioni di interpolazione personalizzate.Custom easing functions are not currently supported in the Windows Runtime.

Definizione di animazione con storyboardDefining storyboarded animations

Un'animazione con storyboard consente di modificare il valore di una proprietà di dipendenza come funzione temporale.A storyboarded animation is a way to change the value of a dependency property as a function of time. La proprietà di cui esegui l'animazione non sempre influisce direttamente sull'interfaccia utente della tua app,The property you are animating is not always a property that directly affects the UI of your app. tuttavia, siccome il linguaggio XAML si usa per definire l'interfaccia utente delle app, in genere le proprietà animate sono correlate all'interfaccia utente.But since XAML is about defining UI for an app, usually it is a UI-related property you are animating. Ad esempio, puoi animare l'angolo di un oggetto RotateTransform o il valore del colore di un pulsante.For example, you can animate the angle of a RotateTransform, or the color value of a button's background.

Uno dei motivi principali per definire un'animazione storyboard se sei un autore di controlli o devi creare un nuovo modello per un controllo esistente è la definizione degli stati di visualizzazione.One of the main reasons you might be defining a storyboarded animation is if you are a control author or are re-templating a control, and you are defining visual states. Per altre info, vedi Animazioni con storyboard per stati di visualizzazione.For more info, see Storyboarded animations for visual states.

Gran parte dei concetti e delle API descritti in questo argomento si applica indifferentemente alla definizione degli stati di visualizzazione o delle animazioni personalizzate dell'app.Whether you are defining visual states or a custom animation for an app, the concepts and APIs for storyboarded animations that are described in this topic mostly apply to either.

Per poter essere animata, la proprietà di destinazione dell'animazione con storyboard deve essere una proprietà di dipendenza.In order to be animated, the property you are targeting with a storyboarded animation must be a dependency property. Una proprietà di dipendenza è una funzionalità fondamentale dell'implementazione del linguaggio XAML di Windows Runtime.A dependency property is a key feature of the Windows Runtime XAML implementation. Le proprietà scrivibili dei più comuni elementi di interfaccia utente sono in genere implementate come proprietà di dipendenza, per consentirti di animarle o di applicare i valori associati ai dati o una proprietà Style e destinare un oggetto Setter alla proprietà.The writeable properties of most common UI elements are typically implemented as dependency properties, so that you can animate them, apply data-bound values, or apply a Style and target the property with a Setter. Per altre info sul funzionamento delle proprietà di dipendenza, vedi Panoramica delle proprietà di dipendenza.For more info about how dependency properties work, see Dependency properties overview.

In genere, per definire un'animazione con storyboard si usa il linguaggio XAML.Most of the time, you define a storyboarded animation by writing XAML. Se usi uno strumento come Microsoft Visual Studio, questo eseguirà la scrittura del codice XAML al posto tuo.If you use a tool such as Microsoft Visual Studio, it will produce the XAML for you. È possibile definire un'animazione con storyboard anche usando altro codice, ma questa è una prassi meno diffusa.It's possible to define a storyboarded animation using code too, but that's less common.

Si osservi l'esempio seguente.Let's look at a simple example. In questo esempio di XAML, la proprietà Opacity viene animata su un oggetto Rectangle specifico.In this XAML example, the Opacity property is animated on a particular Rectangle object.

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>

  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

Identificazione dell'oggetto a cui applicare un'animazioneIdentifying the object to animate

Nell'esempio precedente, lo storyboard doveva applicare un'animazione alla proprietà Opacity di un oggetto Rectangle.In the previous example, the storyboard was animating the Opacity property of a Rectangle. Non devi dichiarare le animazioni sull'oggetto stesso,You don't declare the animations on the object itself. In alternativa, è possibile eseguire questa operazione all'interno della definizione di animazione di uno storyboard.Instead, you do this within the animation definition of a storyboard. Gli storyboard vengono in genere definiti in XAML che non si trova nella prossimità immediata della definizione dell'interfaccia utente XAML dell'oggetto a cui aggiungere un'animazione.Storyboards are usually defined in XAML that's not in the immediate vicinity of the XAML UI definition of the object to animate. e vengono impostati come risorsa XAML.Instead, they're usually set up as a XAML resource.

Per collegare un'animazione alla sua destinazione devi fare riferimento a quest'ultima con il relativo identificativo di programmazione.To connect an animation to a target, you reference the target by its identifying programming name. Ti consigliamo di applicare sempre l'attributo x:Name alla definizione dell'interfaccia utente in XAML per assegnare un nome all'oggetto a cui vuoi applicare l'animazione.You should always apply the x:Name attribute in the XAML UI definition to name the object that you want to animate. Quindi, definisci l'oggetto destinazione dell'animazione impostando Storyboard.TargetName all'interno della definizione dell'animazione.You then target the object to animate by setting Storyboard.TargetName within the animation definition. Per quanto riguarda il valore di Storyboard.TargetName, usa la stringa del nome dell'oggetto di destinazione, vale a dire quella che hai impostato prima in un altro punto usando l'attributo x:Name.For the value of Storyboard.TargetName, you use the name string of the target object, which is what you set earlier and elsewhere with x:Name attribute.

Identificazione della proprietà di dipendenza a cui applicare un'animazioneTargeting the dependency property to animate

È possibile impostare un valore per storyboard. TargetProperty nell'animazione.You set a value for Storyboard.TargetProperty in the animation. per stabilire la proprietà dell'oggetto di destinazione a cui applicare l'animazione.This determines which specific property of the targeted object is animated.

A volte è necessario identificare una proprietà non immediatamente riferibile all'oggetto di destinazione, ma annidata a un livello più profondo della relazione oggetto-proprietà;Sometimes you need to target a property that's not an immediate property of the target object, but that is nested more deeply in an object-property relationship. questo per eseguire il drill down in un insieme di valori di oggetti e proprietà fino a trovare a un tipo di proprietà a cui applicare l'animazione che puoi usare come riferimento (Double, Point, Color).You often need to do this in order to drill down into a set of contributing object and property values until you can reference a property type that can be animated (Double, Point, Color). Questo concetto si chiama selezione indiretta della destinazione, mentre la sintassi usata per selezionare in questo modo una proprietà come destinazione è nota come percorso proprietà.This concept is called indirect targeting, and the syntax for targeting a property in this way is known as a property path.

Ecco un esempio.Here's an example. Uno degli scenari per cui si ricorre solitamente all'animazione con storyboard è per cambiare il colore di parte dell'interfaccia utente o di un controllo dell'app per indicare che il controllo si trova in un determinato stato.One common scenario for a storyboarded animation is to change the color of a part of an app UI or control in order to represent that the control is in a particular state. Si desidera animare il primo piano di un TextBlock, in modo che venga trasformato da rosso a verde.Say you want to animate the Foreground of a TextBlock, so that it turns from red to green. Ci si aspetterebbe che sia necessario un ColorAnimation e che sia corretto.You'd expect that a ColorAnimation is involved, and that's correct. Tuttavia, nessuna delle proprietà sugli elementi dell'interfaccia utente che influiscono sul colore dell'oggetto è effettivamente di tipo color.However, none of the properties on UI elements that affect the object's color are actually of type Color. Sono invece di tipo Brush.Instead, they're of type Brush. Quindi, la destinazione dell'animazione che devi effettivamente selezionare è la proprietà Color della classe SolidColorBrush, ovvero un tipo di proprietà derivata dal tipo Brush usata in genere per le proprietà dell'interfaccia utente relative ai colori.So what you actually need to target for animation is the Color property of the SolidColorBrush class, which is a Brush-derived type that's typically used for these color-related UI properties. Di seguito è riportato un esempio di percorso proprietà per selezionare una proprietà come destinazione dell'animazione:And here's what that looks like in terms of forming a property path for your animation's property targeting:

<Storyboard x:Name="myStoryboard">
  <ColorAnimation
    Storyboard.TargetName="tb1"
    Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
    From="Red" To="Green"/>
</Storyboard>

Ecco come considerare la sintassi in base alle parti che la compongono:Here's how to think of this syntax in terms of its parts:

  • Ciascuna coppia di parentesi () racchiude il nome di una proprietà.Each set of () parentheses encloses a property name.
  • Il nome della proprietà include un punto, usato per separare il nome del tipo dal nome della proprietà, per consentirti di individuare la proprietà con esattezza.Within the property name, there's a dot, and that dot separates a type name and a property name, so that the property you're identifying is unambiguous.
  • Il punto non racchiuso dalle parentesi rappresenta un passaggioThe dot in the middle, the one that's not inside parentheses, is a step. che viene interpretato dalla sintassi in questo modo: prendi il valore della prima proprietà (che è un oggetto), esegui l'istruzione del relativo modello di oggetti e seleziona come destinazione una proprietà secondaria specifica del valore della prima proprietà.This is interpreted by the syntax to mean, take the value of the first property (which is an object), step into its object model, and target a specific sub-property of the first property's value.

Di seguito è riportato un elenco degli scenari di destinazione dell'animazione in cui probabilmente si utilizzerà la destinazione indiretta delle proprietà e alcune stringhe di percorso delle proprietà che approssimano la sintassi da utilizzare:Here's a list of animation targeting scenarios where you'll probably be using indirect property targeting, and some property path strings that approximates the syntax you'll use:

Come puoi notare, in alcuni di questi esempi c'è un numero racchiuso tra parentesi quadre.You'll notice some of these examples use square brackets around numbers. Si tratta di un indicizzatoreThis is an indexer. che indica che il nome della proprietà che lo precede ha come valore una raccolta e che ti serve un elemento di quella raccolta identificato da un indice con base zero.It indicates that the property name preceding it has a collection as value, and that you want an item (as identified by a zero-based index) from within that collection.

Puoi anche applicare un'animazione alle proprietà XAML associate.You can also animate XAML attached properties. Ricordati di racchiudere sempre tra parentesi la proprietà associata completa, ad esempio (Canvas.Left).Always enclose the full attached property name in parentheses, for example (Canvas.Left). Per altre info, vedi Animazione di proprietà XAML associate.For more info, see Animating XAML attached properties.

Per altre info su come usare un percorso di proprietà per la selezione indiretta della proprietà di destinazione a cui applicare un'animazione, vedi Sintassi proprietà-percorso o Proprietà associata Storyboard.TargetProperty.For more info on how to use a property path for indirect targeting of the property to animate, see Property-path syntax or Storyboard.TargetProperty attached property.

Tipi di animazioneAnimation types

Nel sistema di animazione di Windows Runtime esistono tre tipi di animazione specifica a cui si possono applicare animazioni con storyboard:The Windows Runtime animation system has three specific types that storyboarded animations can apply to:

Esiste anche un tipo di animazione Object generico per i valori di riferimento degli oggetti, ma ne parleremo in seguito.There's also a generalized Object animation type for object reference values, which we'll discuss later.

Specificazione dei valori animatiSpecifying the animated values

Finora abbiamo spiegato come definire l'oggetto e la proprietà di destinazione dell'animazione, ma non cosa succede al valore della proprietà quando si esegue l'animazione.So far we've shown you how to target the object and the property to animate, but haven't yet described what the animation does to the property value when it runs.

I tipi di animazione descritti sono talvolta denominati da / a / da animazioni.The animation types we've described are sometimes referred to as From/To/By animations. Ciò significa che l'animazione modifica nel tempo il valore di una proprietà usando uno o più input provenienti dalla definizione dell'animazione:This means that the animation is changing the value of a property, over time, using one or more of these inputs that come from the animation definition:

  • Il valore inizia in corrispondenza del valore From.The value starts at the From value. Se non specifichi un valore From, il valore di partenza sarà quello della proprietà animata prima che venga eseguita l'animazione.If you don't specify a From value, the starting value is whatever value the animated property has at the time before the animation runs. Potrebbe trattarsi di un valore predefinito, del valore di uno stile o di un modello, oppure di un valore applicato specificatamente alla definizione dell'interfaccia utente in XAML o al codice dell'app.This might be a default value, a value from a style or template, or a value specifically applied by a XAML UI definition or app code.
  • Al termine dell'animazione, il valore sarà il valore To.At the end of the animation, the value is the To value.
  • In alternativa, per specificare un valore finale relativo a quello iniziale, imposta la proprietà ByOr, to specify an ending value relative to the starting value, set the By property. invece della proprietà To.You'd set this instead of the To property.
  • Se non specifichi un valore To o By, il valore finale sarà quello della proprietà animata prima che venga eseguita l'animazione.If you don't specify a To value or a By value, the ending value is whatever value the animated property has at the time before the animation runs. In questo caso sarebbe meglio un valore From, altrimenti l'animazione non cambierà affatto il valore: il valore iniziale e quello finale coincidono.In this case you'd better have a From value because otherwise the animation won't change the value at all; its starting and ending values are both the same.
  • In genere, un'animazione contiene almeno uno dei valori From, By o To, ma mai tutti e tre.An animation typically has at least one of From, By or To but never all three.

Riprendiamo l'esempio di codice XAML che abbiamo visto prima e osserviamo ancora una volta i valori From e To e Duration.Let's revisit the earlier XAML example and look again at the From and To values, and the Duration. Nell'esempio viene applicata un'animazione alla proprietà Opacity e il tipo di Opacity è Double,The example is animating the Opacity property, and the property type of Opacity is Double. perciò, l'animazione da usare in questo caso sarà DoubleAnimation.So the animation to use here is DoubleAnimation.

From="1.0" To="0.0" Specifica che quando viene eseguita l'animazione, la proprietà Opacity inizia con un valore pari a 1 e aggiunge un'animazione a 0.From="1.0" To="0.0" specifies that when the animation runs, the Opacity property starts at a value of 1 and animates to 0. In altre parole, relativamente al significato dei valori Double rispetto alla proprietà Opacity, applicando questa animazione l'oggetto, opaco all'inizio, diventerà via via sempre più trasparente, fino a scomparire.In other words, in terms of what these Double values mean to the Opacity property, this animation will cause the object to start opaque and then fade to transparent.

...
<Storyboard x:Name="myStoryboard">
  <DoubleAnimation
    Storyboard.TargetName="MyAnimatedRectangle"
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:1"/>
</Storyboard>
...

Duration="0:0:1" Specifica la durata dell'animazione, ovvero la velocità con cui il rettangolo si dissolve.Duration="0:0:1" specifies how long the animation lasts, that is, how fast the rectangle fades. La proprietà Duration è specificata in questo formato: ore:minuti:secondi.A Duration property is specified in the form of hours:minutes:seconds. In questo esempio, la durata è pari a un secondo.The time duration in this example is one second.

Per ulteriori informazioni sui valori di durata e sulla sintassi XAML, vedere Duration.For more info about Duration values and the XAML syntax, see Duration.

Nota

Per l'esempio illustrato, se si è certi che lo stato iniziale dell'oggetto a cui si sta aggiungendo un' animazione è sempre uguale a 1, tramite il valore predefinito o un set esplicito, è possibile omettere il valore from , l'animazione utilizzerà il valore iniziale implicito e il risultato sarà lo stesso.For the example we showed, if you were sure that the starting state of the object being animated has Opacity always equal to 1, either through the default or an explicit set, you could omit the From value, the animation would use the implicit starting value, and the result would be the same.

I valori From/To/By sono nullableFrom/To/By are nullable

Abbiamo già avuto modo di spiegare che puoi omettere il valore di From, To o By e usare i valori non animati correnti per sostituire un valore mancante.We mentioned previously that you can omit From, To or By and thus use current non-animated values as substitutes for a missing value. Le proprietà from, too by di un'animazione non sono del tipo che è possibile indovinare.From, To, or By properties of an animation aren't of the type you might guess. Il tipo della proprietà DoubleAnimation.to , ad esempio, non è Double.For example the type of the DoubleAnimation.To property isn't Double. È invece un Nullable per Double.Instead, it's a Nullable for Double. Il suo valore predefinito è null e non 0.And its default value is null, not 0. Tale valore null è il modo in cui il sistema di animazione distingue che non è stato impostato in modo specifico un valore per una proprietà from, too by .That null value is how the animation system distinguishes that you haven't specifically set a value for a From, To, or By property. Non esiste il tipo Nullable delle estensioni del componente Visual C++ (C++/CX) e al suo posto si usa il tipo IReference.Visual C++ component extensions (C++/CX) doesn't have a Nullable type, so it uses IReference instead.

Altre proprietà delle animazioniOther properties of an animation

Le proprietà descritte di seguito in questa sezione sono tutte proprietà facoltative, nel senso che i loro valori predefiniti sono adeguati per la maggior parte delle animazioni.The next properties described in this section are all optional in that they have defaults that are appropriate for most animations.

Proprietà AutoReverseAutoReverse

Se non si specifica AutoReverse o RepeatBehavior in un'animazione, tale animazione viene eseguita una volta e viene eseguita per il tempo specificato come durata.If you don't specify either AutoReverse or RepeatBehavior on an animation, that animation will run once, and run for the time specified as the Duration.

La proprietà AutoReverse specifica se una sequenza temporale viene riprodotta in senso inverso dopo il raggiungimento della fine della durata.The AutoReverse property specifies whether a timeline plays in reverse after it reaches the end of its Duration. Se imposti il valore su true, al termine del periodo di Duration dichiarato, l'animazione viene eseguita al contrario e il valore finale To diventa il valore iniziale From.If you set it to true, the animation reverses after it reaches the end of its declared Duration, changing the value from its ending value (To) back to its starting value (From). In questo modo l'animazione viene eseguita per un periodo di tempo doppio rispetto al valore di Duration.This means that the animation effectively runs for double the time of its Duration.

RepeatBehaviorRepeatBehavior

La proprietà RepeatBehavior specifica il numero di volte in cui viene riprodotta una sequenza temporale o una durata maggiore della ripetizione della sequenza temporale.The RepeatBehavior property specifies either how many times a timeline plays, or a larger duration that the timeline should repeat within. Per impostazione predefinita, le sequenze temporali hanno un numero di iterazioni di "1x", vale a dire che vengono eseguite una sola volta per il tempo della Duration senza più ripetersi.By default, a timeline has an iteration count of "1x", which means it plays one time for its Duration and does not repeat.

È possibile fare in modo che l'animazione esegua più iterazioni.You can cause the animation to run multiple iterations. Il valore "3x", ad esempio, fa sì che l'animazione venga eseguita tre volte.For example, a value of "3x" causes the animation to run three times. In alternativa, è possibile specificare una durata diversa per RepeatBehavior.Or, you can specify a different Duration for RepeatBehavior. Perché questa modifica sia effettiva, devi specificare un valore di Duration superiore al valore di Duration dell'animazione stessa.That Duration should be longer than the Duration of the animation itself to be effective. Ad esempio, se per un'animazione con un valore di Duration di "0:0:2" specifichi un valore di RepeatBehavior di "0:0:10", l'animazione si ripeterà cinque volte.For example, if you specify a RepeatBehavior of "0:0:10", for an animation that has a Duration of "0:0:2", that animation repeats five times. Se la divisione non restituisce un valore intero, l'animazione viene troncata quando si raggiunge il valore di RepeatBehavior, che può essere anche a metà dell'esecuzione.If these don't divide evenly, the animation gets truncated at the time that the RepeatBehavior time is reached, which might be partway through. Infine, è possibile specificare il valore speciale "Forever", che causa l'esecuzione infinita dell'animazione fino a quando non viene intenzionalmente arrestato.Finally, you can specify the special value "Forever", which causes the animation to run infinitely until it's deliberately stopped.

Per altre info sui valori di RepeatBehavior e la sintassi XAML, vedi RepeatBehavior.For more info about RepeatBehavior values and the XAML syntax, see RepeatBehavior.

FillBehavior="Stop"FillBehavior="Stop"

Per impostazione predefinita, al termine dell'esecuzione l'animazione lascia come valore finale modificato di To o By il valore della proprietà, anche dopo che è stata sorpassata la sua durata.By default, when an animation ends, the animation leaves the property value as the final To or By-modified value even after its duration is surpassed. Se però imposti il valore della proprietà FillBehavior su FillBehavior.Stop, il valore animato torna al valore che aveva prima che venisse applicata l'animazione, o più precisamente al valore corrente effettivo stabilito dal sistema di proprietà di dipendenza. Per altre info su questa distinzione, vedi Panoramica delle proprietà di dipendenza.However, if you set the value of the FillBehavior property to FillBehavior.Stop, the value of the animated value reverts to whatever the value was before the animation was applied, or more precisely to the current effective value as determined by the dependency property system (for more info on this distinction, see Dependency properties overview).

BeginTimeBeginTime

Per impostazione predefinita, il BeginTime di un'animazione è "0:0:0", quindi inizia non appena viene eseguito lo storyboard che lo contiene.By default, the BeginTime of an animation is "0:0:0", so it begins as soon as its containing Storyboard runs. Puoi modificare questo valore se Storyboard contiene più di un'animazione e desideri scaglionare l'inizio di tutte le animazioni successive a quella iniziale oppure vuoi creare deliberatamente un breve ritardo.You might change this if the Storyboard contains more than one animation and you want to stagger the start times of the others versus an initial animation, or to create a deliberate short delay.

SpeedRatioSpeedRatio

Se lo Storyboard contiene più di un'animazione, puoi modificare la frequenza di una o più animazioni relative allo Storyboard.If you have more than one animation in a Storyboard you can change the time rate of one or more of the animations relative to the Storyboard. Alla fine è lo Storyboard padre a controllare come trascorre il tempo di Duration durante l'esecuzione delle animazioni.It's the parent Storyboard that ultimately controls how the Duration time elapses while the animations run. Questa proprietà non viene usata molto spesso.This property isn't used very often. Per altre informazioni, vedere SpeedRatio.For more info see SpeedRatio.

Definizione di più di un'animazione in uno StoryboardDefining more than one animation in a Storyboard

I contenuti di uno Storyboard possono essere più di una definizione dell'animazione.The contents of a Storyboard can be more than one animation definition. Ci può essere più di un'animazione se applichi animazioni correlate a due proprietà dello stesso oggetto di destinazione.You might have more than one animation if you are applying related animations to two properties of the same target object. Ad esempio, se cambi entrambe le proprietà TranslateX e TranslateY di una classe TranslateTransform utilizzata come RenderTransform di un elemento dell'interfaccia utente l'elemento verrà traslato in diagonale.For example, you might change both the TranslateX and TranslateY properties of a TranslateTransform used as the RenderTransform of a UI element; this will cause the element to translate diagonally. Per ottenere questo risultato sono necessarie due animazioni diverse, ma ti consigliamo di usare animazioni appartenenti allo stesso Storyboard perché le due animazioni devono sempre essere eseguite insieme.You need two different animations to accomplish that, but you might want the animations to be part of the same Storyboard because you always want those two animations to be run together.

In ogni caso, non è necessario che le due animazioni siano dello stesso tipo, né che abbiano lo stesso oggetto di destinazione.The animations don't have to be the same type, or target the same object. Possono anche avere durate diverse e non condividere alcun valore di proprietà.They can have different durations, and don't have to share any property values.

Quando si esegue lo Storyboard padre vengono eseguite anche le animazioni al suo interno.When the parent Storyboard runs, each of the animations within will run too.

La classe Storyboard ha effettivamente molte delle proprietà di animazione dei tipi di animazione, dato che entrambe appartengono alla stessa classe Timeline di base.The Storyboard class actually has a lot of the same animation properties as the animation types do, because both share the Timeline base class. Perciò, uno Storyboard può avere una proprietà RepeatBehavior o BeginTime.Thus, a Storyboard can have a RepeatBehavior, or a BeginTime. Tuttavia, in genere non imposti queste proprietà su uno Storyboard a meno che non desideri che tutte la animazioni contenute abbiano questo comportamento.You don't usually set these on a Storyboard though unless you want all the contained animations to have that behavior. In generale, tutte le proprietà Timeline impostate su uno Storyboard si applicano alle relative animazioni figlie.As a general rule, any Timeline property as set on a Storyboard applies to all its child animations. Se non specifichi impostazioni, lo Storyboard avrà una durata implicita calcolata a partire dal valore di Duration più lungo delle animazioni che contiene.If let unset, the Storyboard has an implicit duration that's calculated from the longest Duration value of the contained animations. Un valore di Duration impostato esplicitamente per uno Storyboard e inferiore al valore di una delle animazioni figlie provocherà l'interruzione dell'animazione, cosa che in genere si preferisce evitare.An explicitly set Duration on a Storyboard that's shorter than one of its child animations will cause that animation to get cut off, which isn't usually desirable.

Uno storyboard non può contenere due animazioni che tentano di selezionare come destinazione e animare la stessa proprietà dello stesso oggetto.A storyboard can't contain two animations that attempt to target and animate the same property on the same object. Se tenti di fare così, a ogni tentativo di esecuzione dello storyboard verrà visualizzato un errore di runtime.If you try this, you'll get a runtime error when the storyboard tries to run. Questa restrizione è valida anche se le animazioni non si sovrappongono perché hanno durate e valori di BeginTime deliberatamente diversi.This restriction applies even if the animations don't overlap in time because of deliberately different BeginTime values and durations. Se veramente desideri applicare alla stessa proprietà di un unico storyboard una sequenza temporale dell'animazione più complessa, il metodo corretto è usare un'animazione con fotogrammi chiave.If you really want to apply a more complex animation timeline to the same property in a single storyboard, the way to do this is to use a key-frame animation. Vedi Animazioni basate su fotogrammi chiave e animazioni con funzioni di interpolazione.See Key-frame and easing function animations.

Il sistema di animazione può applicare al valore della proprietà più di un'animazione se gli input provengono da più storyboard.The animation system can apply more than one animation to the value of a property, if those inputs come from multiple storyboards. L'uso intenzionale di questo comportamento per eseguire contemporaneamente più storyboard è poco diffuso.Using this behavior deliberately for simultaneously running storyboards isn't common. Tuttavia, è possibile che un'animazione definita dall'app applicata alla proprietà di un controllo modifichi il valore HoldEnd di un'animazione eseguita in precedenza come parte del modello dello stato di visualizzazione del controllo.However it's possible that an app-defined animation that you apply to a control property will be modifying the HoldEnd value of an animation that was previously run as part of the control's visual state model.

Definizione di uno storyboard come risorsaDefining a storyboard as a resource

Uno storyboard è il contenitore in cui vengono inseriti gli oggetti di animazione.A Storyboard is the container that you put animation objects in. In genere si definisce lo Storyboard come una risorsa disponibile per l'oggetto a cui si desidera applicare un'animazione, in Resources a livello di pagina oppure in Application.Resources.You typically define the Storyboard as a resource that is available to the object that you want to animate, either in page-level Resources or Application.Resources.

Il prossimo esempio mostra il modo in cui l'esempio di Storyboard precedente verrebbe contenuto in una definizione Resources a livello di pagina, dove lo Storyboard è una risorsa con chiavi della radice di Page.This next example shows how the previous example Storyboard would be contained in a page-level Resources definition, where the Storyboard is a keyed resource of the root Page. Tieni presente l'attributo x:Name.Note the x:Name attribute. Questo attributo indica il modo in cui definisci il nome delle variabili dello Storyboard, in modo che gli altri elementi dell'XAML e il codice possano fare riferimento allo Storyboard in un secondo momento.This attribute is how you define a variable name for the Storyboard, so that other elements in XAML as well as code can refer to the Storyboard later.

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>
  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

Definire le risorse nella radice XAML di un file XAML come page.xaml o app.xaml è una pratica comunemente utilizzata per organizzare le risorse con chiave nel codice XAML.Defining resources at the XAML root of a XAML file such as page.xaml or app.xaml is a common practice for how to organize keyed resources in your XAML. Puoi inoltre suddividere le risorse in file separati e unirle alle app o alle pagine.You also can factor resources into separate files and merge them into apps or pages. Per ulteriori informazioni, vedere la pagina relativa ai riferimenti alle risorse XAML e ResourceDictionary.For more info, see ResourceDictionary and XAML resource references.

Nota

Windows Runtime XAML supporta l'identificazione delle risorse tramite l' attributo x:Key o l' attributo x:Name.Windows Runtime XAML supports identifying resources either using the x:Key attribute or the x:Name attribute. L'uso dell'attributo x:Name è più diffuso per gli Storyboard, perché prima o poi dovrai usare il nome di una variabile per farvi riferimento in modo da poter chiamare il relativo metodo Begin ed eseguire le animazioni.Using x:Name attribute is more common for a Storyboard, because you'll want to reference it by variable name eventually, so that you can call its Begin method and run the animations. Se invece usi l'attributo x:Key, dovrai usare metodi di ResourceDictionary come l'indicizzatore Item per recuperarlo come risorsa con chiavi e poi eseguire il cast dell'oggetto recuperato nello Storyboard per utilizzare i metodi dello Storyboard.If you do use x:Key attribute, you'll need to use ResourceDictionary methods such as the Item indexer to retrieve it as a keyed resource and then cast the retrieved object to Storyboard to use the Storyboard methods.

Storyboard per gli Stati di visualizzazioneStoryboards for visual states

Devi inserire le tue animazioni in un'unità Storyboard anche quando dichiari le animazioni dello stato di visualizzazione per l'aspetto visivo di un controllo.You also put your animations within a Storyboard unit when you are declaring the visual state animations for a control's visual appearance. In tal caso, gli elementi Storyboard che definisci vengono inseriti in un contenitore VisualState annidato più profondamente in una risorsa Style (la risorsa con chiavi è Style).In that case the Storyboard elements you define go into a VisualState container that's nested more deeply in a Style (it's the Style that is the keyed resource). In questa situazione non hai bisogno di una chiave o di un nome per l'elemento Storyboard, perché il nome di destinazione richiamabile da VisualStateManager si trova in VisualState.You don't need a key or name for your Storyboard in this case because it's the VisualState that has a target name that the VisualStateManager can invoke. Gli stili per i controlli vengono spesso inseriti in file ResourceDictionary XAML separati, anziché inseriti in una pagina o nell'insieme Resources di un'app.The styles for controls are often factored into separate XAML ResourceDictionary files rather than placed in a page or app Resources collection. Per altre info, vedi Animazioni con storyboard per stati di visualizzazione.For more info, see Storyboarded animations for visual states.

Animazioni dipendenti e indipendentiDependent and independent animations

A questo punto dobbiamo introdurre alcuni aspetti importanti sul funzionamento del sistema di animazione.At this point we need to introduce some important points about how the animation system works. In particolare, l'animazione interagisce fondamentalmente sul rendering di un'app di Windows Runtime sullo schermo e sull'uso che il rendering fai dei thread di elaborazione.In particular, animation interacts fundamentally with how a Windows Runtime app renders to the screen, and how that rendering uses processing threads. Le app di Windows Runtime hanno sempre un thread UI principale che ha il compito di aggiornare lo schermo con le informazioni più recenti.A Windows Runtime app always has a main UI thread, and this thread is responsible for updating the screen with current information. Inoltre, queste app hanno un thread di composizione per il precalcolo dei layout subito prima che vengano visualizzati.In addition, a Windows Runtime app has a composition thread, which is used for precalculating layouts immediately before they are shown. Quando applichi un'animazione all'interfaccia utente esiste la possibilità di sovraccaricare il thread UI.When you animate the UI, there's potential to cause a lot of work for the UI thread. Il sistema deve ridisegnare ampie aree dello schermo negli intervalli di tempo relativamente brevi tra un aggiornamento e l'altro.The system must redraw large areas of the screen using fairly short time intervals between each refresh. È necessario procedere in questo modo per acquisire il valore più aggiornato della proprietà animata.This is necessary for capturing the latest property value of the animated property. Se non fai attenzione, c'è il rischio che l'animazione renda l'interfaccia utente meno reattiva oppure che comprometta le prestazioni di altre funzionalità dell'app che si trovano nello stesso thread UI.If you're not careful, there's risk that an animation can make the UI less responsive, or will impact performance of other app features that are also on the same UI thread.

Il tipo di animazione che, in base a quanto è stato stabilito, rischia di rallentare il thread UI è denominato animazione dipendente.The variety of animation that is determined to have some risk of slowing down the UI thread is called a dependent animation. Un'animazione non soggetta a questo rischio è invece un'animazione indipendente.An animation not subject to this risk is an independent animation. La distinzione tra animazioni dipendenti e indipendenti non è determinata solo dal tipo di animazione (DoubleAnimation e così via) come abbiamo spiegato in precedenza.The distinction between dependent and independent animations isn't just determined by animation types (DoubleAnimation and so on) as we described earlier. È determinata invece dalle specifiche proprietà a cui applichi l'animazione e da altri fattori come l'eredità e la composizione dei controlli.Instead, it's determined by which specific properties you are animating, and other factors like inheritance and composition of controls. In alcune circostanze, anche se un'animazione modifica effettivamente l'interfaccia utente, può influire in modo anche minimo sul thread UI ed essere gestita invece dal thread di composizione come un'animazione indipendente.There are circumstances where even if an animation does change UI, the animation can have minimal impact to the UI thread, and can instead be handled by the composition thread as an independent animation.

Un'animazione è indipendente se presenta una qualsiasi di queste caratteristiche:An animation is independent if it has any of these characteristics:

Avviso

Affinché l'animazione venga considerata come indipendente, è necessario impostare in modo esplicito Duration="0" .In order for your animation to be treated as independent, you must explicitly set Duration="0". Se rimuovi ad esempio Duration="0" da questo codice XAML, l'animazione viene considerata dipendente, anche se l'elemento KeyTime del fotogramma è "0:0:0".For example, if you remove Duration="0" from this XAML, the animation is treated as dependent, even though the KeyTime of the frame is "0:0:0".

<Storyboard>
  <DoubleAnimationUsingKeyFrames
    Duration="0"
    Storyboard.TargetName="Button2"
    Storyboard.TargetProperty="Width">
    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="200"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

Se la tua animazione non rispetti questi criteri, probabilmente è un'animazione dipendente.If your animation doesn't meet these criteria, it's probably a dependent animation. Per impostazione predefinita, il sistema di animazione non esegue le animazioni dipendenti,By default, the animation system won't run a dependent animation. perciò è possibile che durante il processo di sviluppo e test tu non riesca neanche a vedere l'animazione in esecuzione.So during the process of developing and testing, you might not even be seeing your animation running. Puoi usare lo stesso l'animazione, ma devi abilitare appositamente tutte le animazioni dipendenti, una per una.You can still use this animation, but you must specifically enable each such dependent animation. Per abilitare un'animazione, imposta la proprietà EnableDependentAnimation dell'oggetto animazione su true.To enable your animation, set the EnableDependentAnimation property of the animation object to true. Ogni sottoclasse di Timeline che rappresenta un'animazione ha un'implementazione diversa della proprietà, ma a tutte viene assegnato il nome di EnableDependentAnimation.(Each Timeline subclass that represents an animation has a different implementation of the property but they're all named EnableDependentAnimation.)

Il requisito per cui bisogna abilitare le animazioni dipendenti che rientrano nella sfera d'azione dello sviluppatore dell'app è un aspetto voluto del sistema di animazione e dell'esperienza di sviluppo.The requirement of enabling dependent animations falling onto the app developer is a conscious design aspect of the animation system and the development experience. Vogliamo che gli sviluppatori siano ben coscienti del fatto che le animazioni comportano un costo a livello di prestazioni per quanto riguarda la velocità di risposta dell'interfaccia utente.We want developers to be aware that animations do have a performance cost for the responsiveness of your UI. In un'app completa è difficile isolare ed eseguire il debug delle animazioni con prestazioni di scarso livello,Poorly performing animations are difficult to isolate and debug in a full-scale app. perciò è meglio attivare solo le animazioni dipendenti che contribuiscono davvero al funzionamento dell'interfaccia utente della tua app.So it's better to turn on only the dependent animations you really need for your app's UI experience. Non volevamo renderlo troppo semplice per compromettere le prestazioni dell'app a causa di animazioni decorative che usano un numero elevato di cicli.We didn't want to make it too easy to compromise your app's performance because of decorative animations that use a lot of cycles. Per altri suggerimenti sulle prestazioni delle animazioni, vedi Ottimizzare animazioni ed elementi multimediali.For more info on performance tips for animation, see Optimize animations and media.

In quanto sviluppatore di app, puoi anche scegliere di applicare un'impostazione a livello dell'intera app che disattiva sempre le animazioni dipendenti, anche quelle in cui EnableDependentAnimation è true.As an app developer, you can also choose to apply an app-wide setting that always disables dependent animations, even those where EnableDependentAnimation is true. Vedere Timeline. AllowDependentAnimations.See Timeline.AllowDependentAnimations.

Suggerimento

Se si usa il riquadro animazione in Blend per Visual Studio 2019, ogni volta che si tenta di applicare un'animazione dipendente a una proprietà di stato di visualizzazione, gli avvisi verranno visualizzati nella finestra di progettazione.If you're using the Animation Pane in Blend for Visual Studio 2019, whenever you attempt to apply a dependent animation to a visual state property, warnings will be displayed in the designer. Gli avvisi non vengono visualizzati nell'output di compilazione o Elenco errori.Warnings will not show in the build output or Error List. Se si modifica XAML manualmente, la finestra di progettazione non visualizzerà alcun avviso.If you're editing XAML by hand, the designer will not show a warning. In fase di esecuzione durante il debug, l'output di debug del riquadro di output visualizzerà un avviso che indica che l'animazione non è indipendente e verrà ignorata.At runtime when debugging, the Output pane's Debug output will show a warning that the animation is not independent and will be skipped.

Avvio e controllo di un'animazioneStarting and controlling an animation

Tutto quanto ti abbiamo spiegato finora effettivamente non consente l'esecuzione, né l'applicazione delle animazioni.Everything we've shown you so far doesn't actually cause an animation to run or be applied! Finché l'animazione non viene avviata e non è in esecuzione, i cambiamenti di valori che un'animazione dichiara nell'XAML sono latenti e non si manifestano.Until the animation is started and is running, the value changes that an animation is declaring in XAML are latent and won't happen yet. Devi avviare esplicitamente un'animazione in modo commisurato alla durata dell'app o all'esperienza utente.You must explicitly start an animation in some way that's related to the app lifetime or the user experience. A livello più semplice, le animazioni si avviano chiamando il metodo Begin nello Storyboard padre delle animazioni di avviare.At the simplest level, you start an animation by calling the Begin method on the Storyboard that's the parent for that animation. Non puoi chiamare direttamente i metodi dal codice XAML, perciò qualunque cosa faccia per attivare le animazioni, lo devi fare a partire dal codice.You can't call methods from XAML directly, so whatever you do to enable your animations, you'll be doing it from code. A questo punto può trattarsi del code-behind delle pagine o dei componenti dell'app o anche della logica del controllo se stai definendo la classe di un controllo personalizzato.That will either be the code-behind for the pages or components of your app, or perhaps the logic of your control if you're defining a custom control class.

In genere, si chiamerà Begin e si lascia solo che l'animazione venga eseguita fino al completamento della durata.Typically, you'll call Begin and just let the animation run to its duration completion. Per controllare lo Storyboard in fase di esecuzione e altre API utilizzate per scenari di controllo animazioni più avanzati, puoi optare anche per i metodi Pause, Resume e Stop.However, you can also use Pause, Resume and Stop methods to control the Storyboard at run-time, as well as other APIs that are used for more advanced animation control scenarios.

Quando si chiama Begin in uno storyboard che contiene un'animazione che si ripete infinitamente ( RepeatBehavior="Forever" ), tale animazione viene eseguita fino a quando non viene scaricata la pagina che lo contiene o si chiama in modo specifico pause o Stop.When you call Begin on a storyboard that contains an animation that repeats infinitely (RepeatBehavior="Forever"), that animation runs until the page containing it is unloaded, or you specifically call Pause or Stop.

Avvio di un'animazione dal codice dell'appStarting an animation from app code

Puoi scegliere se far avviare le animazioni automaticamente o in risposta alle azioni degli utenti.You can either start animations automatically, or in response to user actions. Per il caso automatico, si usa in genere un evento di durata dell'oggetto, ad esempio Loaded , che funge da trigger di animazione.For the automatic case, you typically use an object lifetime event such as Loaded to act as the animation trigger. L'evento Loaded è indicato a questo scopo perché a questo punto l'interfaccia utente è pronta per l'interazione e l'animazione non verrà troncata all'inizio perché si sta ancora caricando un'altra parte dell'interfaccia utente.The Loaded event is a good event to use for this because at that point the UI is ready for interaction, and the animation won't be cut off at the beginning because another part of UI was still loading.

Nell'esempio, al rettangolo è associato l'evento PointerPressed, quindi l'animazione ha inizio quando l'utente fa clic sul rettangolo.In this example, the PointerPressed event is attached to the rectangle so that when the user clicks the rectangle, the animation begins.

<Rectangle PointerPressed="Rectangle_Tapped"
  x:Name="MyAnimatedRectangle"
  Width="300" Height="200" Fill="Blue"/>

Il gestore dell'evento avvia l'oggetto Storyboard (l'animazione) usando il metodo Begin dello Storyboard.The event handler start the Storyboard (the animation) by using the Begin method of the Storyboard.

myStoryboard.Begin();
myStoryboard().Begin();
myStoryboard->Begin();
myStoryBoard.Begin()

Se vuoi che altra logica sia eseguita al termine dell'applicazione di valori da parte dell'animazione, puoi gestire l'evento Completed.You can handle the Completed event if you want other logic to run after the animation has finished applying values. Inoltre, per la risoluzione dei problemi relativi alle interazioni del sistema di proprietà/animazione, il metodo GetAnimationBaseValue può essere utile.Also, for troubleshooting property system/animation interactions, the GetAnimationBaseValue method can be useful.

Suggerimento

Ogni volta che si esegue la codifica per uno scenario di app in cui si avvia un'animazione dal codice dell'app, potrebbe essere necessario rivedere di nuovo se un'animazione o una transizione esiste già nella libreria di animazioni per lo scenario dell'interfaccia utente.Whenever you are coding for an app scenario where you are starting an animation from app code, you might want to review again whether an animation or transition already exists in the animation library for your UI scenario. L'uso delle animazioni della libreria garantisce un'interfaccia utente coerente per tutte le app di Windows Runtime e una maggiore facilità d'uso.The library animations enable a more consistent UI experience across all Windows Runtime apps, and are easier to use.

 

Animazioni per stati di visualizzazioneAnimations for visual states

Il comportamento in esecuzione di uno Storyboard utilizzato per definire lo stato di visualizzazione di un controllo varia rispetto a quello di un'app che esegue uno storyboard direttamente.The run behavior for a Storyboard that's used to define a control's visual state is different from how an app might run a storyboard directly. In quanto applicato alla definizione di uno stato di visualizzazione nel codice XAML, lo Storyboard è un elemento del VisualState che lo contiene e lo stato nel suo insieme viene controllato tramite l'API VisualStateManager.As applied to a visual state definition in XAML, the Storyboard is an element of a containing VisualState, and the state as a whole is controlled by using the VisualStateManager API. Tutte le animazioni che al suo interno verranno eseguite in base ai rispettivi valori di animazione e alle proprietà di Timeline quando la classe VisualState che le contiene viene utilizzata da un controllo.Any animations within will run according to their animation values and Timeline properties when the containing VisualState is used by a control. Per altre info, vedi Animazioni con storyboard per stati di visualizzazione.For more info, see Storyboards for visual states. Per gli stati visivi, il FillBehavior apparente è diverso.For visual states, the apparent FillBehavior is different. Se uno stato di visualizzazione viene modificato in un altro stato, tutte le modifiche alle proprietà applicati dallo stato di visualizzazione precedente e relative animazioni vengono annullati, anche se il nuovo stato di visualizzazione non applica in modo specifico un'animazione a una proprietà.If a visual state is changed to another state, all the property changes applied by the previous visual state and its animations are canceled, even if the new visual state doesn't specifically apply a new animation to a property.

Storyboard e EventTriggerStoryboard and EventTrigger

Esiste un modo per avviare un'animazione che si può dichiarare interamente nel codice XAML,There is one way to start an animation that can be declared entirely in XAML. anche se si tratta di una tecnica che non è più molto usata,However, this technique isn't widely used anymore. Si tratta di una sintassi legacy di WPF e delle prime versioni di Silverlight prima del supporto di VisualStateManager .It's a legacy syntax from WPF and early versions of Silverlight prior to VisualStateManager support. Questa sintassi EventTrigger è ancora funzionante nel codice XAML di Windows Runtime per ragioni di importazione/compatibilità, ma funziona solo per un comportamento di attivazione basato sull'evento FrameworkElement.Loaded; il tentativo di attivare altri eventi genera eccezioni oppure non viene compilato.This EventTrigger syntax still works in Windows Runtime XAML for import/compatibility reasons, but only works for a trigger behavior based on the FrameworkElement.Loaded event; attempting to trigger off other events will throw exceptions or fail to compile. Per ulteriori informazioni, vedere EventTrigger o BeginStoryboard.For more info, see EventTrigger or BeginStoryboard.

Animazione di proprietà XAML associateAnimating XAML attached properties

Sebbene non sia un metodo usato frequentemente, puoi applicare un valore animato a una proprietà XAML associata.It's not a common scenario, but you can apply an animated value to a XAML attached property. Per sapere cosa sono le proprietà associate e come funzionano, vedi Panoramica delle proprietà associate.For more info on what attached properties are and how they work, see Attached properties overview. Per selezionare una proprietà associata come destinazione è necessaria una sintassi proprietà-percorso che racchiude il nome della proprietà tra parentesi.Targeting an attached property requires a property-path syntax that encloses the property name in parentheses. È possibile aggiungere un'animazione alle proprietà associate predefinite, ad esempio Canvas. ZIndex , usando un ObjectAnimationUsingKeyFrames che applica valori interi discreti.You can animate the built-in attached properties such as Canvas.ZIndex by using an ObjectAnimationUsingKeyFrames that applies discrete integer values. Tuttavia, nell'implementazione del linguaggio XAML di Windows Runtime esiste una limitazione che impedisce di animare una proprietà associata personalizzata.However, an existing limitation of the Windows Runtime XAML implementation is that you cannot animate a custom attached property.

Altri tipi di animazioni e passaggi successivi per imparare ad animare l'interfaccia utenteMore animation types, and next steps for learning about animating your UI

Finora abbiamo illustrato le animazioni personalizzate che si attivano tra due valori e poi tramite l'interpolazione lineare dei valori secondo necessità durante l'esecuzione dell'applicazione.Up to now, we've shown the custom animations that are animating between two values, and then linearly interpolating the values as necessary while the animation runs. Questi vengono chiamati da / a / dalle animazioni.These are called From/To/By animations. Esiste però un altro tipo di animazione che ti consente di dichiarare valori intermedi compresi tra quello iniziale e quello finale.But there's another animation type that enables you to declare intermediate values that fall between the start and end. Queste animazioni sono dette animazioni con fotogrammi chiave.These are called key-frame animations. Esiste anche un modo per modificare la logica di interpolazione in un'animazione da / ada / o da un'animazionecon fotogrammi chiave.There's also a way to alter the interpolation logic on either a From/To/By animation or a key-frame animation. che consiste nell'applicazione di una funzione di interpolazione.This involves applying an easing function. Per altre info su questi concetti, vedi Animazioni basate fotogrammi chiave e animazioni con funzioni di interpolazione.For more info on these concepts, see Key-frame and easing function animations.