Personalizza la transizione degli elementi condivisi

Per personalizzare l'esecuzione dell'animazione di transizione degli elementi condivisi, esistono alcuni parametri che possono essere utilizzati per modificare la transizione degli elementi condivisi.

Specifiche di animazione

Per modificare le specifiche di animazione utilizzate per il movimento delle dimensioni e della posizione, puoi specificare un parametro boundsTransform diverso su Modifier.sharedElement(). In questo modo vengono fornite la posizione iniziale Rect e la posizione target Rect.

Ad esempio, per fare in modo che il testo nell'esempio precedente si muova con un movimento parabolico, specifica il parametro boundsTransform per utilizzare una specifica keyframes:

val textBoundsTransform = BoundsTransform { initialBounds, targetBounds ->
    keyframes {
        durationMillis = boundsAnimationDurationMillis
        initialBounds at 0 using ArcMode.ArcBelow using FastOutSlowInEasing
        targetBounds at boundsAnimationDurationMillis
    }
}
Text(
    "Cupcake", fontSize = 28.sp,
    modifier = Modifier.sharedBounds(
        rememberSharedContentState(key = "title"),
        animatedVisibilityScope = animatedVisibilityScope,
        boundsTransform = textBoundsTransform
    )
)
CustomizeSharedElementsSnippets.kt

Puoi utilizzare qualsiasi AnimationSpec. Questo esempio utilizza una specifica keyframes.

Modalità di ridimensionamento

Quando esegui l'animazione tra due limiti condivisi, puoi impostare il parametro resizeMode su RemeasureToBounds o ScaleToBounds. Questo parametro determina come avviene la transizione dell'elemento condiviso tra i due stati. ScaleToBounds misura prima il layout secondario con i vincoli di look-ahead (o target). Poi, il layout stabile del componente secondario viene ridimensionato in modo da adattarsi ai limiti condivisi. ScaleToBounds può essere considerata una "scala grafica" tra gli stati.

Mentre RemeasureToBounds rimisura e riorganizza il layout secondario di sharedBounds con vincoli fissi animati in base alle dimensioni target. La misurazione viene riavviata dalla variazione delle dimensioni dei limiti, che potrebbe essere potenzialmente ogni frame.

Per i composabili Text, è consigliato ScaleToBounds in quanto evita il riadattamento e il riadattamento del testo su righe diverse. Per i limiti con proporzioni diverse e se vuoi una continuità fluida tra i due elementi condivisi, è consigliato RemeasureToBounds.

La differenza tra le due modalità di ridimensionamento è visibile negli esempi che seguono:

Vai al layout finale

Per impostazione predefinita, durante la transizione tra due layout, le dimensioni del layout vengono animate tra lo stato iniziale e quello finale. Questo potrebbe essere un comportamento indesiderato quando si animano contenuti come il testo.

L'esempio seguente mostra il testo descrittivo "Lorem Ipsum" visualizzato sullo schermo in due modi diversi. Nel primo esempio il testo viene adattato man mano che viene inserito e le dimensioni del contenitore aumentano, mentre nel secondo esempio il testo non viene adattato man mano che aumenta. L'aggiunta di Modifier.skipToLookaheadSize() impedisce il riflusso man mano che cresce.

Clip e overlay

Un concetto importante quando si creano elementi condivisi in Compose è che, per poterli condividere tra diversi composabili, il rendering del composable viene elevato in un overlay di livello quando viene avviata la transizione alla sua corrispondenza nella destinazione. Il risultato è che uscirà dai limiti del livello principale e dalle relative trasformazioni (ad esempio alpha e scala).

Verrà visualizzato sopra altri elementi dell'interfaccia utente non condivisi. Al termine della transizione, l'elemento verrà spostato dall'overlay al proprio DrawScope.

Per ritagliare un elemento condiviso in una forma, utilizza la funzione Modifier.clip() standard. Inseriscila dopo sharedElement():

Image(
    painter = painterResource(id = R.drawable.cupcake),
    contentDescription = "Cupcake",
    modifier = Modifier
        .size(100.dp)
        .sharedElement(
            rememberSharedContentState(key = "image"),
            animatedVisibilityScope = this@AnimatedContent
        )
        .clip(RoundedCornerShape(16.dp)),
    contentScale = ContentScale.Crop
)
CustomizeSharedElementsSnippets.kt

Se devi assicurarti che un elemento condiviso non venga mai visualizzato al di fuori di un contenitore principale, puoi impostare clipInOverlayDuringTransition su sharedElement(). Per impostazione predefinita, per gli intervalli condivisi nidificati, clipInOverlayDuringTransition utilizza il percorso del clip dall'elemento sharedBounds() principale.

Per mantenere sempre in primo piano elementi dell'interfaccia utente specifici, come una barra in basso o un pulsante di azione flottante, durante la transizione di un elemento condiviso, utilizza Modifier.renderInSharedTransitionScopeOverlay(). Per impostazione predefinita, questo modificatore mantiene i contenuti nell'overlay durante il periodo di attivazione della transizione condivisa.

Ad esempio, in Jetsnack, BottomAppBar deve essere posizionato sopra l'elemento condiviso finché la schermata non è visibile. L'aggiunta del modificatore al composable lo mantiene in primo piano.

A volte potresti voler animare il composable non condiviso e rimanere sopra gli altri composable prima della transizione. In questi casi, utilizza renderInSharedTransitionScopeOverlay().animateEnterExit() per animare il composabile in uscita durante l'esecuzione della transizione dell'elemento condiviso:

JetsnackBottomBar(
    modifier = Modifier
        .renderInSharedTransitionScopeOverlay(
            zIndexInOverlay = 1f,
        )
        .animateEnterExit(
            enter = fadeIn() + slideInVertically {
                it
            },
            exit = fadeOut() + slideOutVertically {
                it
            }
        )
)
CustomizeSharedElementsSnippets.kt

Nei rari casi in cui non vuoi che l'elemento condiviso venga visualizzato in un overlay, puoi impostare renderInOverlayDuringTransition su sharedElement() su false.

Inviare una notifica ai layout correlati delle modifiche alle dimensioni degli elementi condivisi

Per impostazione predefinita, sharedBounds() e sharedElement() non informano il contenitore principale di eventuali modifiche alle dimensioni durante le transizioni del layout.

Per propagare le modifiche delle dimensioni al contenitore principale durante la transizione, modifica il parametro placeHolderSize in PlaceHolderSize.animatedSize. In questo modo, l'elemento aumenta o diminuisce di dimensioni. Tutti gli altri elementi del layout reagiscono alla modifica.