Jetpack Compose – Animación de círculo pulsante | Por Kumar Bibek | Enero de 2022
Jetpack Compose es divertido y las animaciones son geniales. La animación es un poco difícil de entender. Sin embargo, una vez que domine los conceptos básicos, implementar animaciones con Jetpack Compose es fácil. Después de pasar por la API de animación y los ejemplos, intento implementar un contenedor de texto circular pulsante. esta es mi idea
Esta es una grabación del «Modo interactivo» de Android Studio. Entonces, la calidad del video no es muy buena. Sin embargo, cuando ejecuta este programa componible, no verá pixelación.
A continuación esnorte¿Qué hay de las vistas no animadas de componibles?
Aquí están los bloques de construcción.
Primero, creé un círculo componible que podemos reutilizar.
@Composable
fun SimpleCircleShape2(
size: Dp,
color: Color = Color.White,
borderWidth: Dp = 0.dp,
borderColor: Color = Color.LightGray.copy(alpha = 0.0f)
) {
Column(
modifier = Modifier
.wrapContentSize(Alignment.Center)
) {
Box(
modifier = Modifier
.size(size)
.clip(CircleShape)
.background(
color
)
.border(borderWidth, borderColor)
)
}
}
Luego, usé un «cuadro» componible para superponer el círculo y el texto.
@Composable
fun PulsatingCircles(text: String) {
Column {
val infiniteTransition = rememberInfiniteTransition() val size by infiniteTransition.animateValue(
initialValue = 200.dp,
targetValue = 190.dp,
Dp.VectorConverter,
animationSpec = infiniteRepeatable(
animation = tween(500, easing = FastOutLinearInEasing),
repeatMode = RepeatMode.Reverse
)
) val smallCircle by infiniteTransition.animateValue(
initialValue = 150.dp,
targetValue = 160.dp,
Dp.VectorConverter,
animationSpec = infiniteRepeatable(
animation = tween(1000, easing = FastOutLinearInEasing),
repeatMode = RepeatMode.Reverse
)
) Box(
modifier = Modifier
.fillMaxWidth()
.height(200.dp),
contentAlignment = Alignment.Center
) {
SimpleCircleShape2(
size = size,
color = MaterialTheme.colors.primary.copy(alpha = 0.25f)
)
SimpleCircleShape2(
size = smallCircle,
color = MaterialTheme.colors.primary.copy(alpha = 0.25f)
)
SimpleCircleShape2(
size = 130.dp,
color = MaterialTheme.colors.onPrimary
)
Column {
Row(verticalAlignment = Alignment.CenterVertically) {
Text(
text = text,
style = TextStyle().copy(color = MaterialTheme.colors.primary)
)
}
}
}
}
}
Aquí estoy animando el tamaño de los 2 círculos exteriores. Así que hay 2 animaciones ejecutándose al mismo tiempo. También creé una vista previa para componible, que ayuda con la implementación y la simulación sin tener que ejecutarlo en el teléfono.
@Preview
@Composable
fun PreviewPulsatingCircles() {
PulsatingCircles("Compose")
}
eso es todo.
