I'm trying to put stars into my Splash Screen and I want them to start animation sequentially by delayed animation by 100ms, but not at the same time. My problem is that I'm using drawable vectors and animated vector drawable. I spent half a day to search on Google but I didn't find a solution.
Here is the stars : 
The animation works but they do the animation at the same time. Here is my code: Splash Screen file:
@OptIn(ExperimentalAnimationGraphicsApi::class)
@Composable
fun StarNormalList(modifier: Modifier = Modifier) {
var starPosition by remember { mutableStateOf(false) }
var animatorSequentialDelay by remember { mutableStateOf(100L) }
val set = AnimatorInflater.loadAnimator(LocalContext.current, R.animator.rotation)
LazyRow(modifier = modifier) {
items(20) {item ->
set.startDelay = animatorSequentialDelay
animatorSequentialDelay += 100L
StarNormalItem(
Modifier
.padding(10.dp)
.offset(0.dp, if (starPosition) 10.dp else (-10).dp)
.mediaQuery(
Dimensions.Width greaterThan 400.dp,
modifier = Modifier
.size(40.dp, 40.dp)
)
)
starPosition = starPosition.not()
}
}
}
@OptIn(ExperimentalAnimationGraphicsApi::class)
@Composable
fun StarNormalItem(modifier: Modifier = Modifier) {
val star = animatedVectorResource(id = R.drawable.star_normal_animated)
var atEnd by remember { mutableStateOf(false) }
Image(
painter = star.painterFor(atEnd = atEnd),
contentDescription = "star",
modifier = modifier
)
LaunchedEffect(Unit) {
atEnd = !atEnd
}
}
@OptIn(ExperimentalComposeUiApi::class, ExperimentalAnimationGraphicsApi::class)
@Composable
fun SplashScreenContent(maxWidth: Dp, maxHeight: Dp, modifier: Modifier = Modifier) {
ConstraintLayout(modifier = modifier) {
val (stars, moon, moonLight) = createRefs()
if (isSystemInDarkTheme()) {
StarNormalList(
modifier = Modifier
.constrainAs(stars) {
top.linkTo(parent.top, margin = 10.dp)
start.linkTo(parent.start)
}
)
}
}
}
star_normal_animated:
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/star_normal">
<target
android:animation="@animator/rotation"
android:name="star_normal_group" />
</animated-vector>
res/animator/rotation_and_morph:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:ordering="sequentially">
<set
android:ordering="together">
<objectAnimator
android:duration="1500"
android:interpolator="@android:interpolator/anticipate_overshoot"
android:propertyName="rotation"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:valueFrom="0"
android:valueTo="360" />
<objectAnimator
android:duration="1500"
android:interpolator="@android:interpolator/anticipate_overshoot"
android:propertyName="pathData"
android:valueFrom="some path"
android:valueTo="some path"
android:valueType="pathType" />
</set>
</set>
The stars start with a form and morph to a second form and also rotate.