Linguaggio: HTML | XAML

Uso di animazioni nelle app (HTML)

Applies to Windows and Windows Phone

Usa le animazioni nelle app scritte in JavaScript per rendere l'esperienza utente più veloce e fluida, coerente con quella di altre app di Windows. Le animazioni consentono di effettuare la transizione tra stati diversi dell'interfaccia utente in modo che l'app risulti più reattiva all'input dell'utente. Le animazioni offrono all'utente utili segnali visivi senza tuttavia distrarre o interferire nel funzionamento dell'app.

Per scaricare un esempio che illustra molti dei concetti presentati in questo argomento, vedi l'esempio della Libreria animazioni HTML. Il codice incluso in questo argomento è tratto da questo esempio.

Roadmap: che relazione c'è tra questo argomento e gli altri? Vedi:

Origini delle animazioni

Alcune animazioni sono incorporate nei controlli di Windows. Quando usi questi controlli, ottieni le loro animazioni senza bisogno di altro codice. È comunque possibile scegliere di usare la Libreria animazioni. Con la Libreria animazioni puoi creare animazioni personalizzate per le tue app senza tuttavia rinunciare all'aspetto tipico dello stile di Windows.

Uso delle animazioni incorporate

Alcune animazioni sono già disponibili in Windows.

Animazioni di sistema di Windows

Alcune animazioni offerte dal sistema si applicano a tutte le finestre delle app. Per usare le animazioni di sistema non è necessario che l'app sia provvista di apposite caratteristiche. Esistono tuttavia alcuni aspetti chiave di cui occorre essere a conoscenza, i quali sono illustrati in questo articolo.

Avvio dell'app

Durante l'avvio di un'app sono previste due animazioni. La prima viene eseguita all'avvio dell'app tra il momento in cui viene selezionata nella schermata Start e quello in cui ne viene visualizzata la schermata iniziale. La seconda animazione consiste in una dissolvenza incrociata tra la schermata iniziale e lo sfondo dell'app. È consigliabile che l'app esegua anche una propria animazione per visualizzare la prima pagina di contenuto quando si passa oltre la schermata iniziale.

Modifiche delle dimensioni e dell'orientamento

Quando il layout dell'app cambia in seguito a una modifica delle dimensioni o dell'orientamento, le animazioni di sistema rendono la transizione più fluida.

Visualizzazione e chiusura della tastiera su schermo

La tastiera su schermo viene visualizzata automaticamente quando si imposta lo stato attivo su un controllo di input di testo nell'app. Per impostazione predefinita, il contenuto dell'app scorre automaticamente per tenere il controllo di input visibile, se necessario. Non sono richieste azioni particolari da parte dell'app.

Controlli di Windows e controlli HTML

I controlli indicati di seguito includono animazioni ed è consigliabile usarli sempre laddove possibile.

Quando vengono usati comuni controlli per i moduli HTML come pulsanti, caselle di controllo e menu a discesa non è necessario predisporre animazioni in risposta ad azioni degli utenti come il clic o il passaggio del mouse. Questi controlli includono già le animazioni necessarie oppure non ne richiedono perché usano un cambiamento di colore o altri indicatori visivi per offrire feedback agli utenti.

Gli stili di questi elementi vengono applicati automaticamente tramite i file CSS WinJS e UI.js nei modelli di progetto di Microsoft Visual Studio.

Uso della Libreria animazioni

Puoi aggiungere animazioni personalizzate alle tue app mediante la Libreria animazioni. Si tratta di una famiglia di animazioni coerenti con lo stile dinamico e la personalità di Windows e Windows Phone. Gli sviluppatori possono usare queste animazioni nelle proprie app tramite le funzioni che costituiscono lo spazio dei nomi WinJS.UI.Animation. Per ulteriori informazioni sulla Libreria animazioni, tra cui video e linee guida per le singole animazioni, vedi Animazione dell'interfaccia utente.

Ecco i casi in cui è necessario realizzare animazioni personalizzate:

  • Spostamento di un intero controllo
  • Modifica del contenuto dell'app
  • Navigazione tra le pagine dell'app

Tutte le animazioni disponibili nella Libreria animazioni sono implementate mediante animazioni e transizioni CSS. Le animazioni della Libreria animazioni rendono animate le proprietà CSS "opacity" e "transform".

Uso dei parametri element e offset in una funzione della Libreria animazioni

Molte delle funzioni della Libreria animazioni includono i medesimi parametri con modalità d'uso identiche.

element

Molte funzioni della Libreria animazioni usano un elemento DOM (Document Object Model) come destinazione dell'animazione. Il parametro può essere espresso nei modi seguenti:

  • Come valore speciale "undefined", indicante che l'animazione non prevede una destinazione di questo tipo
  • Come oggetto singolo
  • Come matrice JavaScript (possibilmente vuota) di elementi
  • Come NodeList (ad esempio, il risultato di querySelectorAll)
  • Come HTMLCollection

offset

Il parametro offset fa parte delle animazioni e delle transizioni degli elementi che prevedono una traslazione Queste animazioni spostano l'elemento dalla sua posizione di offset alla posizione finale oppure dalla posizione corrente a quella di offset.

Alcune animazioni dispongono di offset consigliati utilizzabili passando null o undefined come argomento del parametro offset oppure omettendo del tutto quest'ultimo. Se possibile, è sempre consigliabile usare i valori di offset predefiniti, i quali offrono i vantaggi seguenti:

  • Migliori prestazioni di animazione
  • Specularità automatica nelle app con orientamento da destra a sinistra
  • Regolazione automatica (nelle animazioni applicabili) della distanza di traslazione consigliata dal progettista quando l'app viene ridimensionata.

A meno di imprescindibili eccezioni di progettazione, queste animazioni dovrebbero essere usate sempre con l'offset predefinito:

Per altre animazioni della Libreria animazioni, l'offset può essere specifico dell'app a seconda dell'interfaccia utente. Tutte le funzioni seguenti hanno un offset predefinito che viene usato nel caso in cui non venga fornito un offset specifico, ma solitamente si specifica un offset in base al design dell'app.

Puoi specificare il parametro offset in diversi formati:

  • Come valore speciale "undefined", specificato in modo esplicito nella chiamata o in modo implicito omettendo il valore del parametro. Il valore undefined indica di usare l'offset predefinito dell'animazione.
  • Come singolo oggetto JavaScript in questo formato:

    { top: string, left: string, rtlflip: true | false }

    Ad esempio:

    { top: "12px", left: "0px", rtlflip: true }

    L'oggetto deve includere le proprietà denominate top e left che rappresentano l'offset applicato all'inizio dell'animazione. Per esprimere l'offset puoi usare qualsiasi unità CSS valida. In questo formato, l'offset si applica a tutti gli elementi coinvolti nell'animazione.

    Il parametro rtlflip inverte i valori pre determinare l'allineamento da destro a sinistra. Viene applicato al parametro left cambiandone il segno. Ad esempio, 10px diventa -10px. Questo parametro è facoltativo e può essere omesso. In questo caso, il valore predefinito è false.

  • Come matrice JavaScript (possibilmente vuota) degli oggetti {top: ..., left: ..., rtlflip: ...} indicati sopra. In questo caso, ogni oggetto della matrice si applica a un singolo elemento dell'animazione nell'ordine dato, ovvero il primo oggetto si applica al primo elemento, il secondo al secondo e così via. Se il numero di elementi è maggiore di quello degli oggetti della matrice, l'ultimo elemento della matrice si applica a tutti gli elementi rimanenti. L'unica animazione che in genere richiede una matrice di record di offset è dragBetweenEnter. Per altre animazioni è in genere preferibile passare un singolo record di offset da usare per tutti gli elementi.

Valore restituito Promise

Il valore restituito per tutte le animazioni della Libreria animazioni è un oggetto Promise. Puoi usare il metodo doneo then di questo oggetto per rilevare il completamento dell'animazione. L'oggetto Promise offre anche un metodo cancel tramite cui è possibile annullare un'animazione in esecuzione.

Tipi di animazione

Le animazioni della Libreria animazioni possono essere di uno di questi tre tipi: animazione di elemento, transizione di elemento o transizione di layout. Ogni tipo prevede un modello di implementazione diverso.

Animazioni degli elementi

Le animazioni degli elementi sono implementate come animazioni CSS. Le animazioni degli elementi non modificano lo stato dell'elemento, esse infatti vengono eseguite nello stato corrente. Ad esempio, l'animazione di elemento showPanel fa scorrere un pannello, ad esempio un riquadro attività, dal bordo dello schermo. L'animazione showPanel applica la traslazione del pannello da un valore di offset specificato dallo sviluppatore alla posizione corrente dell'elemento.

Per usare un'animazione di elemento, devi impostare lo stato finale dell'elemento stesso. Nell'esempio seguente, l'elemento myPanel si trova già nella sua posizione finale prima di essere visualizzato, tuttavia non è visibile. Per visualizzare il pannello, nel codice si imposta l'opacità dell'elemento corrispondente su 1 e quindi si attiva l'animazione. Se questi passaggi avvengono nella medesima funzione, la modifica all'opacità non viene applicate se non inizia l'animazione. Il pannello diventa visibile nella relativa posizione di offset e quindi si sposta grazie all'animazione nella posizione effettiva.



                                                
myPanel.style.opacity = "1";
WinJS.UI.Animation.showPanel(myPanel, { top: "0px", left: "350px" });                                       
                                            

Per nascondere il pannello si applica il processo inverso. In primo luogo, il codice deve chiamare hidePanel, che sposta il pannello dalla posizione corrente a quella di offset. Al termine dell'animazione, il codice imposta l'opacità su 0 per nascondere l'elemento. Se non includi la modifica all'opacità, al termine dell'animazione l'elemento torna alla posizione originale rimanendo visibile sullo schermo.



                                                
WinJS.UI.Animation.hidePanel(myPanel, { top: "0px", left: "350px" })
    .then(function () { myPanel.style.opacity = "0"; });                                       
                                            

Ecco le animazioni degli elementi disponibili nella Libreria animazioni:

FunzioneDescrizione
showEdgeUI Scorrimento in entrata nella vista dell'interfaccia utente basata su bordi. L'animazione viene applicata alla traslazione dell'elemento di destinazione da una posizione di offset alla posizione corrente.
hideEdgeUI Scorrimento in uscita dalla vista dell'interfaccia utente basata su bordi. L'animazione viene applicata alla traslazione dell'elemento di destinazione dalla posizione corrente a una di offset.
showPanel Scorrimento in entrata nella vista di pannelli di grandi dimensioni basati su bordi. L'animazione viene applicata alla traslazione dell'elemento di destinazione da una posizione di offset alla posizione corrente.
hidePanel Scorrimento in uscita dalla vista di pannelli di grandi dimensioni basati su bordi. L'animazione viene applicata alla traslazione dell'elemento di destinazione dalla posizione corrente a una di offset.
showPopup Visualizza l'interfaccia utente contestuale in primo piano nella vista. L'animazione viene applicata alla traslazione da una posizione di offset alla posizione corrente e impostando l'opacità su 1.
hidePopup Nasconde l'interfaccia utente contestuale. L'animazione viene applicata impostando l'opacità su 0.
updateBadge Aggiorna una notifica numerica. L'animazione viene applicata alla traslazione da una posizione di offset a quella corrente e impostando l'opacità su 1.

 

Transizioni degli elementi

Le transizioni degli elementi sono implementate come transizioni CSS. Le transizioni degli elementi cambiano lo stato di un elemento eseguendo la transizione della proprietà CSS al valore definito dall'animazione.

Molte delle transizioni degli elementi incluse nella Libreria animazioni sono disponibili in una coppia di animazioni da usare contestualmente. Il cambiamento di stato determinato da un'animazione della coppia viene invertito dall'altra. Ad esempio, l'animazione fadeIn applica la transizione dell'opacità dell'elemento al valore 1, mentre l'animazione fadeOut applica la transizione al valore di opacità 0.

Alcune animazioni della Libreria animazioni usano una combinazione di animazioni e transizioni degli elementi. Ad esempio, l'animazione enterContent applica la transizione dell'opacità del contenuto al valore 1 mentre viene effettuata un'animazione di traslazione da una posizione di offset a quella corrente.

Ecco le animazioni della Libreria animazioni che usano transizioni degli elementi oppure transizioni ed animazioni degli elementi abbinate:

FunzioneDescrizione
fadeIn Visualizzazione di elementi e controlli transitori. Viene effettuata la transizione dell'opacità al valore 1.
fadeOut Scomparsa di elementi e controlli transitori. Viene effettuata la transizione dell'opacità al valore 0.
enterContent Animazione in entrata nella vista di un singolo elemento o di un insieme di contenuti. Vengono effettuate la transizione dell'opacità al valore 1 e la traslazione da una posizione di offset alla posizione corrente.
exitContent Animazione in uscita dalla vista di un singolo elemento o di un insieme di contenuti. Viene effettuata la transizione dell'opacità al valore 0.
enterPage Animazione in entrata nella vista del contenuto completo di una pagina. Vengono effettuate la transizione dell'opacità al valore 1 e la traslazione da una posizione di offset alla posizione corrente.
exitPage Animazione in uscita dalla vista del contenuto completo di una pagina. Viene effettuata la transizione dell'opacità al valore 0.
crossFade Aggiornamento di un'area del contenuto. Viene effettuata la transizione dell'opacità al valore 1 per il contenuto in entrata e al valore 0 per il contenuto in uscita.
pointerDown Visualizzazione di un feedback visivo al tocco o clic dell'utente su un riquadro. Viene effettua la transizione della scala a un valore lievemente più piccolo.
pointerUp Visualizzazione di un feedback visivo al termine del tocco o clic dell'utente su un riquadro. Vengono ripristinate le dimensioni originali della scala.
dragSourceStart Visualizzazione di un feedback visivo all'inizio di un'operazione di trascinamento da parte dell'utente. Viene effettuata la transizione della scala a un valore lievemente più grande e viene ridotta l'opacità. Questa animazione effettua inoltre la transizione della scala degli elementi circostanti (interessati) a un valore lievemente inferiore.
dragSourceEnd Visualizzazione di un feedback visivo al termine di un'operazione di trascinamento quando l'utente rilascia l'oggetto trascinato. Vengono invertite le animazioni effettuate da dragSourceStart.
dragBetweenEnter Visualizzazione di un feedback visivo indicante che gli elementi attualmente sotto l'oggetto trascinato verranno spostati e nascosti se l'oggetto viene rilasciato nella posizione in questione. Viene effettuata la transizione della proprietà transform degli oggetti interessati a un valore di offset.
dragBetweenLeave Visualizzazione di un feedback visivo indicante che un oggetto trascinato ha lasciato l'area di rilascio invertendo l'animazione effettuata da dragBetweenEnter.
swipeSelect Transizione di un riquadro a uno stato di selezione con scorrimento rapido. Viene effettuata la transizione dell'opacità del riquadro al valore 0 mentre l'opacità dell'elemento visivo "selezionato" di offset viene impostata su 1.
swipeDeselect Transizione di un riquadro a uno stato di deselezione con scorrimento rapido. Viene effettuata la transizione dell'opacità di un elemento visivo "selezionato" al valore 0 mentre l'opacità del riquadro originale viene impostata su 1.
swipeReveal Visualizzazione di un suggerimento visivo indicante che un riquadro supporta le interazioni tramite scorrimento rapido, Viene effettuata la transizione della traslazione dalla posizione corrente a una di offset.
turnstileBackwardIn Fa ruotare un elemento verso l'interno della pagina in senso orario.
turnstileBackwardOut Fa ruotare un elemento verso l'esterno della pagina in senso orario.
turnstileForwardIn Fa ruotare un elemento verso l'interno della pagina in senso antiorario.
turnstileForwardOut Fa ruotare un elemento verso l'esterno della pagina in senso antiorario.
slideDown Fa scorrere gli elementi fuori dalla schermata, verso il basso.
slideUp Fa scorrere gli elementi verso l'interno della schermata, a partire dal basso.
slideLeftIn Fa scorrere gli elementi verso l'interno schermata, da sinistra.
slideLeftOut Fa scorrere gli elementi verso l'esterno schermata, a sinistra.
slideRightIn Fa scorrere gli elementi verso l'interno schermata, da destra.
slideRightOut Fa scorrere gli elementi verso l'esterno schermata, a destra.
continuumBackwardIn Ridimensiona una pagina in ingresso mentre ridimensiona, ruota e sposta un oggetto in ingresso.
continuumBackwardOut Ridimensiona, ruota e sposta una pagina in uscita mentre viene rimossa.
continuumForwardIn Porta un oggetto nella schermata, ridimensionando la pagina in ingresso mentre ridimensiona, scala e sposta l'elemento in ingresso.
continuumForwardOut Rimuove un oggetto dalla schermata, ridimensionando la pagina in uscita mentre ridimensiona, scala e sposta l'elemento in uscita.

 

Transizioni del layout

Le animazioni di transizione del layout della Libreria animazioni sono più complesse delle animazioni e transizioni degli elementi. Le animazioni di transizione del layout in genere coinvolgono più elementi e producono un cambiamento di layout. Le funzioni di animazione non possono tuttavia presupporre il modo in cui avviene un cambiamento di layout. Ad esempio, nell'animazione reposition, un elemento si sposta dal punto A al punto B. Ciò può avvenire in molti modi, ad esempio modificando la larghezza dell'elemento, l'offset, il margine o la spaziatura.

Per le transizioni del layout, la Libreria animazioni offre una funzione di creazione e restituisce un oggetto con un metodo .execute(). Il modello di chiamata per queste animazioni è il seguente:

  1. Viene chiamata la funzione di creazione animazione appropriata. Viene registrata la posizione corrente degli elementi di destinazione.
  2. L'app esegue la modifica del layout nel modo scelto.
  3. L'app chiama il metodo execute nell'oggetto restituito dalla funzione di creazione per attivare l'animazione. Viene quindi registrata la nuova posizione degli elementi di destinazione i quali vengono spostati dalla posizione originale alla nuova posizione attraverso l'animazione.
  4. Il metodo execute restituisce un oggetto Promise utilizzabile nel modo consueto.

Nell'esempio seguente viene illustrata l'animazione add-to-list, usata per animare l'inserimento di una voce all'inizio di un elenco. Quando si chiama createAddToListAnimation, vengono registrate le posizioni di tutti gli elementi passati nella raccolta affectedItems. Nella raccolta sono inclusi tutti gli elementi la cui posizione potrebbe essere influenzata dall'arrivo del nuovo elemento.

Dopo la chiamata a createAddToListAnimation, la nuova voce viene inserita all'inizio dell'elenco. Nel codice seguente list è l'elemento div contenente le voci di elenco. Con la chiamata al metodo insertBefore dell'elemento viene eseguita l'effettiva aggiunta di newItem all'inizio dell'elenco. In seguito a questo inserimento tutte le altre voci dell'elenco cambiano posizione. Puoi scegliere liberamente come cambiare la posizione della raccolta affectedItems.

Nell'esempio viene infine attivata l'animazione per spostare la nuova voce di elenco nella posizione desiderata chiamando il metodo execute dell'oggetto restituito da createAddToListAnimation.



                                                
var addToList = WinJS.UI.Animation.createAddToListAnimation(newItem, affectedItems);
list.insertBefore(newItem, list.firstChild);
addToList.execute();
                                            

Di seguito sono elencate le funzioni di creazione delle animazioni di transizione del layout della Libreria animazioni:

FunzioneDescrizione
createExpandAnimation Visualizzazione di informazioni aggiuntive in linea. Il resto del contenuto viene spostato per liberare spazio, se necessario.
createCollapseAnimation Scomparsa di contenuto in linea. Il resto del contenuto viene compresso, se necessario.
createRepositionAnimation Spostamento di un elemento in una nuova posizione.
createAddToListAnimation Aggiunta di una voce a un elenco.
createDeleteFromListAnimation Rimozione di una voce da un elenco.
createAddToSearchListAnimation Aggiunta di una voce a un elenco e contestuale applicazione di filtri ai risultati di ricerca.
createDeleteFromSearchListAnimation Rimozione di una voce da un elenco e contestuale applicazione di filtri ai risultati di ricerca.
createPeekAnimation Visualizzazione di un'animazione di anteprima in un riquadro. Un riquadro con contenuto che è possibile scorrere consente di scorrere il contenuto in alto o in basso all'interno dello spazio del riquadro per visualizzare la comunicazione completa.

 

Pianificazione delle animazioni

Per completare uno scenario complesso spesso è necessario eseguire diverse animazioni su varie parti dell'interfaccia utente. Se ad esempio si elimina un messaggio email, potrebbe essere necessario rimuovere il messaggio dall'elenco e quindi visualizzare quello successivo. Nella maggior parte dei casi è consigliabile eseguire contemporaneamente entrambe le animazioni in modo da ottenere una durata complessivamente inferiore. Nelle sezioni successive esamineremo i problemi da tenere presenti in scenari di questo tipo.

Interruzione delle animazioni

Un'animazione o una transizione di un elemento si interrompe se viene attivata un'altra animazione o transizione per la stessa proprietà CSS. In questi casi, la prima animazione o transizione viene annullata in conformità alla specifica CSS3. Le transizioni CSS si interrompono tra loro in modo fluido e uniforme. Tuttavia, nel caso delle animazioni CSS, esse mostrano una transizione della proprietà CSS sopra l'elemento, mentre il valore effettivo della proprietà CSS nell'elemento non cambia. L'interruzione di un'animazione CSS comporta un passaggio improvviso al valore originale della proprietà, e non è consigliabile. Con le animazioni CSS è in genere preferibile attendere la fine della prima animazione prima di iniziare la seconda. Per ulteriori informazioni, vedi Attesa del completamento di un'animazione.

ScenarioRisultato
Interruzione di un'animazione CSS da parte di un'altra animazione CSSViene ripristinato lo stato true della proprietà CSS la cui animazione è in corso e quindi inizia la nuova animazione. Questo può determinare uno effetto visivo poco piacevole.
Transizione interrotta da un'animazione CSSLa transizione viene interrotta in modo fluido in qualsiasi punto si trovi e viene avviata l'animazione verso il nuovo valore finale da quello corrente.
Transizione interrotta da una transizione CSSLa transizione viene interrotta in modo fluido in qualsiasi punto si trovi e viene avviata la transizione verso il nuovo valore finale da quello corrente.
Animazione interrotta da una transizione CSSViene ripristinato lo stato true della proprietà CSS la cui animazione è in corso e quindi inizia la nuova transizione. Questo può determinare uno effetto visivo poco piacevole.

 

Annullamento di animazioni

Tutte le animazioni della Libreria animazioni possono essere annullate tramite il metodo cancel dell'oggetto Promise restituito dalla funzione di animazione.

Attesa del completamento di un'animazione

Per eseguire un'azione al termine di un'animazione, passa una funzione di callback al metodo done o then dell'oggetto Promise restituito dalla funzione di animazione. Ciò è utile nei casi in cui si attende di rimuovere un elemento dal DOM finché la relativa animazione di uscita viene completata oppure quando si concatenano più animazioni. Ecco un esempio con la funzione di callback che applica una dissolvenza in uscita all'elemento di destinazione al termine della dissolvenza in entrata.



                                                
WinJS.UI.Animation.fadeIn(target)
       .then(function () { WinJS.UI.Animation.fadeOut(target); });
                                            

Non è consigliabile usare timer JavaScript per determinare il completamento dell'animazione. Si tratta infatti di una modalità inaffidabile in quanto il timer potrebbe completarsi prima o dopo l'animazione la cui durata può variare a seconda dell'hardware e di altri processi in esecuzione nel thread dell'interfaccia utente.

Abilitazione e disabilitazione delle animazioni

  • Applies to Windows

Windows: tutte le animazioni della Libreria animazioni possono essere disabilitate mediante l'impostazione di sistema 'Disattiva tutte le animazioni non necessarie' disponibile in Accessibilità nel Pannello di controllo, nella sezione Facilita la visualizzazione. Se questa impostazione è selezionata, tutte le animazioni non essenziali al funzionamento di base dell'app vengono disabilitate. Ciò interessa in genere tutte le animazioni ad eccezione di alcune di quelle necessarie per eseguire determinati giochi. Questa impostazione viene automaticamente applicata alle animazioni della Libreria animazioni e alle animazioni personalizzate che usano executeAnimation o executeTransition. Se crei un'animazione personalizzata, il codice deve essere reso compatibile in modo esplicito con questa impostazione.

Dipende dallo sviluppatore decidere se le animazioni della Libreria animazioni usate in un'app debbano rispondere alle funzioni WinJS.UI.enableAnimations e WinJS.UI.disableAnimations.

Ottimizzazione delle prestazioni delle animazioni

Mostrare la velocità di risposta di un'app tramite le animazioni

Allo scopo di offrire un'esperienza utente complessivamente migliore, le app devono risultare rapide e reattive rispetto alle azioni dell'utente. Se usate correttamente, le animazioni possono contribuire a conferire alle app maggiore fluidità e velocità di risposta offrendo il feedback appropriato al momento giusto.

Le animazioni in risposta a un'azione dell'utente devono iniziare nel minor tempo possibile. Si tratta di un aspetto di cruciale importante per far sapere all'utente che l'azione è effettivamente in esecuzione. Se sono necessarie ulteriori operazioni per completare una transizione, ad esempio per il caricamento di una nuova pagina, esse devono essere eseguite dopo che è stata attivata l'animazione di risposta all'utente.

Usare animazioni indipendenti

La piattaforma delle animazioni per le app 8 scritte in JavaScript consente di eseguire alcuni tipi di animazione in un thread di sistema separato con accelerazione hardware, indipendente dal thread dell'interfaccia utente. Le animazioni di questo tipo sono definite animazioni indipendenti. Un'animazione eseguita nel thread dell'interfaccia utente è invece chiamata animazione dipendente. Poiché non devono essere eseguite insieme ad altre azioni in corso nel thread dell'interfaccia utente, le animazioni indipendenti risultano in genere più fluide di quelle dipendenti.

Tutte le animazioni della Libreria animazioni possono essere eseguite come indipendenti, ma devi tenere presenti alcuni aspetti relativi alla loro implementazione nell'app. Per ulteriori informazioni su come impostare le chiamate alle funzioni di animazione vengano per l'esecuzione come animazioni indipendenti, vedi Composizione indipendente: rendering e composizione in Internet Explorer.

Ridurre al minimo il numero di elementi animati contemporaneamente

Se possibile, ti consigliamo di ridurre il numero di singoli elementi che vengono animati. Se ad esempio invece di passare una matrice di elementi a un'animazione, passi solo l'elemento padre, il motore di animazione dovrà creare una operazione di animazione.

Usare gli offset predefiniti

Per le animazioni della Libreria animazioni che includono un parametro offset, usa se possibile il valore predefinito. In questo modo non solo si ottiene la traslazione consigliata per l'animazione, ma anche le prestazioni risultano migliori in quanto l'animazione può usare fotogrammi chiave precalcolati.

Gli offset predefiniti diventano inoltre automaticamente speculari nelle app con orientamento da destra a sinistra e, in alcuni casi, l'offset predefinito cambia automaticamente l'entità della traslazione quando l'app viene ridimensionata in modo da mostrare l'effetto appropriato per lo stato di visualizzazione più stretto.

Creazione di animazioni personalizzate

Se possibile, ti consigliamo di usare le animazioni già disponibili nella Libreria animazioni. Se lo scenario in cui operi presenta caratteristiche uniche e nessuna delle animazioni predefinite è idonea, puoi creare un'animazione personalizzata.

Esistono due modi per implementare un'animazione personalizzata nelle app di scritte in JavaScript: tramite animazioni e transizioni CSS3 standard o tramite le funzioni di supporto della Libreria animazioni executeAnimation e executeTransition.

Creazione di animazioni personalizzate con animazioni e transizioni CSS3 standard

Le animazioni e le transizioni CSS3 rappresentano un modo flessibile di creare un'animazione o una transizione per diverse proprietà CSS. Per ulteriori informazioni, vedi gli argomenti Animazioni e Transizioni.

Quando scegli di creare animazioni personalizzate, devi tenere presenti questi aspetti:

  • Le animazioni o le transizioni di alcune proprietà CSS non vengono eseguite come indipendenti, pertanto l'intera pagina potrebbe essere ridisegnata a ogni fotogramma. Ciò può dare luogo a rallentamenti e scatti durante l'animazione e quindi influire negativamente sull'esperienza utente. Evita di animare queste proprietà nell'implementazione delle animazioni personalizzate per assicurarti che queste ultime possano essere eseguite in modo indipendente.
  • Un'animazione o una transizione CSS3 personalizzata non può coesistere contemporaneamente con un'animazione della Libreria animazioni applicata allo stesso elemento.

Creazione di animazioni personalizzate con executeAnimation ed executeTranslation

Le funzioni executeAnimation e executeTransition della Libreria animazioni vengono usate per eseguire le animazioni incluse nella libreria stessa ed è possibile avvalersene per le animazioni personalizzate. Tutte le animazioni e le transizioni compatibili con queste funzioni possono essere eseguire in modalità indipendente e coesistere con qualsiasi altra animazione della libreria eseguita contemporaneamente. Le funzioni executeAnimation e executeTransition restituiscono un oggetto Promise insieme al resto delle funzioni della Libreria animazioni.

Puoi usare queste due funzioni con qualsiasi proprietà CSS a cui è possibile applicare animazioni. Solo le proprietà opacity e transform possono tuttavia essere eseguite come animazioni indipendenti. Se l'app richiede qualcosa di più particolare, ad esempio animazioni all'interno di un gioco, queste funzioni potrebbero non essere la scelta ideale.

Per l'uso della funzione executeAnimation, ti consigliamo di specificare i fotogrammi dell'animazione in modo da ottenere prestazioni migliori.



                                
@keyframes custom-opacity-in    { from { opacity: 0; } to { opacity: 1; } }
                            

Nell'esempio seguente viene mostrata un'animazione personalizzata.



                                
function runCustomShowAnimation() {
    var showAnimation = WinJS.UI.executeAnimation(
        target,
        {
            keyframe: "custom-opacity-in",
            property: "opacity",
            delay: 0,
            duration: 500,
            timing: "linear",
            from: 0,
            to: 1
        }
    );
}
                            

Nell'esempio seguente viene mostrata una transizione personalizzata.



                                
function runCustomShowTransition() {
    var showTransition = WinJS.UI.executeTransition(
        target,
        {
            property: "opacity",
            delay: 0,
            duration: 500,
            timing: "linear",
            to: 1
        }
    );
}
                            

Combinazione di animazioni e transizioni personalizzate

Puoi combinare animazioni e transizioni per creare uno storyboard personalizzato. Negli esempi seguenti vengono combinate un'animazione e una transizione per ottenere contemporaneamente un effetto di dissolvenza in entrata e di scorrimento sull'elemento di destinazione. Le due parti dello storyboard vengono attivate in modo indipendente tramite chiamate a executeAnimation e executeTransition, tuttavia esse devono iniziare contemporaneamente.



                                
@keyframes custom-translate-in    { from { transform: translateY(50px); } to { transform: none; } }
                            



                                
function runCustomShowStoryboard() {
    var promise1 = WinJS.UI.executeAnimation(
        target,
        {
            keyframe: "custom-translate-in",
            property: "transform",
            delay: 0,
            duration: 367,
            timing: "cubic-bezier(0.1, 0.9, 0.2, 1)",
            from: "translate(50px)", 
            to: "none"
        });
    var promise2 = WinJS.UI.executeTransition(
        target,
        {
            property: "opacity",
            delay: 0,
            duration: 167,
            timing: "linear",
            to: 1
        });
    return WinJS.Promise.join([promise1, promise2]);
}
                            

Argomenti correlati

Animazione dell'interfaccia utente (HTML)

 

 

Mostra:
© 2015 Microsoft