How can I make AnimatedImageVector animate a single path a time with jetpack compse?

Question

I am using SVG file that contains 33 paths and every path is a circle

drawable.xml:

<group
    android:name="circle1"
    android:pivotX="242"
    android:pivotY="242"
    android:rotation="0.0">

    <path android:fillColor="#fff"
        android:pathData="M337.72,41.45m-18.01,0a18.01,18.01 0,1 1,36.02 0a18.01,18.01 0,1 1,-36.02 0"
        android:strokeColor="#92278f" android:strokeWidth="2"/>

</group>

I am trying to animate these circles one by one on every click

animated_vector.xml

<target
        android:animation="@animator/animate1"
        android:name="circle31" />

Compose :

@Composable
fun Animation(){
    val image = AnimatedImageVector.animatedVectorResource(id = R.drawable.azkar_animated_vector)
    var atEnd by remember { mutableStateOf(false) }
    Image(
        painter = rememberAnimatedVectorPainter(image, atEnd),
        contentDescription = "Timer",
        modifier = Modifier
            .fillMaxWidth()
            .height(400.dp)
            .clickable {
            atEnd = !atEnd
        },
        contentScale = ContentScale.Fit
    )
}

How could I animate every targeted path at a time on every click?

Thank you in advance.

Answer 1

You can only specify a single animation drawable for a given AnimatedImageVector. That AnimatedImageVector also has only one animation state, the atEnd. You could, on each click, switch out the drawable for the AnimatedImageVector, but you would still only have one state object so you would lose the animation state of the other circles.

Instead I would suggest that you have separate Images for each circle. Then you can provide each image with its own AnimatedImageVector that will have its own atEnd state. For this to work you will need to cut out the 33 paths and place them in separate drawables. Then you can individually animate them.