Design pattern per sovrapposizioni di azioni e animazioni?

3

Esiste uno schema di progettazione per gestire azioni e animazioni sovrapposte all'interfaccia utente? Alcuni esempi:

  1. 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.
  2. 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.
  3. 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.)

    
posta Archagon 05.02.2014 - 06:15
fonte

2 risposte

1

Devi allegare animazioni alle righe della tabella mantenendo intatte le loro capacità di interazione. Un decoratore si adatta qui: gestirà l'animazione, mentre inoltrerà gli eventi di interazione dell'utente all'oggetto decorato. Si noti che l'animazione di per sé non è importante qui, ed è sufficiente che sia un parametro (mero) dell'oggetto decoratore (che ci consenta di riutilizzare la stessa classe decoratore con animazioni arbitrarie). Inoltre, in questo modo è possibile avere contemporaneamente un numero arbitrario di animazioni attive sulla stessa riga, semplicemente annidando i decoratori; il risultato visivo è un'altra storia:)

Se facciamo un passo indietro e cerchiamo l'immagine grande, però, anche dal punto di vista delle animazioni dell'interfaccia utente ci sono solo dettagli -se ben più o meno difficili da gestire, e sicuramente di grande importanza al fine di fornire una buona esperienza utente. Ma non sono al centro. Uno schema generico potrebbe essere come questo:

  1. L'utente chiede al sistema che un'azione venga eseguita, tramite qualsiasi evento di input predefinito.
  2. Il sistema orari il comando dell'utente. L'esecuzione immediata non dovrebbe essere assunta qui, a meno che non sia richiesto esplicitamente.
  3. Il sistema esegue il comando dell'utente, e questo richiede una quantità arbitraria di tempo e attività (tra cui le animazioni possono essere contate) da eseguire. Qui, il sistema può (iniziare a) eseguire comandi in modo sequenziale o simultaneo, a seconda dello schedulatore e delle dipendenze tra le azioni richieste.
risposta data 09.02.2014 - 19:45
fonte
1

Design Patterns

Poiché Rucamzu menziona un motivo decoratore sembra adattarsi. Un pattern visitatore sembra che potrebbe anche adattarsi poichè l'oggetto che esegue l'animazione visita l'elemento DOM più volte nel corso di un'animazione per aggiornare proprietà / stili di elementi DOM per creare il cambiamento visivo.

Post che spiega le differenze tra i modelli.

Implementazione all'interno di un'interfaccia utente Web (supponendo JS / CSS / HTML)

Esistono diverse librerie che dispongono di accodamento di operazioni asincrone concorrenti / successive. Quello che in genere cercare (in qualunque client di destinazione si sta programmando per) dovrebbe includere:

  1. fornire funzionalità di concatenamento (utile per spostare il braccio del giocatore e poi lanciare la granata)
  2. eventi di fuoco / callback su un livello molto granulare e anche su un livello di gruppo (per sapere quando finisce il braccio e quando l'animazione con granata termina e quando la granata atterra in modo da poter eseguire i calcoli del danno e poi)
  3. invertire le loro singole azioni o azioni di gruppo (utili per le animazioni di apertura / chiusura)

Ci sono un paio di librerie che potrei prendere in considerazione.

  1. Greensock TweenMax / TimelineMax
    Greensock ha uno dei pacchetti di animazione più robusti là fuori. Ha opzioni per essere leggero e accoppiato indietro o completo con i suoi numerosi plugin (e da qualche parte nel mezzo). TweenMax consente singole animazioni e TimelineMax consente le sequenze / sequenze più avanzate.
  2. CreateJS
    Se c'è un'animazione pazzesca, potrebbe essere meglio usare la tela. Esiste una libreria con funzionalità di tweening 2d che può essere supportata da WebGL se è presente un browser. Supporta anche fogli di sprite per animazioni più approfondite.
  3. Implementazione come jQuery oggetti / promesse differiti Gli oggetti posticipati possono richiedere un tempo arbitrario per avere successo. La maggior parte delle richieste AJAX in jQuery implementano gli oggetti posticipati per il successo e il fallimento. Anche queste azioni possono essere immediate. Questo aiuta a concatenare più animazioni e chiamate di funzione e operazioni asincrone. Non credo che i Deferred possano invertire le loro operazioni né possono essere rieseguiti, nuove istanze devono essere create, ma possono essere estremamente potenti.

La selezione sarà probabilmente basata sull'intensità delle animazioni e sui browser e dispositivi che devono essere supportati.

Raccomandazione per l'implementazione dell'interfaccia utente Web

Anche se non stai probabilmente costruendo un progetto flash, sono stati conosciuti per l'animazione complicata ai loro tempi. I primi due elementi sopra hanno radici dal mondo delle cose in flash, quindi sono in circolazione da più di qualche anno. Ho implementato quasi tutti i progetti flash per un periodo di 6 anni con la libreria di Greensock. La sua documentazione è solida e ci sono anche molti esempi: Greensock JS per iniziare .

    
risposta data 10.02.2014 - 07:02
fonte