Esempi di MotionLayout

Prova Compose
Jetpack Compose è il toolkit per la UI consigliato per Android. Scopri come utilizzare le animazioni in Compose.
Animazioni in Compose →

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

Movimento di base

Questo esempio contiene una singola visualizzazione che puoi toccare e trascinare per spostarla orizzontalmente.

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 visualizzazione cambia man mano che la visualizzazione si sposta.

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

ImageFilterView - image transition

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. Trascinamento di una visualizzazione e modifica della relativa posizione Y.

Interpolazione dei fotogrammi chiave

Questo esempio si basa sull'esempio Posizione del fotogramma chiave, aggiungendo la rotazione e il ridimensionamento alla transizione della visualizzazione.

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

Ciclo dei fotogrammi chiave

Questo esempio aggiunge elementi <KeyCycle> per aggiungere un movimento ondulatorio alla visualizzazione.

Figura 6. Trascinamento di una visualizzazione con un movimento ondulatorio durante la modifica del 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. Scorrere 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. Scorrimento dei contenuti mentre la barra dell'app si espande e il testo entra e esce dalla barra dell'app.

DrawerLayout (1/2)

Questo esempio mostra come aggiungere movimento a un DrawerLayout. Questo esempio è descritto più nel dettaglio in Introduzione a MotionLayout (parte III).

Figura 9. Espansione di `DrawerLayout`.

DrawerLayout (2/2)

Questo esempio mostra come aggiungere movimento a un DrawerLayout.

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

Riquadro laterale

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

Figura 11. Mostrare un riquadro laterale trascinando i contenuti principali.

Parallasse

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

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

ViewPager

Questo esempio mostra come aggiungere movimento quando scorri tra le schede ViewPager. Questo esempio è descritto ulteriormente in Introduction to MotionLayout (part III).

Figura 13. Effetto parallasse nell'immagine dell'intestazione durante lo scorrimento di un `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 di intestazione mentre scorri un `ViewPager`.

Movimento complesso (1/3)

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

Figura 15. Combinazione di effetti per creare movimenti complessi.

Movimento complesso (2/3)

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

Figura 16. Combinazione di effetti per creare movimenti complessi.

Movimento complesso (3/3)

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

Figura 17. Combinazione di effetti per creare movimenti complessi.

Transizione tra i 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 Floating Action Button (FAB) 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. Diverse mozioni in base allo stato.