对一组闪烁的可组合项进行动画处理，控制同步/计时

我希望两个可组合项同时开始并播放动画。例如，这是我的设置：

    LazyColumn(
        .semantics(mergeDescendants = true) { contentDescription = contentDes }
    ) {

        item { 
            ShimmeringComposable() // takes up a lot of the page
        } 
   
        item {
            Spacer()
        }
 
        item {
            ShimmeringComposable() // under the fold (off the screen)
        }
    }

我注意到大多数时候，第一个可组合项的动画先开始播放，然后才是第二个可组合项的动画。如果第一个可组合项在布局中可见而第二个可组合项在屏幕外，有时也会发生这种情况。

有没有办法“同步”两者并使它们同时开始/播放动画？

此代码基于此 YouTube 视频教程中的代码：https://www.youtube.com/watch?v=NyO99OJPPec https://www.youtube.com/watch?v=NyO99OJPPec

@Composable
fun ShimmeringComposable() {
    Box(Modifier
        .size(50.dp)
        .shimmer()
    )
}

fun Modifier.shimmer(): Modifier = composed {
    var size by remember {
        mutableStateOf(IntSize.Zero)
    }
    val width = size.width.toFloat()
    val height = size.height.toFloat()
    val transition = rememberInfiniteTransition()
    val startOffsetX by transition.animateFloat(
        initialValue = -2 * width, 
        targetValue = 2 * width,
        animationSpec = infiniteRepeatable(
            animation = tween(
                durationMillis = 1000,
            )
        )
    )
 

    background(
        brush = Brush.linearGradient(
            colors = listOf(Color.gray,Color.white,Color.gray),
            start = Offset(startOffsetX, 0),
            end = Offset(startOffsetX + width, height)
        )
    ).onGloballyPositioned { size = it.size }
}

更新：为了清晰起见添加了更多代码

编辑：我想我明白问题是什么。对于 InfiniteTransition，动画从合成开始，LazyColumn 将合成屏幕上可见的项目。但是，对于那些不在屏幕上的内容，直到它们进入视图（用户向下滚动）后才会进行合成。将所有的闪光包裹在Column可以缓解这个问题，因为只要您不使用大量闪烁的可组合项，因为 Column 的性能不如 LazyColumn。

您可以将进度作为参数提供给每个可组合项，同时通过一个动画集中控制进度变化。这样，即使可组合项接连进入合成，它也会以相同的进度进行动画处理。

您可以通过绘制修改器使用 DrawScope 来获取大小，而不是 Modifier.globallyPositioned。

fun Modifier.newShimmer(progress: Float) = this.then(

    Modifier
        .drawWithContent {

            val width = size.width
            val height = size.height
            val offset = progress * width

            drawContent()
            val brush = Brush.linearGradient(
                colors = listOf(Color.Gray, Color.White, Color.Gray),
                start = Offset(offset, 0f),
                end = Offset(offset + width, height)
            )
            drawRect(brush)
        }
)

并将进度传递给可组合项

@Composable
fun ShimmerView(progress: Float) {
    Box(
        Modifier
            .size(80.dp)
            .newShimmer(progress = progress)
    )
}


    val transition = rememberInfiniteTransition(label = "shimmer")
    val startOffsetX by transition.animateFloat(
        initialValue = -2f,
        targetValue = 2f,
        animationSpec = infiniteRepeatable(
            animation = tween(
                durationMillis = 3000,
            )
        ), label = "shimmer"
    )

    Text(text = "NEW STYLE")
    ShimmerView(progress = startOffsetX)
    Spacer(Modifier.height(20.dp))
    ShimmerView(progress = startOffsetX)

完整代码

@Preview
@Composable
private fun ShimmerTest() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(20.dp)
    ) {


        var showItem by remember {
            mutableStateOf(false)
        }

        Text(text = "OLD STYLE")
        ShimmeringComposable() // first composable

        Spacer(Modifier.height(20.dp))

        ShimmeringComposable() // second composable

        Spacer(Modifier.height(20.dp))
        if (showItem) {
            ShimmeringComposable()
        }

        Spacer(Modifier.height(20.dp))

        val transition = rememberInfiniteTransition(label = "shimmer")
        val startOffsetX by transition.animateFloat(
            initialValue = -2f,
            targetValue = 2f,
            animationSpec = infiniteRepeatable(
                animation = tween(
                    durationMillis = 3000,
                )
            ), label = "shimmer"
        )

        Text(text = "NEW STYLE")
        ShimmerView(progress = startOffsetX)
        Spacer(Modifier.height(20.dp))
        ShimmerView(progress = startOffsetX)
        Spacer(Modifier.height(20.dp))
        if (showItem) {
            ShimmerView(progress = startOffsetX)
        }

        Button(onClick = { showItem = showItem.not() }) {
            Text(text = "Show item: $showItem")
        }

    }
}

@Composable
fun ShimmerView(progress: Float) {
    Box(
        Modifier
            .size(80.dp)
            .newShimmer(progress = progress)
    )
}

@Composable
fun ShimmeringComposable() {
    Box(
        Modifier
            .size(80.dp)
            .shimmer()
    )
}

fun Modifier.newShimmer(progress: Float) = this.then(

    Modifier
        .drawWithContent {

            val width = size.width
            val height = size.height
            val offset = progress * width

            drawContent()
            val brush = Brush.linearGradient(
                colors = listOf(Color.Gray, Color.White, Color.Gray),
                start = Offset(offset, 0f),
                end = Offset(offset + width, height)
            )
            drawRect(brush)
        }
)

fun Modifier.shimmer(): Modifier = composed {
    var size by remember {
        mutableStateOf(IntSize.Zero)
    }
    val width = size.width.toFloat()
    val height = size.height.toFloat()
    val transition = rememberInfiniteTransition(label = "shimmer")
    val startOffsetX by transition.animateFloat(
        initialValue = -2 * width,
        targetValue = 2 * width,
        animationSpec = infiniteRepeatable(
            animation = tween(
                durationMillis = 3000,
            )
        ), label = "shimmer"
    )

    Modifier
        .background(
            brush = Brush.linearGradient(
                colors = listOf(Color.Gray, Color.White, Color.Gray),
                start = Offset(startOffsetX, 0f),
                end = Offset(startOffsetX + width, height)
            )
        )
        .onGloballyPositioned { size = it.size }
}