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
)
}
)
}