Animazione delle sequenze di trascinamento (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 delle azioni di trascinamento quando gli utenti spostano gli oggetti con le dita o tramite un dispositivo di input, come un mouse o uno stilo. Le azioni di trascinamento comuni sono, ad esempio, lo spostamento di un elemento all'interno di un elenco o il rilascio di un elemento sopra un altro.
Nota Usa le animazioni delle azioni di trascinamento solo quando è l'utente a spostare l'oggetto. Per spostare l'oggetto in altri modi, usa le animazioni di riposizionamento.
Questo set di animazioni include le funzioni seguenti:
- dragSourceStart: l'utente inizia a trascinare un oggetto
- dragBetweenEnter: l'utente trascina un oggetto tra altri due oggetti in mezzo ai quali può essere rilasciato
- dragBetweenLeave: l'utente trascina via un oggetto da una possibile area di rilascio
- dragSourceEnd: l'utente rilascia l'oggetto che sta trascinando
Il supporto per il trascinamento predefinito è disponibile in ListView e GridLayout per JavaScript. Le animazioni delle azioni di trascinamento sono incorporate quando utilizzi questi controlli nell'interfaccia utente. Tuttavia, le animazioni trattate in questo argomento si rivelano utili se estendi la funzionalità di trascinamento ad altri controlli, in particolare a controlli personalizzati.
Il video seguente mostra le animazioni associate all'operazione di trascinamento della selezione:
Inizio trascinamento
Ogni sequenza di animazione delle azioni di trascinamento comincia con un inizio trascinamento (dragSourceStart), che viene visualizzato quando l'utente inizia a trascinare un oggetto.
Questa animazione modifica l'aspetto sia dell'origine del trascinamento (oggetto che viene trascinato) sia di uno o più oggetti interessati. Un oggetto interessato è un oggetto la cui posizione potrebbe cambiare per effetto della sequenza delle azioni di trascinamento. Quando un elenco viene riordinato, ad esempio, tutti gli elementi dell'elenco diversi dall'origine del trascinamento sono oggetti interessati, poiché la loro posizione nell'elenco potrebbe cambiare in seguito al trascinamento. Gli elementi interessati vengono animati per mostrare all'utente il cambiamento della loro posizione in risposta all'azione corrente. Tieni presente che non tutte le origini del trascinamento hanno oggetti interessati.
Per usare la funzione dragSourceStart, devi conoscere l'oggetto che l'utente sta trascinando e i relativi oggetti interessati.
Le immagini seguenti mostrano la relazione tra l'origine del trascinamento e gli oggetti interessati nell'animazione di inizio trascinamento. La prima immagine mostra l'oggetto da trascinare e gli elementi vicini prima che l'utente inizi a trascinarlo.
.png "Quattro oggetti delle stesse dimensioni, uno dei quali etichettato come origine del trascinamento")
Quando l'utente seleziona l'oggetto e inizia a trascinarlo, l'oggetto trascinato diventa più grande, mentre gli oggetti interessati diventano più piccoli.
.png "Quattro oggetti, con le dimensioni dell'origine del trascinamento aumentate e quelle degli oggetti interessati diminuite")
L'immagine successiva mostra una situazione in cui gli oggetti vicini non vengono interessati.
.png "Quattro oggetti, con le dimensioni dell'origine del trascinamento aumentate e quelle degli oggetti interessati invariate")
Fine trascinamento
Ogni sequenza di animazione delle azioni di trascinamento termina con una fine trascinamento (dragSourceEnd), che viene visualizzata quando l'utente rilascia un oggetto trascinato. L'animazione di fine trascinamento viene usata solo se prima è stata usata l'animazione di inizio trascinamento.
Questa animazione colloca l'origine del trascinamento, ovvero l'oggetto trascinato, nella sua posizione finale. Allo stesso tempo, rimuove le modifiche visive applicate all'origine del trascinamento e agli elementi interessati dall'animazione di inizio trascinamento. Gli oggetti interessati in una chiamata a dragSourceEnd sono sempre gli stessi oggetti usati in una chiamata a dragSourceStart.
Per usare la funzione dragSourceEnd, devi conoscere l'oggetto che l'utente sta rilasciando, la posizione finale dell'oggetto rilasciato e gli oggetti interessati (se la funzione dragSourceStart li include).
Le immagini seguenti mostrano la relazione tra l'origine del trascinamento e gli oggetti interessati nell'animazione di fine trascinamento. La prima immagine mostra un oggetto prima che l'utente lo rilasci in un insieme di oggetti interessati. L'origine del trascinamento appare dimensioni più grandi del normale e scostata dall'elenco. Gli oggetti interessati appaiono più piccoli delle dimensioni normali.
.png "Quattro oggetti, con le dimensioni dell'origine del trascinamento aumentate e quelle degli oggetti interessati diminuite e con l'origine del trascinamento scostata rispetto al piano degli altri tre oggetti interessati")
L'immagine successiva mostra una situazione in cui l'oggetto rilasciato non influenza gli altri oggetti. L'origine del trascinamento appare anche questa volta più grande e scostata dagli altri oggetti, ma gli altri oggetti appaiono nelle loro dimensioni normali.
.png "Quattro oggetti, con le dimensioni dell'origine del trascinamento aumentate e quelle degli oggetti interessati invariate e con l'origine del trascinamento scostata dagli altri tre oggetti")
Quando l'utente rilascia l'origine del trascinamento, tutti gli oggetti riacquistano le dimensioni normali e vengono riposizionati se necessario.
Trascinamento tra due elementi in entrata
L'animazione di trascinamento tra due elementi in entrata (dragBetweenEnter) viene usata quando l'utente trascina un oggetto (origine del trascinamento) tra altri due oggetti in mezzo ai quali può essere rilasciato. Questa animazione mostra all'utente gli oggetti interessati che si distanzieranno per fare spazio all'origine del trascinamento, se l'utente sceglie di rilasciarla in quella posizione.
Per usare la funzione dragBetweenEnter, devi conoscere gli oggetti interessati e la direzione e distanza di allontanamento di tali oggetti durante l'animazione.
Le immagini seguenti mostrano il movimento degli oggetti interessati in risposta all'origine del trascinamento. La prima immagine mostra gli oggetti interessati prima che l'origine del trascinamento attivi l'animazione di trascinamento tra due elementi in entrata.
.png "Oggetto origine del trascinamento sovrapposto a due oggetti interessati visualizzati nella loro posizione originale")
L'immagine successiva mostra che, come risultato dell'animazione di trascinamento tra due elementi in entrata, i due oggetti ai due lati dell'origine del trascinamento si sono distanziati.
.png "Oggetto origine del trascinamento sovrapposto a due oggetti interessati che si sono separati per mostrare la posizione di rilascio")
Trascinamento tra due elementi in uscita
L'animazione di trascinamento tra due elementi in uscita (dragBetweenLeave) viene usata quando l'utente trascina l'origine del trascinamento lontano da una possibile area di rilascio tra due oggetti. Questa animazione mostra all'utente che l'origine del trascinamento non è più nella posizione corretta per essere rilasciata tra quei due oggetti. L'animazione di trascinamento tra due elementi in uscita viene usata solo dopo che è stata usata un'animazione di trascinamento tra due elementi in entrata.
L'azione dell'animazione di trascinamento tra due elementi in uscita è l'opposto dell'animazione di trascinamento tra due elementi in entrata. La prima riporta infatti gli oggetti interessati nella loro posizione originale.
Per usare la funzionedragBetweenLeave, ti basta sapere quali sono gli oggetti interessati.
Le immagini seguenti mostrano il movimento degli oggetti interessati in risposta all'origine del trascinamento. La prima immagine mostra gli oggetti interessati separati dall'animazione in entrata dell'origine del trascinamento in risposta alla posizione di tale origine.
L'immagine successiva mostra che l'animazione di trascinamento tra due elementi in uscita è stata chiamata per riportare gli oggetti interessati nella loro posizione originale.
Altre risorse
Per esempi di codice che illustrano l'uso delle funzioni di animazione delle azioni di trascinamento, 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 delle azioni di trascinamento.
Argomenti correlati
Animazione dell'interfaccia utente
dragSourceStart