Kotlin Compose lerp function

You are using Jetpack Compose UI component library, you need to import the following dependencies in your project:

Add in the project's build.gradle file:

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

Then add the correct imports in the Kotlin file:

import androidx.compose.ui.geometry.lerp

Note that the version numbers here 1.2.0may not be the latest version. Please choose the appropriate version according to your project needs.

scenes to be used

 // 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 function explain to me

lerpis an interpolation function, which stands for "Linear Interpolation". The function calculates an interpolation between a start value ( ) and an end value ( ) with three parameters ( start, stopand ).fractionstartstop

• start: The starting value of the interpolation range.
• stop: The end value of the interpolation range.
• fraction: A value between 0.0 and 1.0 that represents the interpolation position between the start value and the end value. When fractionis 0.0, lerpthe function returns startthe value ; fractionwhen is 1.0, the function returns stopthe value . When fractionis between 0.0 and 1.0, returns the corresponding interpolated value.

In your code example, lerpthe function is used to calculate the interpolation of the animated scaleX, scaleYand alphaproperties . There are two lerpfunction :

1. Interpolation of scaleX and scaleY: start value is 0.85f (85%), end value is 1f (100%). Based on the value pageOffsetof , the interpolated values ​​are calculated as the view's scaleX and scaleY.

2. Interpolation of alpha: the starting value is 0.5f (50%), and the ending value is 1f (100%). Based on the value pageOffsetof , the interpolated value is calculated as the alpha (transparency) of the view.

pageOffsetThe value of typically represents the scroll offset between pages. lerpThe function here is used to calculate the animation effect based on the offset of page scrolling.

Specific usage scenarios

  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 implements scrolling to the middle maximum. The left and right ones get smaller. This smooth interpolation coupled with

in graphicsLayer

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

Wait for some changing values, then the above effect can be achieved