Un viaje componible: Jetpack Compose Animations | de Alejandro Zürcher | junio 2023

Vamos a animar la visibilidad del contenido.

Primero, agregaremos algunas actualizaciones de visibilidad a nuestro contenido para garantizar que no aparezca en la interfaz de usuario sin previo aviso. Afortunadamente, esto es muy fácil de lograr en Compose. Primero, extraigamos el contenido que se mostrará sobre el fondo de nuestra tarjeta criptográfica: con esta extracción, ahora podemos ver fácilmente cómo se muestra el fondo en su propio estado componible y el contenido superpuesto: ahora que hemos limpiado nuestra implementación, exploremos cómo podemos animar la visibilidad de nuestro contenido. Jetpack Compose nos ofrece el AnimatedVisibility Composable que nos permitirá envolver el elemento que queremos animar y ajustar su visibilidad a nuestras necesidades. ¡Hagamos eso! De acuerdo con el diagrama en la parte superior de la página, nuestra animación deseada para este escenario en particular es animar la aparición y desaparición del contenido en nuestro diseño. Encaja perfectamente con lo que queremos conseguir. Pero nada pasa…Vaya, el concepto detrás del uso de AnimatedVisibility es que algo activa una actualización. Puede ser un clic o un evento dentro de nuestra aplicación. Sin embargo, en este caso particular, queremos que la animación solo ocurra una vez cuando se muestre la interfaz de usuario. Para lograr esto, necesitamos actualizar el booleano mutable visible con un LaunchEffect que retrasa esta acción por unos 300 ms:UghEntonces, el contenido aparece con una animación activada 300 ms después de que se carga la pantalla. ¡Genial! Sin embargo, queremos que aparezca desde abajo y tenga un efecto de desvanecimiento. Para lograr esto podemos usar este aporte parámetros de Visibilidad animada componible que nos permite crear cualquier animación que queramos para la actuación:Oh perfecto