App di Windows
Comprimi il sommario
Espandi il sommario

Modelli di animazione per app di Windows Store

Interfaccia utente di app di Windows Store con una transizione tra pagine

Informazioni su come usare animazioni significative per collegare visivamente le esperienze e raccontare una storia. Le animazioni per scenari specifici di Windows 8 sono progettate per fornire informazioni, aiutare gli utenti a capire cosa li aspetta e creare un senso di fiducia. Vedi le linee guida dettagliate e le procedure nella sezione Animazione dell'interfaccia utente.

Descrivi la tua app

Inserisci la prima pagina della tua app.

|

JavaScript: usa enterPage

XAML: usa EntranceThemeTransition

Vedi anche Aggiunta di effetti di transizione mediante la libreria delle animazioni

Transizione tra le pagine

Passa da una pagina all'altra della tua app.

|

JavaScript: usa exitPage, quindi enterPage

XAML: usa EntranceThemeTransition

Vedi anche Aggiunta di effetti di transizione mediante la libreria delle animazioni

Transizione tra i contenuti

Passa da un contenuto all'altro di un'area all'interno della tua pagina.

|

JavaScript: usa exitContent, quindi enterContent

XAML: usa ContentThemeTransition

Vedi anche Aggiunta di effetti di transizione mediante la libreria delle animazioni

Feedback del tocco e del clic

Mostra un feedback visivo al tocco o clic dell'utente su un riquadro.

|

JavaScript: usa pointerDown e pointerUp

XAML: usa PointerDownThemeAnimation e PointerUpThemeAnimation

Vedi anche Aggiunta di un'animazione ai puntatori con la raccolta di animazioni

Visualizza interfacce utente o controlli temporanei.

Visualizza e nascondi interfacce utente o controlli temporanei.

|

JavaScript: usa fadeIn e fadeOut

XAML: usa FadeInThemeAnimation e FadeOutThemeAnimation

Vedi anche Aggiunta di un'animazione a elementi dell'interfaccia utente mediante la libreria delle animazioni

Aggiornamento

Aggiorna i contenuti o aggiungi un'animazione a una modifica del layout della pagina esistente.

|

JavaScript: usa crossFade

XAML: usa FadeOutThemeAnimation e FadeInThemeAnimation

Vedi anche Aggiunta di un'animazione a elementi dell'interfaccia utente mediante la libreria delle animazioni

Mostra ulteriori controlli o contenuti in linea

Fai posto e mostra ulteriori controlli o contenuti all'interno dell'interfaccia utente esistente.

|

JavaScript: usa createExpandAnimation e createCollapseAnimation

XAML: non applicabile

Aggiungi o elimina le voci di un elenco

Aggiungi o elimina una o più voci da un elenco esistente.

|

JavaScript: usa createAddToListAnimation e createDeleteFromListAnimation

XAML: usa AddDeleteThemeTransition

Vedi anche Uso della libreria delle animazioni per creare elenchi e voci di elenco con animazioni

Filtra un elenco durante la ricerca

Aggiungi o elimina rapidamente più voci di un elenco durante la ricerca.

|

JavaScript: usa createAddToSearchListAnimation e createDeleteFromSearchListAnimation

XAML: non applicabile

Vedi anche Uso della libreria delle animazioni per creare elenchi e voci di elenco con animazioni

Mostra una barra dei comandi o dei messaggi

Mostra o nascondi una barra dei comandi o dei messaggi al bordo dello schermo.

|

JavaScript: usa showEdgeUI e hideEdgeUI

XAML: usa EdgeUIThemeTransition

Vedi anche Animazione delle superfici dell'interfaccia utente con la libreria delle animazioni

Visualizza un riquadro attività

Mostra e nascondi un riquadro attività o un altro ampio contenitore di interfaccia utente nel bordo dello schermo.

|

JavaScript: usa showPanel e hidePanel

XAML: usa PaneThemeTransition

Vedi anche Animazione delle superfici dell'interfaccia utente con la libreria delle animazioni

Mostra elementi di interfaccia utente popup

Mostra e nascondi elementi di interfaccia utente popup, ad esempio riquadri a comparsa o menu di scelta rapida.

|

JavaScript: usa showPopup e hidePopup

XAML: usa PopInThemeAnimation e PopOutThemeAnimation

Vedi anche Animazione delle superfici dell'interfaccia utente con la libreria delle animazioni

Trascina

Trascina elementi per riordinare un elenco.

|

JavaScript: usa dragSourceStart, dragSourceEnd, dragBetweenEnter e dragBetweenLeave

XAML: usa DragItemThemeAnimation, DropTargetItemThemeAnimation e DragOverThemeAnimation

Vedi anche Uso della libreria delle animazioni per creare elenchi e voci di elenco con animazioni

Seleziona un riquadro con scorrimento

Aggiungi un'animazione a un riquadro per farlo tornare in posizione statica dopo che l'utente ha eseguito uno scorrimento.

|

JavaScript: usa swipeSelect e swipeDeselect

XAML: usa SwipeBackThemeAnimation

Mostra la possibilità di scorrimento

Aggiungi un'animazione per indicare che il riquadro supporta lo scorrimento.

|

JavaScript: usa swipeReveal

XAML: usa SwipeHintThemeAnimation

Aggiorna un riquadro

Aggiorna l'intero contenuto del riquadro o scorri per visualizzare temporaneamente ulteriori informazioni sul riquadro.

|

JavaScript: usa createPeekAnimation

XAML: non applicabile

Aggiorna una notifica

Aggiorna una notifica numerica con un nuovo valore.

|

JavaScript: usa updateBadge

XAML: non applicabile

Riposiziona

Riposiziona l'interfaccia utente o contenuti.

|

JavaScript: usa createRepositionAnimation

XAML: usa RepositionThemeTransition

Vedi anche Aggiunta di un'animazione a elementi dell'interfaccia utente mediante la libreria delle animazioni

Argomenti correlati

Linee guida per l'esperienza utente delle app di Windows Store
Animazione dell'interfaccia utente

 

 

Mostra:
© 2017 Microsoft