How to delay animation of a animated vector drawable individually for each item of a lazy row in Jetpack Compose

Viewed 212

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 : 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.

0 Answers
Related