Animazioni con storyboard

  • Articolo

Le animazioni con storyboard non sono solo animazioni in senso visivo. Un'animazione con storyboard è un modo per modificare il valore di una proprietà di dipendenza come funzione del tempo. Uno dei motivi principali per cui potrebbe essere necessaria un'animazione con storyboard che non proviene dalla libreria di animazioni consiste nel definire lo stato di visualizzazione per un controllo, come parte di un modello di controllo o di una definizione di pagina.

Differenze con Silverlight e WPF

Se si ha familiarità con Microsoft Silverlight o Windows Presentation Foundation (WPF), leggere questa sezione; in caso contrario, è possibile ignorarlo.

In generale, la creazione di animazioni con storyboard in un'app di Windows Runtime è simile a Silverlight o WPF. Esistono tuttavia alcune differenze importanti:

  • Le animazioni con storyboard non sono l'unico modo per animare visivamente un'interfaccia utente, né sono necessariamente il modo più semplice per gli sviluppatori di app di farlo. Invece di usare animazioni con storyboard è spesso una procedura di progettazione migliore per usare animazioni a tema e animazioni di transizione. Questi possono creare rapidamente animazioni consigliate dell'interfaccia utente senza entrare nelle complessità della destinazione delle proprietà di animazione. Per altre info, vedere Panoramica delle animazioni.
  • In Windows Runtime molti controlli XAML includono animazioni di tema e animazioni di transizione come parte del comportamento predefinito. Nella maggior parte dei casi, i controlli WPF e Silverlight non hanno un comportamento di animazione predefinito.
  • Non tutte le animazioni personalizzate create possono essere eseguite per impostazione predefinita in un'app di Windows Runtime, se il sistema di animazione determina che l'animazione potrebbe causare prestazioni non ottimali nell'interfaccia utente. Le animazioni in cui il sistema determina che potrebbe esserci un impatto sulle prestazioni sono denominate animazioni dipendenti. Dipende dal fatto che l'orologio dell'animazione funziona direttamente sul thread dell'interfaccia utente, che è anche in cui l'input dell'utente attivo e altri aggiornamenti tentano di applicare le modifiche di runtime all'interfaccia utente. Un'animazione dipendente che utilizza risorse di sistema estese nel thread dell'interfaccia utente può rendere l'app non risponde in determinate situazioni. Se l'animazione causa una modifica del layout o ha il potenziale impatto sulle prestazioni sul thread dell'interfaccia utente, spesso è necessario abilitare in modo esplicito l'animazione per vederla eseguita. Questa è la proprietà EnableDependentAnimation per classi di animazione specifiche. Per altre info, vedi Animazioni dipendenti e indipendenti.
  • Le funzioni di interpolazione personalizzate non sono attualmente supportate in Windows Runtime.

Definizione di animazioni con storyboard

Un'animazione con storyboard è un modo per modificare il valore di una proprietà di dipendenza come funzione del tempo. La proprietà che stai animando non è sempre una proprietà che influisce direttamente sull'interfaccia utente della tua app. Tuttavia, poiché XAML riguarda la definizione dell'interfaccia utente per un'app, in genere si tratta di una proprietà correlata all'interfaccia utente che stai animando. Ad esempio, è possibile animare l'angolo di un oggetto RotateTransform o il valore di colore dello sfondo di un pulsante.

Uno dei motivi principali per cui potresti definire un'animazione con storyboard è se sei un autore di controlli o stai ricreando un controllo e stai definendo gli stati di visualizzazione. Per altre info, vedi Animazioni con storyboard per gli stati di visualizzazione.

Sia che si definiscano gli stati di visualizzazione o un'animazione personalizzata per un'app, i concetti e le API per le animazioni con storyboard descritte in questo argomento si applicano principalmente a entrambi.

Per essere animata, la proprietà di destinazione con un'animazione con storyboard deve essere una proprietà di dipendenza. Una proprietà di dipendenza è una funzionalità chiave dell'implementazione XAML di Windows Runtime. Le proprietà scrivibili degli elementi dell'interfaccia utente più comuni vengono in genere implementate come proprietà di dipendenza, in modo da poterle animare, applicare valori associati a dati o applicare uno Stile e impostare come destinazione la proprietà con un Setter. Per altre informazioni sul funzionamento delle proprietà di dipendenza, vedere Panoramica delle proprietà di dipendenza.

Nella maggior parte dei casi, definisci un'animazione con storyboard scrivendo XAML. Se usi uno strumento come Microsoft Visual Studio, genererà il codice XAML per te. È possibile definire anche un'animazione con storyboard usando codice, ma questo è meno comune.

Diamo un'occhiata a un semplice esempio. In questo esempio XAML la proprietà Opacity viene animata su un oggetto Rectangle specifico.

<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 da animare

Nell'esempio precedente lo storyboard animava la proprietà Opacity di un oggetto Rectangle. Non dichiari le animazioni sull'oggetto stesso. Questa operazione viene invece eseguita all'interno della definizione di animazione di uno storyboard. Gli storyboard vengono in genere definiti in XAML che non si trovano nelle immediate vicinanze della definizione dell'interfaccia utente XAML dell'oggetto da animare. Vengono in genere configurati come risorsa XAML.

Per connettere un'animazione a una destinazione, fai riferimento alla destinazione identificandone il nome di programmazione. Devi sempre applicare l'attributo x:Name nella definizione dell'interfaccia utente XAML per denominare l'oggetto che vuoi animare. L'oggetto verrà quindi impostato come destinazione per l'animazione impostando Storyboard.TargetName all'interno della definizione dell'animazione. Per il valore di Storyboard.TargetName, si usa la stringa del nome dell'oggetto di destinazione, ovvero ciò che è stato impostato in precedenza e altrove con l'attributo x:Name.

Destinazione della proprietà di dipendenza per animare

Impostare un valore per Storyboard.TargetProperty nell'animazione. Determina la proprietà specifica dell'oggetto di destinazione animata.

In alcuni casi è necessario impostare come destinazione una proprietà che non è una proprietà immediata dell'oggetto di destinazione, ma annidata in modo più profondo in una relazione di proprietà oggetto. È spesso necessario eseguire questa operazione per eseguire il drill-down in un set di valori di oggetto e proprietà che contribuiscono fino a quando non è possibile fare riferimento a un tipo di proprietà che può essere animato (Double, Point, Color). Questo concetto è denominato targeting indiretto e la sintassi per la destinazione di una proprietà in questo modo è nota come percorso di proprietà.

Ecco un esempio. Uno scenario comune per un'animazione con storyboard consiste nel modificare il colore di una parte di un'interfaccia utente o di un controllo dell'app per rappresentare che il controllo si trova in uno stato specifico. Si supponga di voler animare il primo piano di un controllo TextBlock, in modo da passare da rosso a verde. Ci si aspetterebbe che sia coinvolto un ColorAnimation e questo è corretto. Tuttavia, nessuna delle proprietà sugli elementi dell'interfaccia utente che influiscono sul colore dell'oggetto è effettivamente di tipo Color. Sono invece di tipo Brush. Quindi ciò che devi effettivamente impostare come destinazione per l'animazione è la proprietà Color della classe SolidColorBrush, che è un tipo derivato da Brush che viene in genere usato per queste proprietà dell'interfaccia utente correlate al colore. Ecco come appare in termini di forma di un percorso di proprietà per la destinazione della proprietà dell'animazione:

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

Ecco come considerare questa sintassi in termini di parti:

  • Ogni set di parentesi () racchiude un nome di proprietà.
  • All'interno del nome della proprietà è presente un punto e tale punto separa un nome di tipo e un nome di proprietà, in modo che la proprietà che si sta identificando sia ambigua.
  • Il punto al centro, quello che non è racchiuso tra parentesi, è un passaggio. Questa operazione viene interpretata dalla sintassi per indicare, accettare il valore della prima proprietà (ovvero un oggetto), eseguire un'istruzione nel modello a oggetti e impostare come destinazione una sottoproprietà specifica del valore della prima proprietà.

Ecco un elenco di scenari di destinazione dell'animazione in cui probabilmente userai la destinazione della proprietà indiretta e alcune stringhe di percorso delle proprietà che approssimano la sintassi che userai:

Si noterà che alcuni di questi esempi usano parentesi quadre intorno ai numeri. Si tratta di un indicizzatore. Indica che il nome della proprietà precedente ha una raccolta come valore e che si desidera un elemento (identificato da un indice in base zero) dall'interno di tale raccolta.

Puoi anche animare le proprietà associate XAML. Racchiudere sempre il nome completo della proprietà associata tra parentesi, ad esempio (Canvas.Left). Per altre informazioni, vedere Proprietà associate dell'animazione XAML.

Per altre info su come usare un percorso di proprietà per la destinazione indiretta della proprietà da animare, vedi sintassi del percorso proprietà o proprietà associata Storyboard.TargetProperty.

Tipi di animazione

Il sistema di animazione di Windows Runtime ha tre tipi specifici a cui possono essere applicate le animazioni con storyboard:

Esiste anche un tipo di animazione Object generalizzato per i valori di riferimento agli oggetti, che verranno illustrati più avanti.

Specifica dei valori animati

Finora abbiamo illustrato come impostare come destinazione l'oggetto e la proprietà per animare, ma non abbiamo ancora descritto le operazioni eseguite dall'animazione sul valore della proprietà durante l'esecuzione.

I tipi di animazione descritti sono talvolta definiti animazioni From/To/By. Ciò significa che l'animazione sta modificando il valore di una proprietà, nel tempo, usando uno o più di questi input provenienti dalla definizione dell'animazione:

  • Il valore inizia dal valore From . Se non specifichi un valore From , il valore iniziale è qualsiasi valore della proprietà animata al momento prima dell'esecuzione dell'animazione. Può trattarsi di un valore predefinito, di un valore di uno stile o di un modello o di un valore applicato in modo specifico da una definizione dell'interfaccia utente XAML o da un codice dell'app.
  • Alla fine dell'animazione, il valore è To.
  • In alternativa, per specificare un valore finale relativo al valore iniziale, impostare la proprietà By . È necessario impostare questa opzione al posto della proprietà A .
  • Se non specifichi un valore To o By, il valore finale è qualsiasi valore della proprietà animata al momento prima dell'esecuzione dell'animazione. In questo caso è preferibile avere un valore From perché in caso contrario l'animazione non cambierà affatto il valore. I relativi valori iniziali e finali sono entrambi uguali.
  • Un'animazione ha in genere almeno uno di From, By o To , ma non tutti e tre.

Esaminiamo di nuovo l'esempio XAML precedente e esaminiamo di nuovo i valori From e To e Duration. L'esempio consiste nell'animare la proprietà Opacity e il tipo di proprietà di Opacity è Double. Quindi l'animazione da usare qui è 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. In altre parole, in termini di ciò che questi valori Double significano per la proprietà Opacity, questa animazione causerà l'avvio opaco dell'oggetto e quindi la dissolvenza in trasparente.

...
<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 per quanto tempo l'animazione dura, ovvero la velocità con cui il rettangolo si dissolve. Una proprietà Duration viene specificata sotto forma di hours:minutes:seconds. La durata dell'intervallo di tempo in questo esempio è un secondo.

Per altre info sui valori di durata e sulla sintassi XAML, vedi Durata.

Nota

Per l'esempio mostrato, se si è certi che lo stato iniziale dell'oggetto animato abbia Opacity sempre uguale a 1, tramite l'impostazione predefinita o un set esplicito, è possibile omettere il valore From , l'animazione userà il valore iniziale implicito e il risultato sarà lo stesso.

From/To/By sono nullable

Abbiamo accennato in precedenza che è possibile omettere From, To o By e quindi usare i valori correnti non animati come sostituti di un valore mancante. Le proprietà From, To o By di un'animazione non sono del tipo che si potrebbe indovinare. Ad esempio, il tipo della proprietà DoubleAnimation.To non è Double. È invece un valore Nullable per Double. Il valore predefinito è null, non 0. Questo valore Null è il modo in cui il sistema di animazione distingue che non hai impostato in modo specifico un valore per una proprietà From, To o By . Le estensioni del componente Visual C++ (C++/CX) non hanno un tipo Nullable, quindi usa IReference.

Altre proprietà di un'animazione

Le proprietà successive descritte in questa sezione sono tutte facoltative in quanto dispongono di impostazioni predefinite appropriate per la maggior parte delle animazioni.

Proprietà AutoReverse

Se non specifichi AutoReverse o RepeatBehavior su un'animazione, l'animazione verrà eseguita una sola volta ed eseguita per l'ora specificata come Durata.

La proprietà AutoReverse specifica se una sequenza temporale viene riprodotta inversa dopo che raggiunge la fine della durata. Se lo imposti su true, l'animazione si inverte dopo che raggiunge la fine della durata dichiarata, modificando il valore dal valore finale (To) al valore iniziale (From). Ciò significa che l'animazione viene eseguita in modo efficace per il doppio dell'ora della Durata.

RepeatBehavior

La proprietà RepeatBehavior specifica quante volte viene riprodotta una sequenza temporale o una durata maggiore entro cui deve essere ripetuta la sequenza temporale. Per impostazione predefinita, una sequenza temporale ha un numero di iterazioni pari a "1x", il che significa che viene riprodotto una volta per la durata e non si ripete.

È possibile che l'animazione esegua più iterazioni. Ad esempio, il valore "3x" determina l'esecuzione dell'animazione tre volte. In alternativa, è possibile specificare una durata diversa per RepeatBehavior. Tale durata deve essere maggiore della durata dell'animazione stessa per essere effettiva. Ad esempio, se si specifica un RepeatBehavior di "0:0:10", per un'animazione con durata "0:0:2", l'animazione viene ripetuta cinque volte. Se questi non si suddividono in modo uniforme, l'animazione viene troncata al momento in cui viene raggiunto l'ora repeatBehavior , che potrebbe essere attraversata. Infine, puoi specificare il valore speciale "Forever", che fa sì che l'animazione venga eseguita infinitamente fino a quando non viene deliberatamente interrotta.

Per altre info sui valori RepeatBehavior e sulla sintassi XAML, vedi RepeatBehavior.

FillBehavior="Stop"

Per impostazione predefinita, quando termina un'animazione, l'animazione lascia il valore della proprietà come valore finale A o By modificato anche dopo il superamento della durata. Tuttavia, se imposti il valore della proprietà FillBehavior su FillBehavior.Stop, il valore del valore animato viene ripristinato a qualsiasi valore prima dell'applicazione dell'animazione o più precisamente al valore effettivo corrente determinato dal sistema di proprietà di dipendenza (per altre info su questa distinzione, vedi Panoramica delle proprietà di dipendenza).

Begintime

Per impostazione predefinita, BeginTime di un'animazione è "0:0:0", quindi inizia non appena viene eseguito lo Storyboard che lo contiene. Puoi modificare questo valore se lo Storyboard contiene più di un'animazione e vuoi sfalsare l'ora di inizio degli altri rispetto a un'animazione iniziale o creare un ritardo intenzionale breve.

Speedratio

Se hai più di un'animazione in uno Storyboard , puoi modificare la frequenza temporale di una o più animazioni rispetto allo Storyboard. È lo Storyboard padre che controlla in definitiva il tempo di durata trascorso durante l'esecuzione delle animazioni. Questa proprietà non viene usata molto spesso. Per altre info, vedi SpeedRatio.

Definizione di più animazioni in uno storyboard

Il contenuto di uno Storyboard può essere più di una definizione di animazione. Se applichi animazioni correlate a due proprietà dello stesso oggetto di destinazione, potresti avere più di un'animazione. Ad esempio, è possibile modificare le proprietà TranslateX e TranslateY di un TranslateTransform usato come RenderTransform di un elemento dell'interfaccia utente. In questo modo l'elemento verrà convertito in diagonale. Hai bisogno di due animazioni diverse per eseguire questa operazione, ma potresti voler che le animazioni facciano parte dello stesso Storyboard perché vuoi che queste due animazioni vengano sempre eseguite insieme.

Le animazioni non devono essere dello stesso tipo o devono essere destinate allo stesso oggetto. Possono avere durate diverse e non devono condividere valori di proprietà.

Quando viene eseguito lo Storyboard padre, anche ognuna delle animazioni all'interno verrà eseguita.

La classe Storyboard ha effettivamente molte delle stesse proprietà di animazione dei tipi di animazione, perché entrambe condividono la classe di base Timeline. Pertanto, uno Storyboard può avere un RepeatBehavior o Un BeginTime. In genere questi elementi non vengono impostati su uno Storyboard , a meno che non si desideri che tutte le animazioni contenute abbiano tale comportamento. Come regola generale, qualsiasi proprietà Timeline impostata su uno Storyboard si applica a tutte le animazioni figlio. Se si annulla l'operazione, lo Storyboard ha una durata implicita calcolata dal valore duration più lungo delle animazioni contenute. Una durata impostata in modo esplicito su uno Storyboard più breve di una delle sue animazioni figlio causerà il taglio dell'animazione, che in genere non è auspicabile.

Uno storyboard non può contenere due animazioni che tentano di impostare come destinazione e animare la stessa proprietà sullo stesso oggetto. Se si tenta di eseguire questa operazione, si riceverà un errore di runtime quando lo storyboard prova a essere eseguito. Questa restrizione si applica anche se le animazioni non si sovrappongono nel tempo a causa di valori e durate BeginTime deliberatamente diversi. Se vuoi davvero applicare una sequenza temporale di animazione più complessa alla stessa proprietà in un singolo storyboard, il modo per farlo consiste nell'usare un'animazione con fotogrammi chiave. Consultate Animazioni di fotogrammi chiave e funzioni di interpolazione.

Il sistema di animazione può applicare più animazioni al valore di una proprietà, se tali input provengono da più storyboard. L'uso di questo comportamento intenzionalmente per l'esecuzione simultanea degli storyboard non è comune. Tuttavia, è possibile che un'animazione definita dall'app applicata a una proprietà di controllo modifichi il valore HoldEnd di un'animazione eseguita in precedenza come parte del modello di stato di visualizzazione del controllo.

Definizione di uno storyboard come risorsa

Uno Storyboard è il contenitore in cui inserire gli oggetti animazione. In genere si definisce lo Storyboard come risorsa disponibile per l'oggetto che si desidera animare, in Risorse a livello di pagina o Application.Resources.

Nell'esempio seguente viene illustrato come l'esempio precedente Storyboard sia contenuto in una definizione Risorse a livello di pagina, in cui Storyboard è una risorsa con chiave della pagina radice. Prendere nota dell'attributo x:Name. Questo attributo è il modo in cui definisci un nome di variabile per lo Storyboard, in modo che altri elementi in XAML e il codice possano fare riferimento allo Storyboard in un secondo momento.

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

La definizione delle risorse nella radice XAML di un file XAML, ad esempio page.xaml o app.xaml, è una procedura comune per organizzare le risorse chiave nel codice XAML. È anche possibile considerare le risorse in file separati e unirle in app o pagine. Per altre informazioni, vedere Riferimenti a ResourceDictionary e risorse XAML.

Nota

XAML di Windows Runtime supporta l'identificazione delle risorse usando l'attributo x:Key o l'attributo x:Name. L'uso dell'attributo x:Name è più comune per uno Storyboard, perché è consigliabile farvi riferimento in base al nome della variabile, in modo da poter chiamare il relativo metodo Begin ed eseguire le animazioni. Se si usa l'attributo x:Key, è necessario usare metodi ResourceDictionary, ad esempio l'indicizzatore Item per recuperarlo come risorsa con chiave e quindi eseguire il cast dell'oggetto recuperato in Storyboard per usare i metodi Storyboard.

Storyboard per gli stati di visualizzazione

Puoi anche inserire le animazioni all'interno di un'unità Storyboard quando dichiari le animazioni dello stato visivo per l'aspetto visivo di un controllo. In tal caso, gli elementi dello Storyboard definiti vengono inseriti in un contenitore VisualState annidato in modo più approfondito in uno Stile (si tratta dello stile che è la risorsa con chiave). In questo caso non è necessaria una chiave o un nome per lo Storyboard perché è VisualState che ha un nome di destinazione che VisualStateManager può richiamare. Gli stili per i controlli vengono spesso inseriti in file ResourceDictionary XAML separati anziché inseriti in una raccolta di pagine o risorse dell'app. Per altre info, vedi Animazioni con storyboard per gli stati di visualizzazione.

Animazioni dipendenti e indipendenti

A questo punto dobbiamo introdurre alcuni punti importanti sul funzionamento del sistema di animazione. In particolare, l'animazione interagisce fondamentalmente con il rendering di un'app di Windows Runtime sullo schermo e il modo in cui il rendering usa thread di elaborazione. Un'app di Windows Runtime ha sempre un thread principale dell'interfaccia utente e questo thread è responsabile dell'aggiornamento della schermata con le informazioni correnti. Inoltre, un'app di Windows Runtime ha un thread di composizione, che viene usato per pre calcolare i layout immediatamente prima che vengano visualizzati. Quando si anima l'interfaccia utente, è possibile che si verifichi un sacco di lavoro per il thread dell'interfaccia utente. Il sistema deve ridisegnare grandi aree dello schermo usando intervalli di tempo abbastanza brevi tra ogni aggiornamento. Questa operazione è necessaria per acquisire il valore più recente della proprietà animata. Se non sei attento, c'è il rischio che un'animazione possa rendere l'interfaccia utente meno reattiva o influirà sulle prestazioni di altre funzionalità dell'app che si trovano anche sullo stesso thread dell'interfaccia utente.

La varietà di animazioni che è determinata ad avere un certo rischio di rallentare il thread dell'interfaccia utente è detta animazione dipendente. Un'animazione non soggetta a questo rischio è un'animazione indipendente. La distinzione tra animazioni dipendenti e indipendenti non è determinata solo dai tipi di animazione (DoubleAnimation e così via) come descritto in precedenza. Viene invece determinata da quali proprietà specifiche si sta animando e da altri fattori, ad esempio l'ereditarietà e la composizione dei controlli. In alcuni casi, anche se un'animazione cambia l'interfaccia utente, l'animazione può avere un impatto minimo sul thread dell'interfaccia utente e può invece essere gestita dal thread di composizione come animazione indipendente.

Un'animazione è indipendente se presenta una di queste caratteristiche:

Avviso

Affinché l'animazione venga considerata indipendente, è necessario impostare Duration="0"in modo esplicito . Ad esempio, se rimuovi Duration="0" da questo codice XAML, l'animazione viene considerata dipendente, anche se KeyTime del fotogramma è "0:0:0".

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

Se l'animazione non soddisfa questi criteri, è probabilmente un'animazione dipendente. Per impostazione predefinita, il sistema di animazione non eseguirà un'animazione dipendente. Quindi, durante il processo di sviluppo e test, potresti anche non vedere l'animazione in esecuzione. Puoi comunque usare questa animazione, ma devi abilitare in modo specifico ogni animazione dipendente. Per abilitare l'animazione, impostare la proprietà EnableDependentAnimation dell'oggetto animazione su true. (Ogni Sottoclasse della sequenza temporale che rappresenta un'animazione ha un'implementazione diversa della proprietà, ma sono tutte denominate EnableDependentAnimation.

Il requisito di abilitare le animazioni dipendenti che rientrano nello sviluppatore dell'app è un aspetto di progettazione consapevole del sistema di animazione e dell'esperienza di sviluppo. Vogliamo che gli sviluppatori sappiano che le animazioni hanno un costo delle prestazioni per la velocità di risposta dell'interfaccia utente. Le animazioni con prestazioni scarse sono difficili da isolare ed eseguire il debug in un'app su larga scala. È quindi preferibile attivare solo le animazioni dipendenti necessarie per l'esperienza dell'interfaccia utente dell'app. Non volevamo rendere troppo facile compromettere le prestazioni della tua app a causa di animazioni decorative che usano un sacco di cicli. Per altre info sui suggerimenti sulle prestazioni per l'animazione, vedi Ottimizzare animazioni e supporti.

Gli sviluppatori di app possono anche scegliere di applicare un'impostazione a livello di app che disabilita sempre le animazioni dipendenti, anche quelle in cui EnableDependentAnimation è true. Vedere Timeline.AllowDependentAnimations.

Suggerimento

Se usi il riquadro animazione in Blend per Visual Studio 2019, ogni volta che tenti di applicare un'animazione dipendente a una proprietà dello stato di visualizzazione, nella finestra di progettazione verranno visualizzati avvisi. Gli avvisi non verranno visualizzati nell'output di compilazione o nell'elenco errori. Se modifichi XAML a mano, la finestra di progettazione non visualizzerà un avviso. In fase di esecuzione durante il debug, l'output debug del riquadro output visualizzerà un avviso che indica che l'animazione non è indipendente e verrà ignorata.

Avvio e controllo di un'animazione

Tutto quello che ti abbiamo mostrato finora non causa effettivamente l'esecuzione o l'applicazione di un'animazione! Fino all'avvio e all'esecuzione dell'animazione, il valore cambia che un'animazione dichiara in XAML è latente e non si verificherà ancora. Devi avviare in modo esplicito un'animazione in qualche modo correlata alla durata dell'app o all'esperienza utente. A livello più semplice, si avvia un'animazione chiamando il metodo Begin nello Storyboard padre per tale animazione. Non puoi chiamare direttamente i metodi da XAML, quindi tutto ciò che fai per abilitare le animazioni, lo eseguirai dal codice. Che sarà il code-behind per le pagine o i componenti dell'app, o forse la logica del controllo se si sta definendo una classe di controllo personalizzata.

In genere, chiamerai Begin e lascia che l'animazione venga eseguita fino al completamento della durata. Tuttavia, puoi anche usare i metodi Pause, Resume e Stop per controllare lo Storyboard in fase di esecuzione, nonché altre API usate per scenari di controllo di animazione più avanzati.

Quando chiami Begin su uno storyboard che contiene un'animazione che ripete infinitamente (RepeatBehavior="Forever"), l'animazione viene eseguita fino a quando non viene scaricata la pagina contenente o chiami in modo specifico Pause o Stop.

Avvio di un'animazione dal codice dell'app

È possibile avviare automaticamente le animazioni o in risposta alle azioni dell'utente. Per il caso automatico, in genere si usa un evento di durata dell'oggetto, ad esempio Loaded per fungere da trigger di animazione. L'evento Loaded è un buon evento da usare per questo perché a quel punto l'interfaccia utente è pronta per l'interazione e l'animazione non verrà interrotta all'inizio perché un'altra parte dell'interfaccia utente è ancora in fase di caricamento.

In questo esempio, l'evento PointerPressed viene associato al rettangolo in modo che, quando l'utente fa clic sul rettangolo, l'animazione inizia.

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

Il gestore eventi avvia lo Storyboard (animazione) usando il metodo Begin dello Storyboard.

myStoryboard.Begin();

myStoryboard().Begin();

myStoryboard->Begin();

myStoryBoard.Begin()

Puoi gestire l'evento Completed se vuoi che venga eseguita un'altra logica al termine dell'applicazione dei valori dell'animazione. Inoltre, per la risoluzione dei problemi relativi alle interazioni con il sistema di proprietà o l'animazione, il metodo GetAnimationBaseValue può essere utile.

Suggerimento

Ogni volta che stai codificando per uno scenario di app in cui avvii un'animazione dal codice dell'app, potresti voler rivedere se esiste già un'animazione o una transizione nella libreria di animazioni per lo scenario dell'interfaccia utente. Le animazioni della libreria consentono un'esperienza dell'interfaccia utente più coerente in tutte le app di Windows Runtime e sono più facili da usare.

 

Animazioni per stati visivi

Il comportamento di esecuzione per uno Storyboard usato per definire lo stato visivo di un controllo è diverso da quello in cui un'app potrebbe eseguire direttamente uno storyboard. Come applicato a una definizione dello stato di visualizzazione in XAML, lo Storyboard è un elemento di un oggetto VisualState contenente e lo stato nel suo complesso viene controllato tramite l'API VisualStateManager. Tutte le animazioni all'interno verranno eseguite in base ai valori di animazione e alle proprietà Sequenza temporale quando l'oggetto VisualState contenitore viene usato da un controllo . Per altre info, vedi Storyboard per gli stati di visualizzazione. Per gli stati di visualizzazione, l'apparente FillBehavior è diverso. Se uno stato di visualizzazione viene modificato in un altro stato, tutte le modifiche alle proprietà applicate dallo stato di visualizzazione precedente e le relative animazioni vengono annullate, anche se il nuovo stato di visualizzazione non applica in modo specifico una nuova animazione a una proprietà.

Storyboard ed EventTrigger

Esiste un modo per avviare un'animazione che può essere dichiarata interamente in XAML. Tuttavia, questa tecnica non è più ampiamente usata. Si tratta di una sintassi legacy di WPF e delle versioni precedenti di Silverlight prima del supporto VisualStateManager. Questa sintassi EventTrigger funziona ancora in XAML di Windows Runtime per motivi di importazione/compatibilità, ma funziona solo per un comportamento di trigger basato sull'evento FrameworkElement.Loaded. Il tentativo di attivare altri eventi genererà eccezioni o non riuscirà a compilare. Per altre info, vedere EventTrigger o BeginStoryboard.

Animazione delle proprietà associate XAML

Non è uno scenario comune, ma puoi applicare un valore animato a una proprietà associata XAML. Per altre info sulle proprietà associate e sul relativo funzionamento, vedi Panoramica delle proprietà associate. La destinazione di una proprietà associata richiede una sintassi property-path che racchiude il nome della proprietà tra parentesi. È possibile animare le proprietà associate predefinite, ad esempio Canvas.ZIndex, usando un ObjectAnimationUsingKeyFrames che applica valori integer discreti. Tuttavia, una limitazione esistente dell'implementazione XAML di Windows Runtime è che non è possibile animare una proprietà associata personalizzata.

Altri tipi di animazione e i passaggi successivi per imparare ad animare l'interfaccia utente

Fino ad ora, abbiamo mostrato le animazioni personalizzate che animano tra due valori e quindi interpolando in modo lineare i valori in base alle esigenze durante l'esecuzione dell'animazione. Queste sono chiamate animazioni From/To/By. Esiste tuttavia un altro tipo di animazione che consente di dichiarare valori intermedi che rientrano tra l'inizio e la fine. Queste sono chiamate animazioni con fotogrammi chiave. Esiste anche un modo per modificare la logica di interpolazione in un'animazione From/To/By o in un'animazione con fotogrammi chiave. Ciò comporta l'applicazione di una funzione di interpolazione. Per altre info su questi concetti, vedi Animazioni di funzioni di interpolazione e fotogrammi chiave.