El siguiente diagrama te ayuda a decidir qué API utilizar para implementar tu animación.
Sigue las preguntas sobre el árbol de decisión que aparecen a continuación para elegir qué API de Animation es la más adecuada para tu caso de uso:
- ¿Mi animación es más similar al arte y tiene muchos elementos visuales? (p. ej., imágenes o SVG).
- Sí: ¿Tiene SVG simples? Es decir, un ícono con microanimaciones
- Sí:
AnimatedVectorDrawable
- No: Framework de animación de terceros, es decir,
Lottie
- Sí:
- No: ¿Debe repetirse para siempre?
- Sí:
rememberInfiniteTransition
- No: ¿Es una animación de diseño?
- Sí: ¿Cambiaste entre varios elementos componibles que tienen contenido diferente?
- Sí: ¿Con Navigation-compose?
- Sí:
composable()
conenterTransition
yexitTransition
configurados - No:
AnimatedContent
,Crossfade
oPager
- Sí:
- No: ¿Aparición o desaparición animada?
- Sí:
AnimatedVisibility
oanimateFloatAsState
conModifier.alpha()
- No: ¿Tamaño de animación?
- Sí:
Modifier.animateContentSize
- No: ¿Otra propiedad de diseño? Es decir, el desplazamiento, el padding, etcétera.
- Sí: Consulte "¿Las propiedades son completamente independientes unas de otras?".
- No. ¿Hay animaciones de elementos de lista?
- Sí:
animateItemPlacement()
(próximamente podrás volver a realizar el pedido y borrarlo)
- Sí:
- Sí:
- Sí:
- Sí: ¿Con Navigation-compose?
- No. ¿Necesitas animar varias propiedades?
- Sí, ¿las propiedades son completamente independientes unas de otras?
- Sí:
animate*AsState
. Para texto, usaTextMotion.Animated
. - No: ¿Comenzar al mismo tiempo?
- Sí: Sí:
updateTransition
conAnimatedVisibility
,animateFloat
,animateInt
, etcétera - No:
Animatable
conanimateTo
llamado con diferentes tiempos (con funciones de suspensión)
- Sí: Sí:
- Sí:
- No. ¿La animación tiene un conjunto de valores objetivo predefinidos?
- Sí:
animate*AsState
. Para texto, usaTextMotion.Animated
. - No: ¿Animación basada en gestos? ¿Tu animación es la única fuente de verdad?
- Sí:
Animatable
conanimateTo
/snapTo
- No: ¿Animación única sin administración de estado?
- Sí:
AnimationState
oanimate
- No. ¿La respuesta no está aquí? Envía una solicitud de funciones
- Sí:
- Sí:
- Sí:
- Sí, ¿las propiedades son completamente independientes unas de otras?
- Sí: ¿Cambiaste entre varios elementos componibles que tienen contenido diferente?
- Sí:
- Sí: ¿Tiene SVG simples? Es decir, un ícono con microanimaciones
Descarga la versión PDF del diagrama.