Animazione dell'interfaccia utente (HTML)
[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]
Con la Libreria animazioni di Windows puoi integrare l'aspetto di Windows 8 nella tua app di Windows Store. Questo articolo offre un riepilogo delle animazioni e alcuni esempi di scenari tipici gestiti dalla Libreria animazioni.
La Libreria animazioni assicura i vantaggi seguenti:
- Movimenti coerenti con i principi di animazione delle app di Windows Store
- Transizioni veloci e fluide tra gli stati dell'interfaccia utente, che offrono informazioni all'utente senza distrarlo
- Elementi visivi più chiari per mostrare le transizioni dell'utente all'interno di un'app
Ad esempio, un elemento aggiunto a un elenco non viene visualizzato immediatamente, ma viene inserito con un'animazione mentre gli altri elementi si spostano con un'animazione nelle nuove posizioni per fare spazio a quello aggiunto. In questo modo l'azione appare più chiara all'utente, una condizione non sempre possibile con le transizioni istantanee.
I controlli introdotti in Windows 8, ad esempio ListView, FlipView, Flyout e AppBar, usano le animazioni disponibili nella Libreria animazioni. Usando questi controlli nella tua app, puoi ottenere l'aspetto e il comportamento delle animazioni delle app di Windows Store senza dover scrivere codice.
La Libreria animazioni non offre animazioni per ogni scenario possibile. In alcuni casi puoi scegliere di creare un'animazione personalizzata che rifletta il tuo marchio. Valuta con attenzione le condizioni per usare nelle app animazioni diverse da quelle offerte dalla Libreria animazioni. Procedi in questo modo solo per motivi ben precisi, ad esempio la promozione di un particolare marchio o la mancanza di un'animazione adatta per un particolare scenario nella Libreria animazioni.
Per un esempio di codice che usa le API descritte in questo argomento, vedi l'esempio di libreria di animazioni HTML.
Animazioni disponibili nella libreria
Le animazioni elencate di seguito sono incluse nella Libreria animazioni. Fai clic sul nome di un'animazione per saperne di più sui principali scenari di utilizzo, sulle funzioni usate per eseguirle e per visualizzarne un esempio.
- Transizione pagina: applica un'animazione al contenuto di una pagina in entrata o in uscita dalla vista.
- Transizione contenuto: applica un'animazione a uno o più elementi del contenuto in entrata o in uscita dalla vista.
- Dissolvenza in entrata/uscita: visualizza elementi o controlli transitori.
- Dissolvenza incrociata: aggiorna un'area del contenuto.
- Puntatore su/giù: fornisce un feedback visivo al tocco o clic su un riquadro.
- Espandi/comprimi: visualizza informazioni aggiuntive in linea.
- Riposiziona: sposta un elemento in una nuova posizione.
- Mostra/nascondi popup: visualizza l'interfaccia utente contestuale in primo piano nella vista.
- Mostra/nascondi interfaccia utente dal bordo: mostra o nasconde nella vista l'interfaccia utente con scorrimento a partire dal bordo.
- Mostra/nascondi pannello: mostra o nasconde i pannelli di grandi dimensioni nella vista.
- Aggiungi/elimina dall'elenco: aggiunge o elimina un elemento da un elenco.
- Aggiungi/elimina nell'elenco durante la ricerca: aggiunge o elimina un elemento da un elenco quando si filtrano i risultati della ricerca.
- Alterna: aggiorna il contenuto di un riquadro.
- Aggiorna notifica: aggiorna un'indicazione numerica.
- Inizia/termina un trascinamento o trascina tra due elementi: fornisce un feedback visivo durante un'operazione di trascinamento della selezione.
- Suggerimento scorrimento: indica che un riquadro supporta l'interazione tramite scorrimento rapido.
- Selezione/deselezione con scorrimento: esegue la transizione di un riquadro a uno stato di selezione con scorrimento rapido.
Transizione pagina
Le transizioni di pagina applicano un'animazione al contenuto di una pagina in entrata o in uscita dalla vista, ad esempio la visualizzazione della prima pagina dell'app dopo la schermata iniziale e la transizione tra le pagine di un'app.
Il video seguente mostra l'animazione che rende visibile una pagina di contenuto:
Il video seguente mostra le animazioni con transizione del contenuto da una pagina all'altra:
Per altre informazioni sull'esperienza utente e indicazioni sull'uso, vedi Linee guida ed elenco di controllo per le animazioni di transizione di pagina.
Usa queste API per eseguire l'animazione nel codice JavaScript:
Transizione contenuto
Usa queste animazioni con transizione del contenuto per spostare uno o più contenuti in entrata o in uscita dalla vista. Non confondere le animazioni con transizione contenuto, che riguardano gli elementi di una pagina, con le transizioni di pagine, che vengono applicate a intere pagine. Le animazioni con transizione contenuto vengono usate, ad esempio, per mostrare il contenuto che non era ancora pronto per la visualizzazione al caricamento iniziale della pagina o quando si modifica il contenuto in una sezione della pagina.
Il video seguente mostra le animazioni che rimuovono il contenuto esistente e quindi rendono visibile quello nuovo:
Per altre informazioni sull'esperienza utente e indicazioni sull'uso, vedi Linee guida ed elenco di controllo per le animazioni di transizione di contenuto.
Usa queste API per eseguire l'animazione nel codice JavaScript:
Dissolvenza in entrata/uscita
Usa queste animazioni per mostrare o nascondere l'interfaccia utente o controlli transitori, ad esempio una barra dell'app in cui possono apparire nuovi controlli a seguito dell'interazione dell'utente. Un altro esempio è la barra di scorrimento o l'indicatore di panoramica temporaneo che si dissolve se non viene rilevato l'input dell'utente per un certo intervallo di tempo. L'animazione con dissolvenza in entrata dovrebbe essere usata nelle app anche per la transizione di un elemento segnaposto all'elemento finale durante il caricamento dinamico del contenuto.
Il video seguente mostra le animazioni con dissolvenza in entrata e in uscita del contenuto. Nota la barra di scorrimento con dissolvenza in entrata e in uscita nella parte inferiore dello schermo:
Per altre informazioni sull'esperienza utente e indicazioni sull'uso, vedi Linee guida ed elenco di controllo per le animazioni di dissolvenza.
Usa queste API per eseguire l'animazione nel codice JavaScript:
Dissolvenza incrociata
Usa questa animazione per rendere lineare la transizione quando cambia lo stato di un elemento. Ad esempio, quando si aggiorna il contenuto corrente di una visualizzazione.
Il video seguente mostra l'animazione con dissolvenza incrociata:
Per altre informazioni sull'esperienza utente e indicazioni sull'uso, vedi Linee guida ed elenco di controllo per le animazioni di dissolvenza.
JavaScript: usa questa API per eseguire l'animazione:
Puntatore su/giù
Usa queste animazioni per fornire feedback all'utente sull'esecuzione di un tocco o un clic su un riquadro. Ad esempio, quando un utente fa clic o tocca un riquadro, viene riprodotta l'animazione del puntatore giù. Dopo il rilascio del clic o del tocco, viene riprodotta l'animazione del puntatore su.
Il video seguente mostra le animazioni del puntatore giù e su:
Per altre informazioni sull'esperienza utente e indicazioni sull'uso, vedi Linee guida ed elenco di controllo per le animazioni dei puntatori.
Usa queste API per eseguire l'animazione nel codice JavaScript:
Espandi/comprimi
Usa l'animazione di espansione per aggiungere ulteriore spazio nel contenuto della vista e mostrare informazioni aggiuntive in linea. Ad esempio, la visualizzazione di un messaggio di errore causa lo spostamento di altro contenuto nella vista per fare posto al messaggio. L'animazione di compressione viene usata per nascondere il contenuto aggiuntivo e mostrare una minore quantità di dettagli su un particolare elemento. Viene solitamente attivata da un'azione dell'utente.
Il video seguente mostra le animazioni con espansione/compressione:
Usa queste API per eseguire l'animazione nel codice JavaScript:
Riposiziona
Usa l'animazione di riposizionamento per spostare un elemento in una nuova posizione. Ad esempio, lo spostamento di intestazioni in una vista panoramica attiva l'animazione di riposizionamento.
Il video seguente mostra l'animazione di riposizionamento:
Per altre informazioni sull'esperienza utente e indicazioni sull'uso, vedi Linee guida ed elenco di controllo per le animazioni di riposizionamento.
JavaScript: usa questa API per eseguire l'animazione:
Mostra/nascondi interfaccia utente popup
Usa queste animazioni per visualizzare o nascondere l'interfaccia utente contestuale in primo piano nella vista corrente. Ad esempio, un'interfaccia utente popup può contenere informazioni più dettagliate su una voce in un elemento. Usa le animazioni che mostrano o nascondono un'interfaccia utente popup per visualizzare un menu di scelta rapida o un riquadro a comparsa personalizzato.
Il video seguente mostra le animazioni che mostrano e nascondono l'interfaccia utente popup:
Per altre informazioni sull'esperienza utente e indicazioni sull'uso, vedi Linee guida ed elenco di controllo per le animazioni dell'interfaccia utente popup.
Usa queste API per eseguire l'animazione nel codice JavaScript:
Mostra/nascondi interfaccia utente dal bordo
Usa queste animazioni per lo scorrimento in entrata e in uscita dalla vista di un'interfaccia utente basata sui bordi di piccole dimensioni. Ad esempio, puoi usare queste animazioni quando vuoi visualizzare una barra dell'app personalizzata nella parte inferiore dello schermo o una superficie dell'interfaccia utente nella parte superiore dello schermo.
Il video seguente mostra le animazioni che mostrano e nascondono l'interfaccia utente basata sui bordi:
Per altre informazioni sull'esperienza utente e indicazioni sull'uso, vedi Linee guida ed elenco di controllo per le animazioni dell'interfaccia utente basate su bordi.
Usa queste API per eseguire l'animazione nel codice JavaScript:
Mostra/nascondi pannello
Usa queste animazioni per visualizzare e nascondere un pannello, cioè un'interfaccia utente basata sui bordi di grandi dimensioni, come un riquadro attività o una tastiera personalizzata. Non confondere queste animazioni con quelle che mostrano e nascondono l'interfaccia utente basata su bordi applicate a elementi dell'interfaccia utente di piccole dimensioni che usano il bordo come punto di entrata e uscita.
Il video seguente mostra le animazioni che mostrano e nascondono i pannelli:
Per altre informazioni sull'esperienza utente e indicazioni sull'uso, vedi Linee guida ed elenco di controllo per le animazioni dell'interfaccia utente basate su bordi.
Usa queste API per eseguire l'animazione nel codice JavaScript:
Aggiungi/elimina dall'elenco
Usa queste animazioni quando vuoi aggiungere o eliminare un elemento in un elenco unidimensionale o bidimensionale esistente. L'animazione per l'aggiunta a un elenco riposiziona innanzitutto gli elementi esistenti nell'elenco per fare spazio ai nuovi elementi, quindi aggiunge i nuovi elementi. L'animazione per l'eliminazione da un elenco ne rimuove gli elementi e, se necessario, riposiziona gli altri elementi dell'elenco dopo la rimozione degli elementi eliminati.
Il video seguente mostra le animazioni per l'aggiunta e la rimozione di elementi in un elenco:
Per altre informazioni sull'esperienza utente e indicazioni sull'uso, vedi Linee guida ed elenco di controllo per gli elenchi con animazioni.
Usa queste API per eseguire l'animazione nel codice JavaScript:
Aggiungi/elimina nell'elenco durante la ricerca
Usa queste animazioni nei casi in cui gli elementi di un elenco vengono modificati rapidamente in uno scenario di ricerca. Nota che le animazioni in un elenco durante la ricerca sono più rapide delle animazioni degli elenchi standard. Ad esempio, se un utente immette un termine di ricerca e i risultati vengono filtrati in tempo reale, per gli elementi filtrati si dovrà usare l'animazione di eliminazione dall'elenco. Al contrario, se un utente può ricercare una stringa e quindi usare BACKSPACE per rimuovere un carattere, con il risultato che gli elementi vengono aggiunti di nuovo all'elenco dei risultati della ricerca, per questi elementi si dovrà usare l'animazione di aggiunta all'elenco.
Il video seguente illustra le animazioni per l'aggiunta e la rimozione di elementi da un elenco di ricerca:
Per altre informazioni sull'esperienza utente e indicazioni sull'uso, vedi Linee guida ed elenco di controllo per gli elenchi con animazioni.
Usa queste API per eseguire l'animazione nel codice JavaScript:
Alterna
Usa questa animazione per aggiornare un riquadro nel passaggio dalla visualizzazione di un'immagine alla visualizzazione di testo, quando l'altezza del riquadro non è sufficiente per mostrare entrambe contemporaneamente. Puoi usare questa animazione anche per scorrere un insieme di foto in un riquadro.
Il video seguente mostra l'animazione con alternanza:
JavaScript: usa questa API per eseguire l'animazione:
Aggiorna notifica
Usa questa animazione per aggiornare le notifiche che visualizzano un numero. Ad esempio, per un app di e-mail che mostra il numero di messaggi non letti puoi usare l'animazione di aggiornamento della notifica per aggiornare questo valore.
Il video seguente mostra le animazioni che aggiornano una notifica:
JavaScript: usa questa API per eseguire l'animazione:
Inizia/termina un trascinamento o trascina tra due elementi
Usa le animazioni di trascinamento per fornire un feedback visivo quando l'utente trascina o rilascia un elemento. Usa l'animazione di inizio trascinamento quando l'utente inizia a trascinare un elemento. Usa l'animazione di fine trascinamento quando l'utente rilascia l'elemento.
In alternativa, puoi usare le animazioni di trascinamento tra due elementi per indicare all'utente che è possibile riordinare l'elenco intorno all'elemento rilasciato. Per gli utenti è utile sapere in quale posizione dell'elenco verrà inserito l'elemento se viene rilasciato nella posizione corrente. Questo tipo di animazioni fornisce un feedback visivo sul fatto che un elemento trascinato può essere rilasciato tra altri due elementi nell'elenco e che tali elementi si sposteranno.
Il video seguente mostra le animazioni associate all'operazione di trascinamento della selezione:
Per altre informazioni sull'esperienza utente e indicazioni sull'uso, vedi Linee guida ed elenco di controllo per le animazioni delle azioni di trascinamento.
Usa queste API per eseguire l'animazione nel codice JavaScript:
Suggerimento scorrimento
Usa questa animazione per mostrare che un riquadro supporta l'interazione tramite scorrimento rapido, consentendo agli utenti di scorrere rapidamente verso il basso per selezionare un riquadro. Se un utente non sa se può usare lo scorrimento rapido in un riquadro, con la pressione prolungata potrà visualizzare l'animazione con il suggerimento che indica la possibilità di interagire con il riquadro tramite un gesto di scorrimento rapido.
Il video seguente mostra l'animazione dello scorrimento rapido:
JavaScript: usa questa API per eseguire l'animazione:
Selezione/deselezione con scorrimento
Usa l'animazione di selezione quando un elemento è stato selezionato tramite un'interazione di scorrimento rapido per mostrare che il riquadro è passato a uno stato selezionato e per ripristinarne lo stato di riposo. Usa l'animazione di deselezione quando un riquadro selezionato viene deselezionato tramite un gesto di scorrimento rapido.
Il video seguente mostra le animazioni di selezione e deselezione con scorrimento rapido:
Usa queste API per eseguire l'animazione nel codice JavaScript:
Uso delle animazioni con i controlli personalizzati
La tabella seguente riepiloga i nostri consigli sulle animazioni da utilizzare per creare una versione personalizzata di questi controlli di sistema:
| Tipo di interfaccia utente | Animazione consigliata |
|---|---|
| Finestra di dialogo | fadeIn e fadeOut |
| Riquadro a comparsa | showPopup e hidePopup |
| Descrizione comando | fadeIn e fadeOut |
| Menu contestuale | showPopup e hidePopup |
| Barra dei comandi | showEdgeUI e hideEdgeUI |
| Riquadro attività o pannello basato su bordi | showPanel e hidePanel |
| Contenuto di qualsiasi contenitore dell'interfaccia utente | enterContent e exitContent |
| Per i controlli o se non sono applicabili altre animazioni | fadeIn e fadeOut |
Argomenti correlati
Esempio di libreria delle animazioni HTML
Esempio dei concetti fondamentali per il controllo ListView HTML