Guida rapida alle animazioni in Compose

Compose ha molti meccanismi di animazione integrati e può essere faticoso saprai quale scegliere. Di seguito è riportato un elenco di casi d'uso comuni relativi alle animazioni. Per informazioni più dettagliate sull'insieme completo di diverse opzioni API a tua disposizione, consulta la documentazione completa di Compose Animation.

Animare le proprietà composable comuni

Compose offre pratiche API che consentono di risolvere molti dei problemi e i casi d'uso delle animazioni. Questa sezione mostra come animare le proprietà comuni di un composable.

Animazione di comparsa/sparizione

Figura 1. Animazione dell'apparizione e della scomparsa di un elemento in una colonna

Utilizza AnimatedVisibility per nascondere o mostrare un componibile. I bambini all'interno di AnimatedVisibility possono utilizzare Modifier.animateEnterExit() per la propria transizione di entrata o di uscita.

var visible by remember {
    mutableStateOf(true)
}
// Animated visibility will eventually remove the item from the composition once the animation has finished.
AnimatedVisibility(visible) {
    // your composable here
    // ...
}
AnimationQuickGuide.kt

I parametri di entrata e uscita di AnimatedVisibility consentono di configurare il modo in cui un componibile si comporta quando appare e scompare. Leggi tutto documentazione per ulteriori informazioni.

Un'altra opzione per animare la visibilità di un componibile consiste nell'animare il alpha nel tempo utilizzando animateFloatAsState:

var visible by remember {
    mutableStateOf(true)
}
val animatedAlpha by animateFloatAsState(
    targetValue = if (visible) 1.0f else 0f,
    label = "alpha"
)
Box(
    modifier = Modifier
        .size(200.dp)
        .graphicsLayer {
            alpha = animatedAlpha
        }
        .clip(RoundedCornerShape(8.dp))
        .background(colorGreen)
        .align(Alignment.TopCenter)
) {
}
AnimationQuickGuide.kt

Tuttavia, la modifica dell'alpha comporta il fatto che il composable rimane nella composizione e continua a occupare lo spazio in cui è disposto. Questo potrebbe far sì che gli screen reader e altri meccanismi di accessibilità prendano in considerazione l'elemento sullo schermo. D'altra parte, AnimatedVisibility rimuove infine l'elemento dalla composizione.

Figura 2. Animazione dell'alpha di un componibile

Anima colore sfondo

Figura 3. Animazione del colore di sfondo del composable

val animatedColor by animateColorAsState(
    if (animateBackgroundColor) colorGreen else colorBlue,
    label = "color"
)
Column(
    modifier = Modifier.drawBehind {
        drawRect(animatedColor)
    }
) {
    // your composable here
}
AnimationQuickGuide.kt

Questa opzione ha un rendimento migliore rispetto all'utilizzo di Modifier.background(). Modifier.background() è accettabile per un'impostazione di colore one-shot, ma quando animando un colore nel tempo, il risultato potrebbe essere il numero di ricomposizioni necessaria.

Per animare all'infinito il colore di sfondo, consulta la sezione sulla ripetizione di un'animazione .

Animazione delle dimensioni di un componibile

Figura 4. Composable che anima senza interruzioni tra una dimensione piccola e una più grande

Compose ti consente di animare le dimensioni dei composabili in diversi modi. Utilizza animateContentSize() per le animazioni tra le modifiche delle dimensioni composable.

Ad esempio, se hai una casella che contiene del testo che può espandersi da uno a più linee puoi utilizzare Modifier.animateContentSize() per ottenere un'immagine più fluida transizione:

var expanded by remember { mutableStateOf(false) }
Box(
    modifier = Modifier
        .background(colorBlue)
        .animateContentSize()
        .height(if (expanded) 400.dp else 200.dp)
        .fillMaxWidth()
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            expanded = !expanded
        }

) {
}
AnimationQuickGuide.kt

Nota: l'ordine dei modificatori è importante in questo caso. Assicurati di posizionarlo prima di qualsiasi modificatore di dimensione.

Puoi anche utilizzare AnimatedContent, con un SizeTransform per descrivere come devono avvenire le modifiche delle dimensioni.

Anima la posizione del composable

Figura 5. Composable spostato di un offset

Per animare la posizione di un componibile, utilizza Modifier.offset{ } combinato con animateIntOffsetAsState().

var moved by remember { mutableStateOf(false) }
val pxToMove = with(LocalDensity.current) {
    100.dp.toPx().roundToInt()
}
val offset by animateIntOffsetAsState(
    targetValue = if (moved) {
        IntOffset(pxToMove, pxToMove)
    } else {
        IntOffset.Zero
    },
    label = "offset"
)

Box(
    modifier = Modifier
        .offset {
            offset
        }
        .background(colorBlue)
        .size(100.dp)
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            moved = !moved
        }
)
AnimationQuickGuide.kt

Attenzione :questa operazione non cambia la posizione in cui l'elemento principale percepisce il componibile come il posizionamento degli altri elementi, pertanto non influisce sulla posizione degli elementi di pari livello. Ciò può comportare che i fratelli si sovrappongano o si disegnino uno sopra l'altro. L'offset influenza solo posizione dei layout secondari di Modifier.offset{}.

Se vuoi assicurarti che i composabili non vengano disegnati sopra o sotto altri composabili durante l'animazione della posizione o delle dimensioni, utilizza Modifier.layout{ }. Questo propagano le modifiche di dimensione e posizione all'elemento principale, il che a sua volta incide ad altri bambini.

Ad esempio, se stai spostando un Box all'interno di un Column e gli altri elementi figli devono spostarsi quando si sposta il Box, includi le informazioni sull'offset con Modifier.layout{ } come segue:

var toggled by remember {
    mutableStateOf(false)
}
val interactionSource = remember {
    MutableInteractionSource()
}
Column(
    modifier = Modifier
        .padding(16.dp)
        .fillMaxSize()
        .clickable(indication = null, interactionSource = interactionSource) {
            toggled = !toggled
        }
) {
    val offsetTarget = if (toggled) {
        IntOffset(150, 150)
    } else {
        IntOffset.Zero
    }
    val offset = animateIntOffsetAsState(
        targetValue = offsetTarget, label = "offset"
    )
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(colorBlue)
    )
    Box(
        modifier = Modifier
            .layout { measurable, constraints ->
                val offsetValue = if (isLookingAhead) offsetTarget else offset.value
                val placeable = measurable.measure(constraints)
                layout(placeable.width + offsetValue.x, placeable.height + offsetValue.y) {
                    placeable.placeRelative(offsetValue)
                }
            }
            .size(100.dp)
            .background(colorGreen)
    )
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(colorBlue)
    )
}
AnimationQuickGuide.kt

Figura 6. Animazione con Modifier.layout{ }

Animazione della spaziatura interna di un elemento componibile

Figura 7. Composable con animazioni del padding

Per animare il padding di un composable, utilizza animateDpAsState combinato con Modifier.padding():

var toggled by remember {
    mutableStateOf(false)
}
val animatedPadding by animateDpAsState(
    if (toggled) {
        0.dp
    } else {
        20.dp
    },
    label = "padding"
)
Box(
    modifier = Modifier
        .aspectRatio(1f)
        .fillMaxSize()
        .padding(animatedPadding)
        .background(Color(0xff53D9A1))
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            toggled = !toggled
        }
)
AnimationQuickGuide.kt

Animazione dell'elevazione di un componibile

Figura 8. Animazione dell'elevazione del composable al clic

Per animare l'elevazione di un componibile, utilizza animateDpAsState combinato con Modifier.graphicsLayer{ }. Per le variazioni di altitudine una tantum, utilizza Modifier.shadow(). Per animare l'ombra, utilizza Il modificatore Modifier.graphicsLayer{ } è l'opzione più efficiente.

val mutableInteractionSource = remember {
    MutableInteractionSource()
}
val pressed = mutableInteractionSource.collectIsPressedAsState()
val elevation = animateDpAsState(
    targetValue = if (pressed.value) {
        32.dp
    } else {
        8.dp
    },
    label = "elevation"
)
Box(
    modifier = Modifier
        .size(100.dp)
        .align(Alignment.Center)
        .graphicsLayer {
            this.shadowElevation = elevation.value.toPx()
        }
        .clickable(interactionSource = mutableInteractionSource, indication = null) {
        }
        .background(colorGreen)
) {
}
AnimationQuickGuide.kt

In alternativa, utilizza il componibile Card e imposta la proprietà di altitudine su diversi per stato.

Anima la scala, la traduzione o la rotazione del testo

Figura 9. Testo che si anima in modo uniforme tra due dimensioni

Quando animi la scala, la traslazione o la rotazione del testo, imposta il parametro textMotion su TextStyle su TextMotion.Animated. In questo modo, le transizioni tra le animazioni di testo saranno più fluide. Utilizza Modifier.graphicsLayer{ } per tradurre, ruotare o ridimensionare il testo.

val infiniteTransition = rememberInfiniteTransition(label = "infinite transition")
val scale by infiniteTransition.animateFloat(
    initialValue = 1f,
    targetValue = 8f,
    animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse),
    label = "scale"
)
Box(modifier = Modifier.fillMaxSize()) {
    Text(
        text = "Hello",
        modifier = Modifier
            .graphicsLayer {
                scaleX = scale
                scaleY = scale
                transformOrigin = TransformOrigin.Center
            }
            .align(Alignment.Center),
        // Text composable does not take TextMotion as a parameter.
        // Provide it via style argument but make sure that we are copying from current theme
        style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated)
    )
}
AnimationQuickGuide.kt

Anima colore testo

Figura 10. Esempio che mostra l'animazione del colore del testo

Per animare il colore del testo, utilizza la lambda color nel composable BasicText:

val infiniteTransition = rememberInfiniteTransition(label = "infinite transition")
val animatedColor by infiniteTransition.animateColor(
    initialValue = Color(0xFF60DDAD),
    targetValue = Color(0xFF4285F4),
    animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse),
    label = "color"
)

BasicText(
    text = "Hello Compose",
    color = {
        animatedColor
    },
    // ...
)
AnimationQuickGuide.kt

Passare da un tipo di contenuto all'altro

Figura 11. Utilizzo di AnimatedContent per animare le modifiche tra diversi composabili (rallentato)

Utilizza AnimatedContent per eseguire l'animazione tra diversi componibili, se vuoi solo una dissolvenza standard tra i componenti componibili, usa Crossfade.

var state by remember {
    mutableStateOf(UiState.Loading)
}
AnimatedContent(
    state,
    transitionSpec = {
        fadeIn(
            animationSpec = tween(3000)
        ) togetherWith fadeOut(animationSpec = tween(3000))
    },
    modifier = Modifier.clickable(
        interactionSource = remember { MutableInteractionSource() },
        indication = null
    ) {
        state = when (state) {
            UiState.Loading -> UiState.Loaded
            UiState.Loaded -> UiState.Error
            UiState.Error -> UiState.Loading
        }
    },
    label = "Animated Content"
) { targetState ->
    when (targetState) {
        UiState.Loading -> {
            LoadingScreen()
        }
        UiState.Loaded -> {
            LoadedScreen()
        }
        UiState.Error -> {
            ErrorScreen()
        }
    }
}
AnimationQuickGuide.kt

AnimatedContent può essere personalizzato per mostrare molti tipi diversi di transizioni di entrata e di uscita. Per ulteriori informazioni, consulta la documentazione su AnimatedContent o questo post del blog su AnimatedContent.

Animare mentre si passa da una destinazione all'altra

Figura 12. Animazione tra composabili utilizzando navigation-compose

Per animare le transizioni tra gli elementi componibili quando utilizzi i comandi navigation-compose, specifica enterTransition e exitTransition su un componibile. Puoi anche impostare l'animazione predefinita in modo che utilizzata per tutte le destinazioni di primo livello NavHost:

val navController = rememberNavController()
NavHost(
    navController = navController, startDestination = "landing",
    enterTransition = { EnterTransition.None },
    exitTransition = { ExitTransition.None }
) {
    composable("landing") {
        ScreenLanding(
            // ...
        )
    }
    composable(
        "detail/{photoUrl}",
        arguments = listOf(navArgument("photoUrl") { type = NavType.StringType }),
        enterTransition = {
            fadeIn(
                animationSpec = tween(
                    300, easing = LinearEasing
                )
            ) + slideIntoContainer(
                animationSpec = tween(300, easing = EaseIn),
                towards = AnimatedContentTransitionScope.SlideDirection.Start
            )
        },
        exitTransition = {
            fadeOut(
                animationSpec = tween(
                    300, easing = LinearEasing
                )
            ) + slideOutOfContainer(
                animationSpec = tween(300, easing = EaseOut),
                towards = AnimatedContentTransitionScope.SlideDirection.End
            )
        }
    ) { backStackEntry ->
        ScreenDetails(
            // ...
        )
    }
}
AnimationQuickGuide.kt

Esistono molti tipi diversi di transizioni di entrata e uscita che si applicano effetti diversi sui contenuti in entrata e in uscita, vedi le documentazione.

Nota: le transizioni Entrata e Uscita sono disponibili solo dalla navigazione/composizione 2.7.0-alpha01.

Ripetere un'animazione

Figura 13. Colore di sfondo che si anima tra due valori all'infinito

Usa rememberInfiniteTransition con infiniteRepeatable animationSpec per ripetere continuamente l'animazione. Cambia RepeatModes in e specificare come deve andare avanti e indietro.

Utilizza finiteRepeatable per ripetere un numero predefinito di volte.

val infiniteTransition = rememberInfiniteTransition(label = "infinite")
val color by infiniteTransition.animateColor(
    initialValue = Color.Green,
    targetValue = Color.Blue,
    animationSpec = infiniteRepeatable(
        animation = tween(1000, easing = LinearEasing),
        repeatMode = RepeatMode.Reverse
    ),
    label = "color"
)
Column(
    modifier = Modifier.drawBehind {
        drawRect(color)
    }
) {
    // your composable here
}
AnimationQuickGuide.kt

Avviare un'animazione al lancio di un composable

LaunchedEffect viene eseguito quando un composable entra nella composizione. Avvia un'animazione all'avvio di un composable, che puoi utilizzare per gestire la modifica dello stato dell'animazione. Utilizzo di Animatable con il metodo animateTo per avviare l'animazione al momento del lancio:

val alphaAnimation = remember {
    Animatable(0f)
}
LaunchedEffect(Unit) {
    alphaAnimation.animateTo(1f)
}
Box(
    modifier = Modifier.graphicsLayer {
        alpha = alphaAnimation.value
    }
)
AnimationQuickGuide.kt

Attenzione: fai attenzione quando utilizzi LaunchedEffects all'interno di layout lenti. Riavviano quando gli elementi vengono reinseriti nella composizione. Ad esempio, questo può accadere quando scorri l'elenco fuori dallo schermo e poi di nuovo sullo schermo. Al contrario, solleva il tuo stato al di fuori del layout lazy per assicurarti che l'animazione non venga eseguita per ogni scorrimento all'interno e all'esterno della composizione.

Creare animazioni sequenziali

Figura 14. Diagramma che indica l'avanzamento di un'animazione sequenziale, una alla volta.

Utilizza le API di coroutine Animatable per eseguire operazioni sequenziali o simultanee le animazioni. Se chiami animateTo su Animatable una dopo l'altra, ogni animazione attende il termine delle animazioni precedenti prima di procedere. Questo perché si tratta di una funzione di sospensione.

val alphaAnimation = remember { Animatable(0f) }
val yAnimation = remember { Animatable(0f) }

LaunchedEffect("animationKey") {
    alphaAnimation.animateTo(1f)
    yAnimation.animateTo(100f)
    yAnimation.animateTo(500f, animationSpec = tween(100))
}
AnimationQuickGuide.kt

Crea animazioni simultanee

Figura 15. Diagramma che indica l'avanzamento di animazioni simultanee, il tutto contemporaneamente.

Utilizzare le API Coroutine (Animatable#animateTo() o animate) oppure l'API Transition per ottenere animazioni simultanee. Se utilizzi più funzioni di lancio in un contesto di coroutine, le animazioni vengono avviate contemporaneamente:

val alphaAnimation = remember { Animatable(0f) }
val yAnimation = remember { Animatable(0f) }

LaunchedEffect("animationKey") {
    launch {
        alphaAnimation.animateTo(1f)
    }
    launch {
        yAnimation.animateTo(100f)
    }
}
AnimationQuickGuide.kt

Puoi usare l'API updateTransition per utilizzare lo stesso stato per guidare molte animazioni di proprietà diverse contemporaneamente. L'esempio seguente anima due proprietà controllate da una modifica dello stato, rect e borderWidth:

var currentState by remember { mutableStateOf(BoxState.Collapsed) }
val transition = updateTransition(currentState, label = "transition")

val rect by transition.animateRect(label = "rect") { state ->
    when (state) {
        BoxState.Collapsed -> Rect(0f, 0f, 100f, 100f)
        BoxState.Expanded -> Rect(100f, 100f, 300f, 300f)
    }
}
val borderWidth by transition.animateDp(label = "borderWidth") { state ->
    when (state) {
        BoxState.Collapsed -> 1.dp
        BoxState.Expanded -> 0.dp
    }
}
AnimationQuickGuide.kt

Ottimizza le prestazioni delle animazioni

Le animazioni in Compose possono causare problemi di prestazioni. Questo è dovuto alla natura dell'animazione: spostare o modificare rapidamente i pixel sullo schermo, fotogramma per fotogramma per creare l'illusione del movimento.

Considera le diverse fasi di Componi: composizione, layout e disegno. Se la tua animazione modifica la fase di layout, è necessario eseguire il relayout e il ridisegni di tutti i composabili interessati. Se l'animazione avviene nella fase di disegno, per impostazione predefinita ha un rendimento migliore rispetto a un'animazione eseguita nella fase di layout, in quanto ha meno lavoro da svolgere in generale.

Per assicurarti che la tua app faccia il meno possibile durante l'animazione, scegli la versione lambda di un Modifier, se possibile. In questo modo viene saltata la ricompozione ed eseguita l'animazione al di fuori della fase di composizione, altrimenti utilizza Modifier.graphicsLayer{ }, poiché questo modificatore viene eseguito sempre nella fase di disegno. Per ulteriori informazioni, consulta la sezione Rimandare le letture nella documentazione sul rendimento.

Modificare la durata dell'animazione

Per impostazione predefinita, la funzionalità Scrivi utilizza le animazioni primaverili per la maggior parte delle animazioni. Springs o animazioni basate sulla fisica, risultano più naturali. Sono inoltre interrompibili perché prendono in considerazione la velocità attuale dell'oggetto, invece che un tempo fisso. Se vuoi eseguire l'override del valore predefinito, tutte le API di animazione mostrate sopra hanno la possibilità di impostare un animationSpec per personalizzare il funzionamento di un'animazione, ad esempio per eseguirla per una determinata durata o renderla più elastica.

Di seguito è riportato un riepilogo delle diverse opzioni animationSpec:

• spring: animazione basata sulla fisica, predefinita per tutte le animazioni. Tu è possibile modificare la rigidità o il rapporto di smorzamento per ottenere una diversa animazione aspetto e design.
• tween (abbreviazione di tra): animazione basata sulla durata, si anima tra due valori con una funzione Easing.
• keyframes: specifica per specificare i valori in determinati punti chiave in una l'animazione.
• repeatable: specifica basata sulla durata che viene eseguita un determinato numero di volte, specificato da RepeatMode.
• infiniteRepeatable: specifica basata sulla durata eseguita all'infinito.
• snap: passa immediatamente al valore finale senza alcuna animazione.

Figura 16. Nessun set di specifiche e set di specifiche di primavera personalizzato

Leggi la documentazione completa per saperne di più su animationSpecs.

Risorse aggiuntive

Per altri esempi di animazioni divertenti in Compose, dai un'occhiata a quanto segue:

• 5 animazioni rapide in Scrittura
• Spostare le meduse in Compose
• Personalizzare AnimatedContent in Scrivi
• Introduzione alle funzioni di transizione in Compose