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 a forma di arco, 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 figlio viene ridimensionato in modo da adattarsi ai limiti condivisi. ScaleToBounds può essere considerata una "scala grafica" tra gli stati.

Al contrario, 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 riordinamento e il rifacimento del testo su righe diverse. RemeasureToBounds è consigliato per i limiti con proporzioni diverse e se vuoi una continuità fluida tra i due elementi condivisi.

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 riorganizzato man mano che viene inserito e le dimensioni del contenitore aumentano. Nel secondo esempio, il testo non si rigenera man mano che aumenta. L'aggiunta di Modifier.skipToLookaheadSize() impedisce il riflusso con l'aumento delle dimensioni.

Clip e overlay

Affinché gli elementi condivisi possano essere condivisi tra composabili diversi, 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é lo schermo non è visibile. L'aggiunta del modificatore al composable lo mantiene in primo piano.

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.