Animazione: Jump-through

Di recente una richiesta di aiuto ha attirato la mia attenzione; chiedendo come implementare un'animazione di "localizzazione" su Android:

- http://drbl.in/2470871 di @lekarew

Ho subito pensato che questo fosse il candidato principale per un AnimatedVectorDrawable (di seguito AVD), quindi ho deciso di dimostrare un modo per implementarlo. Alcune persone mi hanno chiesto come ho fatto ... quindi ecco un guasto.

Per un'introduzione alle capacità di AnimatedVectorDrawable, consiglio vivamente questo post di Alex Lockwood

Contorno

Guardando la composizione, questo è composto da tre tipi di animazione:

  1. Il perno si sposta e cambia forma per farlo saltare; AVD lo supporta animando la forma effettiva di un percorso, noto come morphing del percorso.
  2. I punti si spostano verso sinistra, questa sarà una semplice traduzione.
  3. I punti si dissolvono in / out come l'entrata / uscita della scena.

tracciato

Sfortunatamente non avevo accesso all'opera d'arte di origine, ma solo alla GIF su dribbble ... speriamo che non sia necessario farlo nelle animazioni!

Ho aperto la GIF in Photoshop che offre una vista della sequenza temporale dei fotogrammi dell'animazione. Ho attraversato questo e ho salvato copie di cornici in cui il perno era agli estremi del movimento, cioè sul punto di cambiare direzione o cambiare forma in modo significativo. Queste "pose" saranno le forme tra cui il perno si trasformerà. In totale c'erano 5 pose principali.

Ho incollato ciascuno di questi in Sketch (il mio strumento di disegno vettoriale preferito) e ho tracciato il perno in ciascuna delle pose.

Il 5 modella il perno

Alcuni strumenti possono tracciare automaticamente immagini raster e produrre percorsi vettoriali per te. Sapere che volevo eseguire comunque un'animazione di metamorfosi del percorso, significava che avevo bisogno di "percorsi compatibili"; cioè ogni percorso deve avere lo stesso numero e tipo di punti. Pertanto, disegnando il perno con una forma semplice (composta da 8 punti, ciascuno con 2 punti di controllo) e modificandolo manualmente per formare ogni posa, potrei essere sicuro di poter successivamente animare tra le forme.

Ho quindi esportato ogni fotogramma come singoli file SVG. Ora SVG è una vasta specifica e VectorDrawable di Android ne supporta solo un sottoinsieme. È anche utile ricordare che devono essere analizzati e resi su un dispositivo mobile vincolato; quindi cerco sempre di semplificare i miei SVG. Per fare ciò, li ho passati attraverso SVGO (usando SVGOMG di Jake Archibald) impostando la precisione su 1 decimale.

Jump Around

Ora che abbiamo i percorsi di ogni posa del perno, è tempo di farli muovere! Per fare ciò mi sono rivolto al fantastico Icon Animator di Roman Nurik. Questo è un IDE basato sul web per la creazione di AnimatedVectorDrawables. Ho lasciato cadere il primo SVG e quindi ho fatto clic sull'icona del cronometro accanto al livello pin e ho aggiunto una nuova animazione pathData. Questo produce un pannello ispettore in cui ho potuto inserire il percorso del perno dal fotogramma successivo in toValue. L'ho ripetuto altre 4 volte per realizzare la nostra animazione (dove l'ultimo passaggio si anima dalla posa finale, di nuovo a quella iniziale).

Per i valori di temporizzazione ho fatto riferimento alla GIF originale in cui ogni fotogramma durava 30 ms, quindi se ci fossero 4 fotogrammi tra le pose, utilizzare una durata di 120 ms ecc. Ho scelto di utilizzare solo interpolatori di materiali standard, ma in realtà questo potrebbe trarre vantaggio da una regolazione fine .

ostacoli

Per i punti che si muovono possiamo eseguire una semplice traduzione. Guardando la composizione sorgente, ogni terzo punto è più grande e rosso; come implementarlo in un bel ciclo? Mentre potresti implementarlo con soli 3 punti e animarli singolarmente; Ho deciso di includere 5 punti in cui i punti più a destra si estendono oltre la finestra:

In questo modo possiamo animare l'intero gruppo di punti verso sinistra tutti insieme, una volta che il quarto punto raggiunge la posizione iniziale del primo punto, ripristiniamo istantaneamente la traduzione, riportandola al punto di partenza. Neat!

Andando e venendo

Vogliamo che i punti sbiadiscano mentre entrano e svaniscono mentre escono, questa è una semplice animazione di fillAlpha, lascio a te vedere come sono riusciti!

Loop the Loop

Ora per trasformarlo in un'animazione a ciclo completo ci sono alcune cose da considerare. L'animazione del punto ha una durata tripla. Ho pensato di dividerli in 2 AVD separati e stratificarli ... ma ho deciso che ripetere il salto 3 volte era più semplice!

Ho premuto il magico pulsante di esportazione in Icon Animator che mi ha dato la definizione di AVD, pronto per essere inserito nel mio progetto. Lo strumento tuttavia è ancora in "anteprima", quindi ho apportato alcune modifiche per ripulire l'output, in particolare rimuovendo eventuali attributi ridondanti e prendendo in considerazione tutti i valori ripetuti (come i diversi percorsi dei pin e alcuni colori) in un file di risorse per creare più mantenibili.

Realizzare l'intero ciclo AVD è stato più complicato di quanto avessi immaginato. Apparentemente repeatMode sui set di animazioni viene ignorato (i bug sono stati archiviati). Ho lavorato intorno ascoltando la fine dell'animazione e ricominciando. Purtroppo i callback sono stati aggiunti solo in API23 ma è possibile ottenere lo stesso effetto tramite PostDelayed ecc.

Animati

Puoi trovare un riassunto del codice qui o controllare la composizione completa in Icon Animator e giocare con esso.

Spero che questo post ti abbia mostrato che AnimatedVectorDrawable è molto potente e che puoi creare ricche animazioni in modo relativamente semplice. Spero anche che la condivisione del mio flusso di lavoro mi aiuti a demistificare il processo e magari ti ispiri a crearne uno tuo. Fammi sapere se lo fai!