android - 如何在 Jetpack Compose 中为惰性行的每个项目单独延迟可绘制动画矢量的动画

Question

我正在尝试将星星放入我的启动画面中，我希望它们通过延迟动画 100 毫秒顺序启动动画，但不是同时启动。我的问题是我正在使用可绘制矢量和可绘制动画矢量。我用了半天的时间在谷歌上搜索，但没有找到解决方案。这里是星星：

动画有效，但他们同时制作动画。这是我的代码：启动画面文件：

@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)
                    }
            )

       
        }
    }
}

明星正常动画：

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

星星以一种形式开始，然后变形为第二种形式并旋转。

标签： androidandroid-animationandroid-jetpack-compose