如何在 Android - Jetpack Compose 中基于 lazycolumn / lazy list 滚动连续设置文本大小动画？

Question

我想在延迟列内平滑地缩放文本。目前，我正在使用图形层根据列表状态中的第一个可见项目索引为文本比例设置动画。但它不提供流畅和连续的动画。我想在 React native 中将其作为动画平面列表。 Here is an example 我想要实现的目标。

这是我根据所选项目缩放文本的代码。

 val animateSizeText by animateFloatAsState(
                                        targetValue = if (item == selectedItem) {
                                            1f
                                        }
                                        else if (item == selectedItem- 1 || item == selectedItem+ 1) {
                                            0.9f
                                        }
                                        else if (item == selectedItem- 2 || item == selectedItem+ 2) {
                                            0.7f
                                        }
                                        else {
                                            0.5f
                                        },
                                        animationSpec = tween(100, easing = LinearOutSlowInEasing)
                                    )

缩放文本的修饰符：

                                             modifier = Modifier
                                                    .graphicsLayer {
                                                        scaleY = animateSizeText
                                                        scaleX = animateSizeText
                                                    }

Answer 1

与 相比，您需要使用 firstOrNull 块为其他项目启用非默认不透明度值，并使用乘数控制它如何依赖于滚动位置。很简单的数学运算，根据你需要的缩放效果改变这个公式。

val items = remember {
    ('A'..'Z').map { it.toString() }
}
val listState = rememberLazyListState()
val horizontalContentPadding = 16.dp
val boxSize = 50.dp
BoxWithConstraints {
    val halfRowWidth = constraints.maxWidth / 2
    LazyRow(
        state = listState,
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        contentPadding = PaddingValues(horizontal = horizontalContentPadding, vertical = 8.dp),
        modifier = Modifier
            .fillMaxWidth()
    ) {
        itemsIndexed(items) { i, item ->
            val opacity by remember {
                derivedStateOf {
                    val currentItemInfo = listState.layoutInfo.visibleItemsInfo
                        .firstOrNull { it.index == i }
                        ?: return@derivedStateOf 0.5f
                    val itemHalfSize = currentItemInfo.size / 2
                    (1f - minOf(1f, abs(currentItemInfo.offset + itemHalfSize - halfRowWidth).toFloat() / halfRowWidth) * 0.5f)
                }
            }
            Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier
                    .scale(opacity)
                    .alpha(opacity)
                    .size(boxSize)
                    .background(Color.Blue)
            ) {
                Text(item, color = Color.White)
            }
        }
    }
}