Animación simple con Jetpack Compose

1. Antes de comenzar

En este codelab, aprenderás a agregar una animación simple a tu app para Android. Las animaciones pueden hacer que tu app sea más interactiva, interesante y fácil de interpretar para los usuarios. Si animas las actualizaciones individuales en una pantalla llena de información, el usuario podrá ver los cambios.

Hay muchos tipos de animaciones que se pueden usar en una interfaz de usuario de la app. Los elementos pueden atenuarse cuando aparecen y desaparecen, pueden entrar o salir de la pantalla, o pueden transformarse de maneras interesantes. Esto permite que la IU de la app sea expresiva y fácil de usar.

Las animaciones también pueden agregar un estilo refinado a tu app, lo que le da un aspecto elegante, y también ayuda al usuario:

Requisitos previos

• Conocimientos sobre Kotlin, incluidas funciones, lambdas y elementos sin estado componibles
• Conocimientos básicos de compilación de diseños en Jetpack Compose
• Conocimientos básicos sobre cómo crear listas en Jetpack Compose
• Conocimientos básicos de Material Design

Qué aprenderás

• Cómo compilar una animación de resorte simple con Jetpack Compose

Qué compilarás

• Compilarás la app de Woof a partir del codelab sobre Temas de Material con Jetpack Compose y agregarás una animación simple para reconocer la acción del usuario.

Requisitos

• La versión estable más reciente de Android Studio
• Conexión a Internet para descargar el código de partida

2. Descripción general de la app

En el codelab sobre Temas de Material con Jetpack Compose, creaste una app de Woof con Material Design, que muestra una lista de perros e información acerca de ellos.

En este codelab, agregarás animación a la app de Woof. Agregarás información de un pasatiempo, que se mostrará cuando expandas el elemento de la lista. También, agregarás una animación de resorte para animar el elemento de la lista que se expande:

Obtén el código de partida

Para comenzar, descarga el código de partida:

Descargar ZIP

Como alternativa, puedes clonar el repositorio de GitHub para el código:

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-woof.git
$ cd basic-android-kotlin-compose-training-woof
$ git checkout material

Nota: El código de partida se encuentra en la rama material del repositorio descargado.

Puedes explorar el código en el repositorio de GitHub de Woof app.

3. Ícono de agregar más

En esta sección, agregarás los íconos Expandir más y Expandir menos a tu app.

Íconos

Los íconos son símbolos que ayudan a los usuarios a comprender la interfaz de usuario comunicando de forma visual la función prevista. Suelen inspirarse en los objetos del mundo físico que se espera que haya experimentado un usuario. Por lo general, el diseño del ícono reduce el nivel de detalle al mínimo necesario para que le resulte familiar al usuario. Por ejemplo, un lápiz en el mundo físico se usa para escribir, de manera que el equivalente de ícono generalmente indica crear o editar.

Foto de Angelina Litvin en Unsplash

Material Design proporciona una serie de íconos organizados en categorías comunes para la mayoría de tus necesidades.

Cómo agregar una dependencia de Gradle

Agrega la dependencia de la biblioteca material-icons-extended a tu proyecto. Usarás los íconos Icons.Filled.ExpandLess y Icons.Filled.ExpandMore de esta biblioteca.

Nota sobre la dependencia de Gradle: Para agregar una dependencia a tu proyecto, especifica una configuración de dependencias, como la implementación, en el bloque dependencies del archivo build.gradle.kts de tu módulo. Cuando compilas tu app, el sistema de compilación crea el módulo de biblioteca y empaqueta el contenido compilado resultante en la app.

Aprenderás más sobre cómo agregar bibliotecas a tu app en unidades posteriores.

1. En el panel Project, abre Gradle Scripts > build.gradle.kts (Module :app).
2. Desplázate hasta el final de la función build.gradle.kts (Module :app). En el bloque dependencies{}, agrega la siguiente línea:

implementation("androidx.compose.material:material-icons-extended")

Nota: Cada vez que modifiques los archivos de Gradle, es posible que Android Studio tenga que importar o actualizar bibliotecas, y ejecutar algunas tareas en segundo plano. Android Studio mostrará una ventana emergente en la que se te solicitará que sincronices tu proyecto. Haz clic en Sync Now.

Agrega el ícono componible

Agrega una función para mostrar el ícono Expandir más de la biblioteca de íconos de Material y usarla como botón.

1. En MainActivity.kt, después de la función DogItem(), crea una nueva función de componibilidad llamada DogItemButton().
2. Pasa un Boolean para el estado expandido, una expresión lambda para el controlador onClick del botón y un Modifier opcional de la siguiente manera:

@Composable
private fun DogItemButton(
   expanded: Boolean,
   onClick: () -> Unit,
   modifier: Modifier = Modifier
) {

}

3. Dentro de la función DogItemButton(), agrega un elemento IconButton() componible que acepte un parámetro llamado onClick con una expresión lambda que use la sintaxis lambda al final, que se invoque cuando se presione este ícono y un modifier opcional. Configura IconButton's onClick y modifier value parameters para que sean iguales a los valores que se pasaron a DogItemButton.

@Composable
private fun DogItemButton(
   expanded: Boolean,
   onClick: () -> Unit,
   modifier: Modifier = Modifier
){
   IconButton(
       onClick = onClick,
       modifier = modifier
   ) {

   }
}

4. Dentro del bloque de lambda IconButton(), agrega un elemento Icon componible y establece imageVector value-parameter en Icons.Filled.ExpandMore. Esto es lo que se mostrará al final del elemento de lista . Android Studio te muestra una advertencia para los parámetros Icon() componibles que corregirás en el siguiente paso.

import androidx.compose.material.icons.filled.ExpandMore
import androidx.compose.material.icons.Icons
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton

IconButton(
   onClick = onClick,
   modifier = modifier
) {
   Icon(
       imageVector = Icons.Filled.ExpandMore
   )
}

5. Agrega el parámetro de valor tint y establece el color del ícono en MaterialTheme.colorScheme.secondary. Agrega el parámetro con nombre contentDescription y establécelo en el recurso de cadenas R.string.expand_button_content_description.

IconButton(
   onClick = onClick,
   modifier = modifier
){
   Icon(
       imageVector = Icons.Filled.ExpandMore,
       contentDescription = stringResource(R.string.expand_button_content_description),
       tint = MaterialTheme.colorScheme.secondary
   )
}

Muestra el ícono

Para mostrar el elemento DogItemButton() componible, agrégalo al diseño.

1. Al comienzo de DogItem(), agrega un elemento var para guardar el estado expandido del elemento de la lista. Establece el valor inicial en false.

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue

var expanded by remember { mutableStateOf(false) }

Actualización sobre remember() y mutableStateOf():

Usa la función mutableStateOf() para que Compose observe cualquier cambio en el valor del estado y active una recomposición para actualizar la IU. Une la llamada a función mutableStateOf() con la función remember() para almacenar el valor en la composición durante la composición inicial, y el valor almacenado se muestra durante la recomposición.

2. Muestra el botón de ícono dentro del elemento de la lista. En el elemento DogItem() componible, al final del bloque Row, después de la llamada a DogInformation(), agrega DogItemButton(). Pasa el estado expanded y una lambda vacía para la devolución de llamada. Definirás la acción onClick en un paso posterior.

Row(
   modifier = Modifier
       .fillMaxWidth()
       .padding(dimensionResource(R.dimen.padding_small))
) {
   DogIcon(dog.imageResourceId)
   DogInformation(dog.name, dog.age)
   DogItemButton(
       expanded = expanded,
       onClick = { /*TODO*/ }
   )
}

3. Consulta WoofPreview() en el panel Design.

Observa que el botón para expandir más no está alineado al final del elemento de la lista. Deberás corregir eso en el siguiente paso.

Alinea el botón para expandir más

Para alinear el botón para expandir más al final del elemento de la lista, debes agregar un separador en el diseño con el atributo Modifier.weight().

Nota: Modifier.weight() establece el ancho/alto del elemento de IU de manera proporcional al peso del elemento, en relación con sus elementos medidos del mismo nivel (otros elementos secundarios de la fila o columna).

Ejemplo: Considera tres elementos secundarios consecutivos con los pesos 1f, 1f y 2f. En este caso, todos los elementos secundarios tienen pesos asignados. El espacio disponible para la fila se divide de forma proporcional al valor de peso especificado, con más espacio disponible para los elementos secundarios con valores de peso más altos. Los elementos secundarios distribuirán el peso como se muestra a continuación:

En la fila anterior, el primer elemento secundario componible tiene ¼ del ancho de la fila, el segundo también tiene ¼ del ancho de la fila y el tercero tiene ½ del ancho.

Si los elementos secundarios no tienen pesos asignados (el peso es un parámetro opcional), la altura o el ancho del elemento componible secundario une la configuración predeterminada al contenido (se unen los contenidos del elemento de la IU).

Nota sobre los valores flotantes: Los valores flotantes en Kotlin son números decimales, representados con una f o una F al final del número.

En la app de Woof, cada fila de un elemento de la lista incluye una imagen de un perro, información sobre él y un botón para expandir. Agregarás un elemento Spacer componible antes del botón para expandir más con peso 1f para alinear correctamente el ícono del botón. Como el separador es el único elemento secundario ponderado de la fila, completará el espacio restante en la fila después de medir el ancho del otro elemento secundario no ponderado.

Agrega el separador a la fila del elemento de la lista

1. En DogItem(), entre DogInformation() y DogItemButton(), agrega un Spacer. Pasa un Modifier con weight(1f). El elemento Modifier.weight() hace que el separador llene el espacio restante en la fila.

import androidx.compose.foundation.layout.Spacer

Row(
   modifier = Modifier
       .fillMaxWidth()
       .padding(dimensionResource(R.dimen.padding_small))
) {
   DogIcon(dog.imageResourceId)
   DogInformation(dog.name, dog.age)
   Spacer(modifier = Modifier.weight(1f))
   DogItemButton(
       expanded = expanded,
       onClick = { /*TODO*/ }
   )
}

2. Consulta WoofPreview() en el panel Design. Observa que el botón para expandir más ahora está alineado al final del elemento de la lista.

4. Agrega un elemento componible para mostrar un pasatiempo

En esta tarea, agregarás elementos Text componibles a fin de mostrar información sobre el pasatiempo del perro.

1. Crea una nueva función de componibilidad llamada DogHobby(), que reciba el ID de recurso de cadenas de un pasatiempo y un Modifier opcional.

@Composable
fun DogHobby(
   @StringRes dogHobby: Int,
   modifier: Modifier = Modifier
) {
}

2. Dentro de la función DogHobby(), crea un Column y pasa el modificador que se pasó a DogHobby().

@Composable
fun DogHobby(
   @StringRes dogHobby: Int,
   modifier: Modifier = Modifier
){
   Column(
       modifier = modifier
   ) {

   }
}

3. Dentro del bloque de Column, agrega dos elementos Text componibles: uno para mostrar el texto Acerca de sobre el pasatiempo y otro para mostrar la información del pasatiempo.

Establece el text del primero como el about del archivo strings.xml y establece style como labelSmall. Establece el text del segundo en dogHobby, que se pasa y establece style en bodyLarge.

Column(
   modifier = modifier
) {
   Text(
       text = stringResource(R.string.about),
       style = MaterialTheme.typography.labelSmall
   )
   Text(
       text = stringResource(dogHobby),
       style = MaterialTheme.typography.bodyLarge
   )
}

4. En DogItem(), el elemento DogHobby() componible se encontrará debajo de la Row que contiene DogIcon(), DogInformation(), Spacer() y DogItemButton(). Para ello, une la Row con una Column de modo que el pasatiempo se pueda agregar debajo de la Row.

Column() {
   Row(
       modifier = Modifier
           .fillMaxWidth()
           .padding(dimensionResource(R.dimen.padding_small))
   ) {
       DogIcon(dog.imageResourceId)
       DogInformation(dog.name, dog.age)
       Spacer(modifier = Modifier.weight(1f))
       DogItemButton(
           expanded = expanded,
           onClick = { /*TODO*/ }
       )
   }
}

5. Agrega DogHobby() después de Row como segundo elemento secundario de Column. Pasa dog.hobbies, que contiene el pasatiempo único del perro que se pasó y un modifier con el padding para el elemento DogHobby() componible.

Column() {
   Row() {
      ...
   }
   DogHobby(
       dog.hobbies,
       modifier = Modifier.padding(
           start = dimensionResource(R.dimen.padding_medium),
           top = dimensionResource(R.dimen.padding_small),
           end = dimensionResource(R.dimen.padding_medium),
           bottom = dimensionResource(R.dimen.padding_medium)
       )
   )
}

Nota sobre pasatiempos de perros: Como parte del código de partida, ya se te proporcionó información sobre pasatiempos de perros. Para ver esto en tu código, abre el archivo data/Dog.kt y observa la lista de dogs completada con la información sobre los perros.

La función DogItem() completa debería verse de la siguiente manera:

@Composable
fun DogItem(
   dog: Dog,
   modifier: Modifier = Modifier
) {
   var expanded by remember { mutableStateOf(false) }
   Card(
       modifier = modifier
   ) {
       Column() {
           Row(
               modifier = Modifier
                   .fillMaxWidth()
                   .padding(dimensionResource(R.dimen.padding_small))
           ) {
               DogIcon(dog.imageResourceId)
               DogInformation(dog.name, dog.age)
               Spacer(Modifier.weight(1f))
               DogItemButton(
                   expanded = expanded,
                   onClick = { /*TODO*/ },
               )
           }
           DogHobby(
               dog.hobbies,
               modifier = Modifier.padding(
                   start = dimensionResource(R.dimen.padding_medium),
                   top = dimensionResource(R.dimen.padding_small),
                   end = dimensionResource(R.dimen.padding_medium),
                   bottom = dimensionResource(R.dimen.padding_medium)
               )
           )
       }
   }
}

6. Consulta WoofPreview() en el panel Design. Observa el pasatiempo del perro que se muestra.

5. Muestra u oculta el pasatiempo con un clic

Tu app tiene un botón para expandir más elementos para cada elemento de la lista, pero aún no funciona. En esta sección, agregarás la opción de ocultar o revelar la información del pasatiempo cuando el usuario hace clic en el botón para expandir más.

1. En la función de componibilidad DogItem(), en la llamada a función DogItemButton(), define la expresión lambda onClick(), cambia el valor del estado booleano expanded a true cuando se hace clic en el botón y vuelve a cambiarlo a false si se vuelve a hacer clic en el botón.

DogItemButton(
   expanded = expanded,
   onClick = { expanded = !expanded }
)

Nota: El operador lógico NOT ( ! ) muestra el valor negado de la expresión Boolean.

Por ejemplo, si expanded es true, entonces !expanded se evalúa como false.

2. En la función DogItem(), une la llamada a función DogHobby() con una verificación if en el valor booleano expanded.

@Composable
fun DogItem(
   dog: Dog,
   modifier: Modifier = Modifier
) {
   var expanded by remember { mutableStateOf(false) }
   Card(
       ...
   ) {
       Column(
           ...
       ) {
           Row(
               ...
           ) {
               ...
           }
           if (expanded) {
               DogHobby(
                   dog.hobbies, modifier = Modifier.padding(
                       start = dimensionResource(R.dimen.padding_medium),
                       top = dimensionResource(R.dimen.padding_small),
                       end = dimensionResource(R.dimen.padding_medium),
                       bottom = dimensionResource(R.dimen.padding_medium)
                   )
               )
           }
       }
   }
}

Ahora, la información del pasatiempo del perro solo se muestra si el valor de expanded es true.

3. La vista previa muestra cómo se ve la IU, y también puedes interactuar con ella. Para interactuar con la vista previa de la IU, coloca el cursor sobre el texto de WoofPreview en el panel de Design (Diseño). Luego, haz clic en el botón de Interactive Mode (Modo interactivo) en la esquina superior derecha del panel de Design (Diseño). De esta manera, se inicia la vista previa en el modo interactivo.

4. Haz clic en el botón para expandir más para interactuar con la vista previa. Ten en cuenta que la información de pasatiempos del perro está oculta y se revela cuando haces clic en el botón para expandir más.

Nota: Para detener el modo interactivo, haz clic en Stop Interactive Mode (Detener modo interactivo) en la esquina superior izquierda del panel de vista previa.

Observa que el ícono de botón para expandir más permanece igual cuando se expande el elemento de la lista. Para una mejor experiencia del usuario, cambiarás el ícono para que ExpandMore muestre la flecha hacia abajo y ExpandLess para mostrar la flecha hacia arriba .

5. En la función DogItemButton(), agrega una sentencia if que actualice el valor imageVector basado en el estado expanded de la siguiente manera:

import androidx.compose.material.icons.filled.ExpandLess

@Composable
private fun DogItemButton(
   ...
) {
   IconButton(onClick = onClick) {
       Icon(
           imageVector = if (expanded) Icons.Filled.ExpandLess else Icons.Filled.ExpandMore,
           ...
       )
   }
}

Observa cómo escribiste if-else en el fragmento de código anterior.

if (expanded) Icons.Filled.ExpandLess else Icons.Filled.ExpandMore

Esto es lo mismo que usar las llaves { } en el siguiente código:

if (expanded) {

`Icons.Filled.ExpandLess`

} else {

`Icons.Filled.ExpandMore`

}

Las llaves son opcionales si hay una sola línea de código para la sentencia if-else.

6. Ejecuta la app en un dispositivo o emulador, o vuelve a usar el modo interactivo en la vista previa. Observa que el ícono alterna entre los íconos ExpandMore y ExpandLess .

Nota sobre el modo interactivo: El modo interactivo te permite interactuar con una vista previa de la misma manera que interactuarías en un dispositivo. Sin embargo, el modo de vista previa no reemplaza la ejecución de tu app en un dispositivo para pruebas.

Buen trabajo al actualizar el ícono.

Cuando expandiste el elemento de la lista, ¿notaste el cambio abrupto de altura? El cambio de altura abrupto no parece una app pulida. Para resolver este problema, agrega una animación a la app.

6. Agrega animación

En las animaciones, se pueden agregar elementos visuales que informen a los usuarios sobre lo que sucede en tu app. Son particularmente útiles cuando la IU cambia de estado, como cuando se carga contenido nuevo o cuando hay acciones nuevas disponibles. Las animaciones también pueden agregar un estilo refinado a tu app.

En esta sección, agregarás una animación de resorte para animar el cambio de altura del elemento de la lista.

Animación de rebote

La animación de primavera es una animación basada en la física impulsada por una fuerza de resorte. Con una animación de resorte, el valor y la velocidad de movimiento se calculan en función de la fuerza de resorte que se aplica.

Por ejemplo, si arrastras el ícono de una app por la pantalla y lo levantas con el dedo, el ícono regresará a su ubicación original mediante una fuerza invisible.

En la siguiente animación, se muestra el efecto de resorte. Una vez que el dedo se suelte del ícono, el ícono retrocederá, imitando a un resorte.

Efecto de resorte

Las siguientes dos propiedades guían la fuerza del resorte:

• Proporción de amortiguamiento: Corresponde a la recompensa del resorte.
• Nivel de rigidez: La rigidez del manantial, es decir, la velocidad con la que avanza hacia el final.

A continuación, se muestran algunos ejemplos de animaciones con diferentes proporciones de amortiguamiento y niveles de rigidez.

Rebote alto

Sin rebote

Rididez alta

Rigidez muy baja

Observa la llamada a función DogHobby() en la función de componibilidad DogItem(). La información del pasatiempo del perro se incluye en la composición, según el valor booleano expanded. La altura del elemento de la lista cambia en función de si la información del pasatiempo es visible u oculta. Actualmente, la transición es molesta. En esta sección, usarás el modificador animateContentSize para agregar una transición más fluida entre los estados expandido y no expandido.

// No need to copy over
@Composable
fun DogItem(...) {
  ...
    if (expanded) {
       DogHobby(
          dog.hobbies,
          modifier = Modifier.padding(
              start = dimensionResource(R.dimen.padding_medium),
              top = dimensionResource(R.dimen.padding_small),
              end = dimensionResource(R.dimen.padding_medium),
              bottom = dimensionResource(R.dimen.padding_medium)
          )
      )
   }
}

1. En MainActivity.kt, en DogItem(), agrega un parámetro modifier al diseño Column.

@Composable
fun DogItem(
   dog: Dog,
   modifier: Modifier = Modifier
) {
   ...
   Card(
       ...
   ) {
       Column(
          modifier = Modifier
       ){
           ...
       }
   }
}

2. Encadena el modificador con el modificador animateContentSize para animar el cambio de tamaño (altura de elemento de la lista).

import androidx.compose.animation.animateContentSize

Column(
   modifier = Modifier
       .animateContentSize()
)

Con tu implementación actual, estás animando la altura del elemento de la lista en tu app. Sin embargo, la animación es tan sutil que resulta difícil distinguirla cuando ejecutas la app. Para solucionar este problema, usarás un parámetro animationSpec opcional que te permita personalizar la animación.

3. Para Woof, la animación se activa y desactiva sin rebote. Para lograrlo, agrega el parámetro animationSpec a la llamada a función animateContentSize(). Configúralo en una animación de resorte con DampingRatioNoBouncy para que no haya rebote en ella y un parámetro StiffnessMedium para hacer que el resorte sea un poco más rígido.

import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.spring

Column(
   modifier = Modifier
       .animateContentSize(
           animationSpec = spring(
               dampingRatio = Spring.DampingRatioNoBouncy,
               stiffness = Spring.StiffnessMedium
           )
       )
)

4. Revisa WoofPreview() en el panel Design (Diseño) y usa el modo interactivo, o bien ejecuta tu app en un emulador o dispositivo para ver la animación de resorte en acción.

¡Genial! Disfruta de tu atractiva app con animaciones.

7. (Opcional) Experimenta con otras animaciones

animate*AsState

Las funciones animate*AsState() son una de las APIs de animación más simples en Compose para animar un solo valor. Solo debes proporcionar el valor final (o valor objetivo), y la API comienza la animación desde el valor actual hasta el especificado.

Compose proporciona funciones animate*AsState() para Float, Color, Dp, Size, Offset y Int, entre otras. Puedes agregar compatibilidad con otros tipos de datos mediante animateValueAsState() que toma un tipo genérico.

Usa la función animateColorAsState() para cambiar el color cuando se expande un elemento de la lista.

1. En DogItem(), declara un color y delega su inicialización a la función animateColorAsState().

import androidx.compose.animation.animateColorAsState

@Composable
fun DogItem(
   dog: Dog,
   modifier: Modifier = Modifier
) {
   var expanded by remember { mutableStateOf(false) }
   val color by animateColorAsState()
   ...
}

2. Configura el parámetro con nombre targetValue según el valor booleano expanded. Si se expande el elemento, configúralo con el color tertiaryContainer. De lo contrario, configúralo con el color primaryContainer.

import androidx.compose.animation.animateColorAsState

@Composable
fun DogItem(
   dog: Dog,
   modifier: Modifier = Modifier
) {
   var expanded by remember { mutableStateOf(false) }
   val color by animateColorAsState(
       targetValue = if (expanded) MaterialTheme.colorScheme.tertiaryContainer
       else MaterialTheme.colorScheme.primaryContainer,
   )
   ...
}

3. Establece color como el modificador en segundo plano de Column.

@Composable
fun DogItem(
   dog: Dog,
   modifier: Modifier = Modifier
) {
   ...
   Card(
       ...
   ) {
       Column(
           modifier = Modifier
               .animateContentSize(
                   ...
                   )
               )
               .background(color = color)
       ) {...}
}

4. Consulta cómo cambia el color cuando se expande el elemento de la lista. Los elementos de la lista no expandida tienen un color primaryContainer, mientras que los elementos de la lista expandida tienen un color tertiaryContainer.

8. Obtén el código de la solución

Para descargar el código del codelab terminado, puedes usar este comando de git:

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-woof.git

También puedes descargar el repositorio como un archivo ZIP, descomprimirlo y abrirlo en Android Studio.

Descargar ZIP

Nota: El código de la solución se encuentra en la rama main, en el repositorio descargado.

Si deseas ver el código de la solución, puedes hacerlo en GitHub.

9. Conclusión

¡Felicitaciones! Agregaste un botón para ocultar y revelar información sobre el perro. Mejoraste la experiencia del usuario con las animaciones de resorte. También aprendiste a usar el modo interactivo en el panel de Design.

También puedes probar un tipo diferente de animación de Jetpack Compose. No olvides compartir tu trabajo en redes sociales con el hashtag #AndroidBasics.

Más información

• Animación de Jetpack Compose
• Codelab: Cómo animar elementos en Jetpack Compose
• Video: Renovación de animación
• Video: Jetpack Compose: Animation