Esempi di MotionLayout

Prova la funzionalità Scrivi
Jetpack Compose è il toolkit per l'interfaccia utente consigliato per Android. Scopri come utilizzare le animazioni in Compose.
Animazioni in Componi →

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

Movimento di base

Questo esempio contiene una singola visualizzazione che puoi toccare e trascinare per muoverti horizontalmente.

Figura 1. Trascinamento di una visualizzazione.

Attributo personalizzato: backgroundColor

Questo esempio è simile a quello di Movimento di base. Oltre al movimento di base, il colore di sfondo della visualizzazione cambia man mano che si sposta.

Figura 2. Trascinamento di una visualizzazione mentre il colore dello sfondo cambia.

ImageFilterView - transizione di immagini

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

Figura 3. Trascinamento di un'immagine mentre la sua saturazione cambia.

Posizione del fotogramma chiave

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

Figura 4. Trascinando una visualizzazione e modificandone la posizione Y.

Interpolazione dei fotogrammi chiave

Questo esempio si basa sull'esempio Posizione fotogramma chiave, aggiungendo la rotazione e la scalatura alla transizione di visualizzazione.

Figura 5. Trascinando una visualizzazione e modificandone la posizione Y, la rotazione e la scala.

Ciclo di fotogrammi chiave

Questo esempio aggiunge elementi <KeyCycle> per creare un movimento ondulato nella vista.

Figura 6. Trascinare una visualizzazione con un movimento simile a un'onda mentre ne modifichi il colore.

CoordinatorLayout (1/2)

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

Figura 7. Scorri i contenuti mentre la barra dell'app si espande.

CoordinatorLayout (2/2)

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

Figura 8. Scorri i contenuti mentre la barra dell'app si espande e il testo viene animato all'interno e all'esterno della barra dell'app.

DrawerLayout (1/2)

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

Figura 9. Espansione di "DrawerLayout".

DrawerLayout (2/2)

Questo esempio mostra come aggiungere il movimento a un DrawerLayout.

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

Riquadro laterale

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

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

Parallasse

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

Figura 12. Effetto parallasse nell'immagine dell'intestazione.

ViewPager

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

Figura 13. Effetto parallasse nell'immagine dell'intestazione durante lo scorrimento di un "ViewPager".

ViewPager - Lottie

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

Figura 14. Un'immagine che mostra un effetto Lottie nell'immagine di intestazione durante lo scorrimento di un "ViewPager".

Movimento complesso (1/3)

Questo esempio combina elementi di esempi precedenti per mostrare movimenti complessi.

Figura 15. Combinazione di effetti per creare movimenti complessi.

Movimento complesso (2/3)

Questo esempio combina elementi di esempi precedenti per mostrare movimenti complessi.

Figura 16. Combinazione di effetti per creare movimenti complessi.

Movimento complesso (3/3)

Questo esempio combina elementi di esempi precedenti per mostrare movimenti complessi.

Figura 17. Combinazione di effetti per creare movimenti complessi.

Transizione di frammenti (1/2)

Questo esempio mostra come utilizzare MotionLayout per passare da un frammento all'altro.

Figura 18. Transizione del frammento.

Transizione del frammento (2/2)

Questo esempio mostra come utilizzare MotionLayout per passare da un frammento all'altro.

Figura 19. Transizione del frammento.

Movimento simile a YouTube

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

Figura 20. Transizione dei frammenti simile a YouTube.

KeyTrigger

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.