Kotlin Compose lerp 函数

您在使用 Jetpack Compose UI 组件库,您需要在项目中导入以下依赖:

在项目的 build.gradle 文件中添加:

dependencies {
    implementation "androidx.compose.ui:ui:1.2.0"
}

然后在 Kotlin 文件中添加正确的导入:

import androidx.compose.ui.geometry.lerp

请注意,这里的版本号 1.2.0 可能不是最新版本。请根据您的项目需求选择合适的版本。

使用场景

 // We animate the scaleX + scaleY, between 85% and 100%
                            lerp(
                                start = 0.85f,
                                stop = 1f,
                                fraction = 1f - pageOffset.coerceIn(0f, 1f)
                            ).also { scale ->
                                scaleX = scale
                                scaleY = scale
                            }

                            // We animate the alpha, between 50% and 100%
                            alpha = lerp(
                                start = 0.5f,
                                stop = 1f,
                                fraction = 1f - pageOffset.coerceIn(0f, 1f)
                            )

lerp 函数帮我解释一下

lerp 是一个插值函数,它代表 "线性插值"(Linear Interpolation)。该函数通过三个参数(startstopfraction)计算出一个在起始值 (start) 和终止值 (stop) 之间的插值。

  • start: 插值范围的起始值。
  • stop: 插值范围的终止值。
  • fraction: 一个 0.0 到 1.0 之间的值,用于表示起始值和终止值之间的插值位置。当 fraction 为 0.0 时,lerp 函数返回 start 值;当 fraction 为 1.0 时,返回 stop 值。当 fraction 处于 0.0 和 1.0 之间时,返回相应的插值。

在您的代码示例中,lerp 函数用于计算动画的 scaleXscaleYalpha 属性的插值。这里有两个 lerp 函数调用:

  1. scaleX 和 scaleY 的插值:起始值为 0.85f(85%),终止值为 1f(100%)。根据 pageOffset 的值,计算出的插值作为视图的 scaleX 和 scaleY。

  2. alpha 的插值:起始值为 0.5f(50%),终止值为 1f(100%)。根据 pageOffset 的值,计算出的插值作为视图的 alpha(透明度)。

pageOffset 的值通常表示页面之间的滚动偏移量。这里的 lerp 函数用于根据页面滚动的偏移量计算动画效果。

具体使用场景

  val listState = rememberPagerState()
            val padding = 20.dp

            val count = 10
//            卡片列表
            HorizontalPager(
                count = count,
                state = listState,
                contentPadding = PaddingValues(horizontal = padding),
            ) { page ->
                Card(
                    modifier = Modifier
                        .graphicsLayer {
                            val pageOffset = calculateCurrentOffsetForPage(page).absoluteValue

                            // We animate the scaleX + scaleY, between 85% and 100%
                            lerp(
                                start = 0.85f,
                                stop = 1f,
                                fraction = 1f - pageOffset.coerceIn(0f, 1f)
                            ).also { scale ->
                                scaleX = scale
                                scaleY = scale
                            }

                            // We animate the alpha, between 50% and 100%
                            alpha = lerp(
                                start = 0.5f,
                                stop = 1f,
                                fraction = 1f - pageOffset.coerceIn(0f, 1f)
                            )
                        }
                        .fillMaxWidth()
                        .padding(10.dp),
                    contentColor = contentColorFor(HaiveColor_Main),
                    elevation = 4.dp,
                    shape = RoundedCornerShape(17.dp),

                    ) {}})

HorizontalPager 实现滚动到中间的最大。左边和右边的变小。这种平滑的插值 配上

graphicsLayer  中的

scaleX = scale
scaleY = scale
alpha = lerp(
                                start = 0.5f,
                                stop = 1f,
                                fraction = 1f - pageOffset.coerceIn(0f, 1f)
                            )

等一些变化的数值 那么就可以实现上述效果

你可能感兴趣的:(002android,kotlin,android,开发语言)