Condividi tramite

Icona animata

  • Articolo

Un controllo AnimatedIcon riproduce immagini animate in risposta all'interazione dell'utente e alle modifiche dello stato visivo.

Le icone animate possono attirare l'attenzione su un componente dell'interfaccia utente, come il pulsante successivo in un tutorial, o semplicemente riflettere l'azione associata all'icona in modo divertente e interessante.

Le animazioni personalizzate possono essere create con Adobe AfterEffects ed eseguito il rendering con la libreria Lottie-Windows da usare come icona animata nell'applicazione WinUI. Per altri dettagli, vedere Usare Lottie per creare contenuto animato per un oggetto AnimatedIcon più avanti in questo articolo.

L'esempio seguente mostra un'icona di ricerca animata di base creata in Adobe AfterEffects ed eseguito il rendering tramite Lottie.

Icona di ricerca animata

È il controllo giusto?

Usare il controllo AnimatedIcon quando l'icona di un controllo deve essere animata in risposta all'interazione dell'utente con il controllo, ad esempio quando un utente passa il puntatore del mouse su un pulsante o lo fa clic.

Non usare animatedIcon se l'animazione non viene attivata da una transizione dello stato di visualizzazione e riproduce in un ciclo, riproduce una sola volta o può essere sospesa. Usa invece AnimatedVisualPlayer.

Non utilizzare AnimatedIcon per nessun elemento diverso da un'icona o se il controllo non supporta una proprietà IconElement o IconElementSource. Usa invece AnimatedVisualPlayer.

Quando non è necessaria un'icona animata, usare FontIcon, SymbolIcon o BitmapIcon.

Differenze tra AnimatedIcon e AnimatedVisualPlayer

AnimatedIcon è un elemento IconElement, che può essere usato ovunque sia necessario un elemento o IconElement (ad esempio NavigationViewItem.Icon) ed è controllato tramite una proprietà State.

AnimatedVisualPlayer è un lettore di animazione più generale, controllato tramite metodi come Play e Pause e può essere usato ovunque in un'applicazione.

Usare Lottie per creare contenuto animato per un oggetto AnimatedIcon

La definizione di un'animazione per animatedIcon inizia lo stesso processo per definire un'animazione per animatedVisualPlayer. È necessario creare o ottenere il file Lottie per l'icona da aggiungere ed eseguire il file tramite LottieGen. LottieGen genera codice per una classe C++/WinRT, dalla quale è possibile creare un'istanza e usarla con AnimatedIcon.

Nota

Il controllo AutoSuggestBox usa la classe AnimatedVisuals.AnimatedFindVisualSource generata tramite lo strumento LottieGen.

Puoi anche definire marcatori nella definizione dell'animazione per indicare le posizioni temporali di riproduzione. È quindi possibile impostare lo stato AnimatedIcon su questi marcatori. Ad esempio, se hai una posizione di riproduzione nel file Lottie contrassegnato come "PointerOver", puoi impostare lo stato AnimatedIcon su "PointerOver" e spostare l'animazione in tale posizione di riproduzione.

La definizione di una proprietà colore nell'animazione Lottie denominata "Foreground" consente di impostare il colore usando la proprietà AnimatedIcon.Foreground.

Consigli

  • Per assicurarsi che le icone corrispondano ai principi di progettazione, vedi le linee guida per l'esperienza utente per le icone per le app di Windows.
  • Limitare il numero di icone animate in una singola schermata o visualizzazione. Anima solo le icone per attirare l'attenzione dell'utente sulla posizione in cui è necessario intervenire o quando eseguono un'azione.

Piattaforma UWP e WinUI 2

Importante

Le informazioni e gli esempi in questo articolo sono ottimizzati per le app che usano Windows App SDK e WinUI 3, ma sono generalmente applicabili alle app UWP che usano WinUI 2. Per informazioni ed esempi specifici della piattaforma, consultare le indicazioni di riferimento sulle API UWP.

Questa sezione contiene informazioni necessarie per usare il controllo in un'app UWP o WinUI 2.

AnimatedIcon per le app UWP richiede WinUI 2. Per maggiori informazioni, incluse le istruzioni per l'installazione, vedere WinUI 2. Le API per questo controllo esistono nello spazio dei nomi Microsoft.UI.Xaml.Controls.

Per usare il codice in questo articolo con WinUI 2, usare un alias in XAML (si usa muxc) per rappresentare le API della libreria dell'interfaccia utente di Windows incluse nel progetto. Per altre informazioni, vedere Attività iniziali di WinUI 2.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:AnimatedIcon />

Creare un'icona animata

Aprire l'app Della raccolta WinUI 3 per vedere AnimatedIcon in azione

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub

Aggiungere un oggetto AnimatedIcon a un pulsante

Nell'esempio seguente viene illustrato un pulsante Indietro che visualizza un'icona indietro animata in un evento PointerEntered .

  • AnimatedBackVisualSource è una classe creata con lo strumento da riga di comando LottieGen.
  • FallbackIconSource viene usato quando le animazioni non possono essere riprodotte, ad esempio nelle versioni precedenti di Windows che non supportano le animazioni Lottie.
  • Se l'utente disattiva le animazioni nelle impostazioni di sistema, AnimatedIcon visualizza il fotogramma finale della transizione di stato in cui si trovavano i controlli.
<Button PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited">
    <AnimatedIcon x:Name='BackAnimatedIcon'>
        <AnimatedIcon.Source>
            <animatedvisuals:AnimatedBackVisualSource/>
        </AnimatedIcon.Source>
        <AnimatedIcon.FallbackIconSource>
            <SymbolIconSource Symbol='Back'/>
        </AnimatedIcon.FallbackIconSource>
    </AnimatedIcon>
</Button>

private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.BackAnimatedIcon, "PointerOver");
}

private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.BackAnimatedIcon, "Normal");
}

Aggiungere un oggetto AnimatedIcon a NavigationViewItem

Il controllo NavigationViewItem imposta automaticamente gli stati comuni su un oggetto AnimatedIcon in base allo stato del controllo, se tali marcatori sono definiti nell'animazione Lottie.

Ad esempio, l'esempio seguente illustra come impostare un'animazione personalizzata (GameSettingsIcon) generata dallo strumento LottieGen:

<NavigationView.MenuItems>
    <NavigationViewItem Content = "Game Settings">
        <NavigationViewItem.Icon>
            <AnimatedIcon x:Name='GameSettingsIcon'>
                <AnimatedIcon.Source>
                    <animatedvisuals:AnimatedSettingsVisualSource/>
                </AnimatedIcon.Source>
                <AnimatedIcon.FallbackIconSource>
                    <FontIconSource FontFamily="Segoe MDL2 Assets" Glyph="&#xE713;"/>
                </AnimatedIcon.FallbackIconSource>
            </AnimatedIcon>
        </NavigationViewItem.Icon>
    </NavigationViewItem>
</NavigationView.MenuItems>

Ingranaggio Impostazioni animato

NavigationViewItem imposta automaticamente gli stati seguenti in AnimatedIcon:

  • Normale
  • PointerOver
  • Pressed
  • Selected
  • PressedSelected
  • PointerOverSelected

Se GameSettingsIcon è definito un marcatore per "NormalToPointerOver", l'icona verrà animata fino a quando il puntatore non si sposta sull'oggetto NavigationViewItem. Consulta la sezione seguente per ulteriori informazioni sulla creazione dei marcatori.

Definire indicatori AnimatedIcon

Per creare l'oggetto personalizzato GameSettingsIcon nell'esempio precedente, eseguire un file JSON Lottie (con marcatori) tramite lo strumento Windows LottieGen per generare il codice di animazione come classe C#.

Dopo aver eseguito il file Lottie tramite LottieGen, è possibile aggiungere la classe di output CodeGen al progetto. Vedere il tutorial LottieGen per ulteriori informazioni.

L'impostazione dello stato AnimatedIcon su un nuovo valore imposta anche una posizione di riproduzione nell'animazione Lottie per la transizione dallo stato precedente al nuovo stato. Queste posizioni di riproduzione vengono identificate anche con marcatori nel file Lottie. È anche possibile definire indicatori specifici per l'inizio della transizione o la fine della transizione.

Ad esempio, il controllo AutoSuggestBox usa un oggetto AnimatedIcon che si anima con gli stati seguenti:

  • Normale
  • PointerOver
  • Pressed

È possibile definire marcatori nel file Lottie con tali nomi di stato. È anche possibile definire i marcatori come segue:

  • Inserire "A" tra i nomi di stato. Ad esempio, se definisci un marcatore "NormalToPointerOver", la modifica dello stato AnimatedIcon da "Normal" a "PointerOver" causerà lo spostamento nella posizione di riproduzione dell'indicatore.
  • Aggiungere "_Start" o "_End" a un nome di marcatore. Ad esempio, la definizione di marcatori "NormalToPointerOver_Start" e "NormalToPointerOver_End" e la modifica dello stato AnimatedIcon da "Normal" a "PointerOver" causerà il passaggio alla posizione di riproduzione dell'indicatore di _Start e quindi l'animazione alla posizione di riproduzione _End.

L'algoritmo esatto usato per eseguire il mapping delle modifiche dello stato AnimatedIcon alle posizioni di riproduzione dei marcatori:

  • Controllare i marcatori del file fornito per i marcatori "[PreviousState]To[NewState]_Start" e "[PreviousState]To[NewState]_End". Se entrambi vengono trovati, riprodurre l'animazione da "[PreviousState]To[NewState]_Start" a "[PreviousState]To[NewState]_End".
  • Se "[PreviousState]To[NewState]_Start" non viene trovato ma viene trovato "[PreviousState]To[NewState]_End", viene eseguito il taglio rigido alla posizione di riproduzione "[PreviousState]To[NewState]_End".
  • Se "[PreviousState]To[NewState]_End" non viene trovato ma viene trovato "[PreviousState]To[NewState]_Start", viene eseguito il taglio rigido alla posizione di riproduzione "[PreviousState]To[NewState]_Start".
  • Controllare se i marcatori IAnimatedVisualSource2 specificati per il marcatore "[PreviousState]To[NewState]". Se viene trovato, il taglio rigido viene eseguito nella posizione di riproduzione "[PreviousState]To[NewState]".
  • Controllare se i marcatori IAnimatedVisualSource2 forniti per il marcatore "[NewState]". Se viene trovato, il taglio rigido viene eseguito nella posizione di riproduzione "[PreviousState]To[NewState]".
  • Controllare se i marcatori IAnimatedVisualSource2 specificati hanno un marcatore che termina con "To[NewState]_End". Se viene trovato un marcatore con tale terminazioni, il taglio rigido al primo marcatore trovato con la posizione di riproduzione della fine appropriata.
  • Controllare se "[NewState]" analizza un valore float. In caso affermativo, animata dalla posizione corrente al float analizzato.
  • Taglio rigido per la posizione di riproduzione 0,0.

L'esempio seguente mostra il formato del marcatore in un file JSON Lottie. Per altri dettagli, vedere le linee guida animatedIcon.

"markers":[{"tm":0,"cm":"NormalToPointerOver_Start","dr":0},{"tm":9,"cm":"NormalToPointerOver_End","dr":0},

{"tm":10,"cm":"NormalToPressed_Start","dr":0},{"tm":19,"cm":"NormalToPressed_End","dr":0},

{"tm":20,"cm":"PointerOverToNormal_Start","dr":0},{"tm":29,"cm":"PointerOverToNormal_End","dr":0},

{"tm":30,"cm":"PointerOverToPressed_Start","dr":0},{"tm":39,"cm":"PointerOverToPressed_End","dr":0},

{"tm":40,"cm":"PressedToNormal_Start","dr":0},{"tm":49,"cm":"PressedToNormal_End","dr":0},

{"tm":50,"cm":"PressedToPointerOver_Start","dr":0},{"tm":69,"cm":"PressedToPointerOver_End","dr":0},

{"tm":90,"cm":"PressedToNormal_Start","dr":0},{"tm":99,"cm":"PressedToNormal_End","dr":0},

{"tm":100,"cm":"PressedToPointerOver_Start","dr":0},{"tm":101,"cm":"PressedToPointerOver_End","dr":0}]

Aggiunta di un'animazione autonomaIcon

L'esempio seguente è un pulsante che l'utente fa clic su Accetta una richiesta.

La MyAcceptAnimation classe viene creata con lo strumento LottieGen .

FallbackIconSource verrà usato anziché l'animazione quando le animazioni non possono essere riprodotte, ad esempio nelle versioni precedenti di Windows che non supportano le animazioni Lottie.

Se l'utente finale disattiva le animazioni nelle impostazioni di sistema, AnimatedIcon visualizzerà il fotogramma finale della transizione di stato in cui si trovavano i controlli.

<Button PointerEntered="HandlePointerEntered" PointerExited="HandlePointerExited">
    <AnimatedIcon x:Name='AnimatedIcon1'>
        <local:MyAcceptAnimation/>
        <AnimatedIcon.FallbackIconSource>
            <SymbolIconSource Symbol='Accept'/>
        </AnimatedIcon.FallbackIconSource>
    </AnimatedIcon>
</Button>

private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.AnimatedIcon1, "PointerOver");
}

private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.StackPaAnimatedIcon1nel1, "Normal");
}