Animazione dell'interfaccia utente basata su bordi (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 ]
Usa le animazioni dell'interfaccia utente basata su bordi per mostrare o nascondere l'interfaccia utente originata dal bordo dello schermo. Questa interfaccia utente può essere resa visibile sia dall'utente che dall'app. Queste animazioni vengono usate principalmente per i controlli personalizzati. I controlli esistenti, ad esempio AppBar, dispongono di animazioni della libreria incorporate per l'interfaccia utente basata su bordi e puoi ottenere il comportamento animato semplicemente includendo tali controlli nell'interfaccia utente.
L'interfaccia utente può sovrapporsi all'app o fare parte della superficie dell'app principale. Nel secondo caso, potrebbe essere necessario ridimensionare il resto dell'app per fare spazio alla nuova interfaccia utente quando viene visualizzata.
.png "Diagramma di base di un elemento basato su bordi")
Questo insieme di animazioni include le API seguenti:
Esistono due tipi di elementi basati su bordi, ognuno con il proprio set di API di animazione: l'interfaccia utente basata su bordi e l'interfaccia utente basata su riquadri.
Il video seguente illustra le animazioni che consentono di visualizzare e nascondere l'interfaccia utente basata su bordi:
Il video seguente illustra le animazioni che consentono di visualizzare e nascondere i pannelli:
- Usa le animazioni dell'interfaccia utente basata su bordi con un'interfaccia utente basata su bordi più piccola se intendi animare un controllo personalizzato con comportamento analogo ai controlli AppBar o simili. Puoi anche definire una superficie/area dell'interfaccia utente per errori e avvisi derivanti da azioni nell'app. Se sei orientato a uno scenario di questo tipo, leggi Linee guida per i riquadri a comparsa. L'interfaccia utente basata su bordi potrebbe non essere appropriata per lo scenario.
- Le animazioni dell'interfaccia utente basata su riquadri vengono usate con interfacce utente basate su bordi che sono generalmente più grandi e coprono una parte maggiore della finestra dell'app, ad esempio la tastiera su schermo.
.png "Illustrazione che mostra la differenza di dimensioni tra un'interfaccia utente basata su bordi e un'interfaccia utente basata su riquadri")
Importante Il controllo barra dell'app disponibile in Windows include le animazioni per interfaccia utente basata su bordi, evitandoti la necessità di fornirle manualmente.
Per usare queste animazioni, devi conoscere:
L'oggetto che verrà fatto scorrere in avanti o indietro.
La distanza (offset) in base a cui verrà fatto scorrere l'oggetto. Questa sarà la distanza finale tra il bordo interno dell'interfaccia utente e il bordo dello schermo.
.png "Illustrazione della misurazione definita scostamento")
Animazioni basate su bordi nel comportamento dei controlli di Windows Runtime predefiniti
Per includere interfacce utente basate su bordi, consigliamo di aggiungere un controllo AppBar, che applicherà automaticamente tutte le transizioni e il comportamento di interazione appropriati. Per altre informazioni, vedi Aggiunta di barre dell'app.
Anche gli oggetti relativi ai riquadri a comparsa (Flyout, Menu o SettingsFlyout), dispongono di animazioni incorporate, ma non sono effettivamente interfacce utente basate su bordi. I riquadri a comparsa sono infatti associati al contesto che ne ha determinato la visualizzazione e non al bordo della finestra dell'app. Puoi usarli per un'interfaccia utente che viene richiamata da un controllo AppBar, ma anche in questo caso non si tratta di un'interfaccia utente basata su bordi pura. Per altre informazioni, vedi Aggiunta di riquadri a comparsa e Animazione dell'interfaccia utente popup.
Altre risorse
Per esempi di codice che illustrano l'uso delle API di animazione dell'interfaccia utente basata su bordi, vedi l'esempio di libreria animazioni HTML.
Per conoscere le procedure consigliate di progettazione per l'uso di queste animazioni, vedi Linee guida ed elenco di controllo per le animazioni dell'interfaccia utente basata su bordi.