Esiste uno schema di progettazione per gestire azioni e animazioni sovrapposte all'interfaccia utente? Alcuni esempi:
- Diciamo che ho una riga della tabella interattiva che si espande per rivelare un controllo extra quando l'utente fa clic su di esso e, viceversa, se fanno nuovamente clic su di esso. Se l'utente fa clic sulla riga mentre è in corso l'animazione di espansione, voglio che smetta di animare e riduca le dimensioni originali dal punto in cui è stata interrotta.
- Ho un set di righe dell'esempio 1 all'interno di un gruppo. Quando l'ultima riga viene eliminata, voglio che il gruppo si riduca e quindi si rimuova da solo in un callback. Tuttavia, mentre il gruppo si sta riducendo, l'utente potrebbe aggiungere un'altra riga. Se ciò accade, voglio che il gruppo smetta di ridursi, espandi alla dimensione corretta e aggiungi la riga.
- Cosa succede se ho una funzione di ordinamento per l'interfaccia utente nell'esempio 2? Se l'utente fa clic sul pulsante di ordinamento, le righe vengono mescolate e animate nelle loro nuove posizioni. Tuttavia, voglio comunque che l'utente possa fare clic sulle righe della tabella, eliminare le righe e fare tutto il resto consentito dalla mia interfaccia utente. L'interfaccia utente dovrebbe comportarsi in modo ragionevole, con l'animazione shuffle che ha la precedenza.
È possibile eseguire l'avanzamento rapido di tutte le animazioni per un elemento dell'interfaccia utente quando viene eseguita una nuova azione e / o bloccare l'input dell'utente in tutti gli elementi dell'interfaccia utente di animazione. Ma mi sembra inelegante. Come utente, ammiro molto le interfacce utente che non balbettano o mi impediscono di fare ciò che voglio - le interfacce utente, in altre parole, che si comportano come oggetti reali - e mi piacerebbe fare lo stesso nelle mie applicazioni.
Mi sembra che avresti bisogno di avere vincoli per ogni azione / animazione per rendere questo un sistema robusto. Ad esempio, potrebbe essere necessario assicurarsi che eventuali modifiche ai dati / stato / modello avvengano solo nella richiamata all'animazione, non prima. Nell'esempio 2, non è possibile eliminare il gruppo nel modello non appena l'utente fa clic sul pulsante per eliminare l'ultima riga; deve essere fatto alla fine dell'animazione e solo alla fine dell'animazione. (Altrimenti, se l'utente decide di aggiungere un'altra riga durante l'eliminazione dell'animazione, ripristinare l'eliminazione di gruppo sarebbe molto difficile.) Potrebbe anche essere necessario progettare il sistema di animazione in modo tale che se due animazioni di due azioni diverse si sovrappongono, qualsiasi le proprietà reciprocamente esclusive continuerebbero ad animare come prima. (In altre parole, se l'utente ordina la tabella mentre una riga si espande al clic, l'espansione della larghezza non dovrebbe fermarsi solo perché la riga si sta spostando nella sua nuova posizione.) E per quanto riguarda l'avvio dei valori predefiniti per ogni animazione? Se una riga scompare quando viene eliminata, e quindi un'altra azione annulla implicitamente l'eliminazione, la dissolvenza in uscita dovrebbe interrompersi e animare nuovamente, anche se l'altra azione potrebbe non esserne necessariamente a conoscenza.
C'è anche il problema di livello superiore delle animazioni (modifiche alle proprietà visive) rispetto alle azioni (sequenze di eventi, con potenziali modifiche del modello, che includono animazioni). Nell'esempio 2, "elimina ultima riga" è chiaramente un'azione, poiché il risultato finale è che un gruppo viene rimosso. Tuttavia, nella maggior parte delle librerie UI, devi aggiungere il callback all'animazione, combinando i due. Questo è anche un problema nei giochi. Se ho bisogno di innescare un lancio di granate dopo che l'animazione del mio personaggio è finita, come la rappresento nel mio codice? Come posso posizionare il lancio di granate sulla mia timeline senza mescolare il modello e il codice di visualizzazione, consentendo comunque all'animazione di rallentare e accelerare in base a fattori esterni?
Più ci penso, più mi fa male la testa e più sono convinto che qualcuno lo abbia già pensato molto più attentamente di me. Qualche idea?
(Al momento, sono principalmente interessato a questo per l'interfaccia utente web, ma sono anche interessato a un approccio generale per i miei progetti futuri, non web.)