I have an animation it’s a green rectangle that grows in length inside a white outlined rectangle. It was working fine before I adjusted the layout. Now the green rectangle simply doesn’t grow. If I change the animatedWidth to 10f the rectangle appears. But it is supposed to start from zero and grow in lenght.
The animation is called from a button which turns isVisible true which shows the composable. This part works, because I can see the white rectangle
Button(
onClick = {isVisible = !isVisible}
) {Text(text = "Play animation)
}
if (isVisible) {
Box(modifier = Modifier.fillMaxSize()) {
OutlinedLinearProgressBar()
}}
This is the composable that contains my animation. The green rectangle is the one at the end and it is the size width variable that is supposed to change.
@Composable
fun OutlinedLinearProgressBar() {
var animationPlayed by remember { mutableStateOf(false) }
val animatedWidth = remember { Animatable(0f) }
var canvasSize by remember { mutableStateOf(Size.Zero) }
LaunchedEffect(Unit) {
val targetWidth = canvasSize.width / 2.18f
val duration = 1000
with(animatedWidth) {
launch { animateTo(targetValue= targetWidth, animationSpec = tween(durationMillis = duration))}
}
}
LaunchedEffect(key1 = true){animationPlayed = true}
Box( modifier = Modifier.fillMaxSize()) {
Canvas(modifier = Modifier.fillMaxSize())
{
canvasSize = size
drawRect(color = Color.Black, size = size)
val centerY = center.y
drawRect(
style = Stroke(width = 10f),
color = Color.White,
topLeft = Offset(x = size.width / 4f,y = centerY - (size.height / 10f) / 2f),
size = Size(
width = size.width / 2f,
height = size.height / 10f
)
)
drawRect(
color = Color.Green,
style = Fill,
topLeft = Offset(x = size.width / 3.7f,y = centerY - (size.height / 10f) / 2.5f),
size = Size(
width = animatedWidth.value,
height = size.height / 12.5f
))}}}
```