Esempi di MotionLayout

Questo documento contiene esempi di come utilizzare MotionLayout. Ogni esempio include un video che mostra il movimento, insieme al codice corrispondente per la scena e il layout.

Movimento di base

Questo esempio contiene un'unica visualizzazione che puoi toccare e trascinare per spostare in orizzontale.

Figura 1. Trascinamento di una visualizzazione.

Attributo personalizzato - backgroundColor

Questo esempio è simile all'esempio Movimento di base. Oltre al movimento di base, il colore di sfondo della vista cambia man mano che si sposta.

Figura 2. Trascina una visualizzazione mentre il colore di sfondo cambia.

ImageFilterView - Transizione immagine

Questo esempio mostra come eseguire la transizione del valore di saturazione di un elemento ImageFilterView.

Figura 3. Trascinando un'immagine mentre la sua saturazione cambia.

Posizione fotogramma chiave

Questo esempio utilizza <KeyFrameSet> per modificare la posizione Y della vista durante il movimento.

Figura 4. Trascinare una vista e modificarne la posizione Y.

Interpolazione dei fotogrammi chiave

Questo esempio si basa sull'esempio di Posizione frame chiave, aggiungendo rotazione e scalabilità alla transizione della vista.

Figura 5. Trascinare una vista e modificarne la posizione Y, la rotazione e la scala.

Ciclo fotogrammi chiave

In questo esempio vengono aggiunti elementi <KeyCycle> per aggiungere un movimento simile a un'onda alla visualizzazione.

Figura 6. Trascina una visualizzazione con un movimento simile a onde mentre ne modifichi il colore.

Layout coordinatore (1/2)

Questo esempio aggiunge un MotionLayout a un AppBarLayout esistente per aggiungere movimento alla barra delle app. Questo esempio è descritto ulteriormente nella sezione Introduzione a MotionLayout (parte III).

Figura 7. Scorrimento dei contenuti durante l'espansione della barra dell'app.

Layout coordinatore (2/2)

Questo esempio aggiunge un MotionLayout a un AppBarLayout esistente per aggiungere movimento alla barra delle app.

Figura 8. Scorrere i contenuti mentre la barra dell'app si espande e il testo si anima dentro e fuori la barra dell'app.

Layout riquadro a scomparsa (1/2)

Questo esempio mostra come aggiungere movimento a un DrawerLayout. Questo esempio è descritto ulteriormente in Introduzione a MotionLayout (parte III).

Figura 9. Espansione di "DrawerLayout".

Layout riquadro a scomparsa (2/2)

Questo esempio mostra come aggiungere movimento a un DrawerLayout.

Figura 10. Espansione di "DrawerLayout" con testo animato del menu.

Riquadro laterale

Questo esempio mostra come visualizzare un riquadro laterale quando trascini l'area dei contenuti principali a destra.

Figura 11. Visualizzazione di un riquadro laterale trascinando i contenuti principali.

Parallasse

Questo esempio mostra uno sfondo con parallasse, in cui diversi livelli di sfondo si spostano a velocità diverse.

Figura 12. Effetto parallasse nell'immagine intestazione.

Visualizza pager

Questo esempio mostra come aggiungere movimento quando scorri tra le schede ViewPager. Questo esempio è descritto ulteriormente nella sezione Introduzione a MotionLayout (parte III).

Figura 13. Effetto parallasse nell'immagine dell'intestazione mentre fai scorrere un oggetto "ViewPager".

ViewPager - Lottie

Questo esempio mostra come aggiungere movimento quando scorri tra le schede ViewPager.

Figura 14. Un'immagine che mostra un effetto Lottie nell'immagine intestazione mentre scorri su un elemento "ViewPager".

Moto complesso (1/3)

Questo esempio combina elementi degli esempi precedenti per dimostrare un movimento complesso.

Figura 15. Combina gli effetti per creare movimenti complessi.

Moto complesso (2/3)

Questo esempio combina elementi degli esempi precedenti per dimostrare un movimento complesso.

Figura 16. Combina gli effetti per creare movimenti complessi.

Moto complesso (3/3)

Questo esempio combina elementi degli esempi precedenti per dimostrare un movimento complesso.

Figura 17. Combina gli effetti per creare movimenti complessi.

Transizione frammento (1/2)

Questo esempio mostra come utilizzare MotionLayout per eseguire la transizione tra i frammenti.

Figura 18. Transizione dei frammenti.

Transizione frammento (2/2)

Questo esempio mostra come utilizzare MotionLayout per eseguire la transizione tra i frammenti.

Figura 19. Transizione dei frammenti.

Movimento simile a YouTube

Questo esempio mostra la transizione da una visualizzazione compatta a un'esperienza a schermo intero con contenuti aggiuntivi.

Figura 20. La transizione dei frammenti è simile a quella di YouTube.

Trigger chiave

Questo esempio mostra come mostrare e nascondere un pulsante di azione mobile quando la transizione supera una soglia di avanzamento.

Figura 21. Mostra e nascondi un pulsante di azione mobile.

Più stati

Questo esempio mostra come utilizzare lo stato per determinare quale movimento applicare.

Figura 22. Movimenti diversi in base allo stato.