Jetpack compose Horizontal Pager content scroll effect is not smooth

103 views Asked by At

I'm trying to create a cover flow carousel effect in Android using jetpack compose like in the image below. Image

I almost got the result. But the scroll animations are not smooth.I used translationX to move image behind the main image.

Is there any way to make the scroll smooth ?

@OptIn(ExperimentalFoundationApi::class)
fun PagerState.offsetForPage(page: Int) = (currentPage - page) + currentPageOffsetFraction
HorizontalPager(
            state = pagerState,
            contentPadding = PaddingValues(horizontal = 100.dp),
           // userScrollEnabled = false,
        ) { page ->

            val pageOffset = pagerState.offsetForPage(page)
            val offset = lerp(0.8F, 1F, 1 - abs(pageOffset).coerceIn(0F, 1F))
            MoviePoster(
                image = moviesList[page],
                modifier = Modifier
                    .width(width = imageWidth.dp)
                    .height(imageHeight.dp)
                    .zIndex(offset)
                    .graphicsLayer {

                        scaleX = offset
                        scaleY = offset
                        alpha = offset
                        // if offset is 0.0, hide the other pages behind the current page
                        // only a fraction need to display the other pages
                       translationX = lerp(
                            start = 10f, // Use fixed start value
                            stop = offset * 100.dp.toPx(),
                            fraction = abs(offset) // Use absolute value of offset1 as fraction
                        )
                    }
            )
        }
0

There are 0 answers