Блог

У меня есть три фона в поле, и это поле содержит горизонтальный пейджер и компонент изображения, который изменяется в соответствии с текущей страницей горизонтального пейджера, но нет анимации, как добавить такую анимацию
https://cdn.dribbble.com/users/1588664/screenshots/8257559/media/d94b36cb7822008df8055c90ca6e2238.mp4

И вот мой предварительный просмотр кода https://drive.google.com/file/d/1i2ix1Xdx-TK2SVPgx8MhFZWfqQnhZcr5/view?usp=sharing

 val pagerState = rememberPagerState(pageCount = 3)
val currentIndex = pagerState.currentPage
val currentPageOffset = pagerState.currentPageOffset
val poster = listOf(
    R.drawable.red,R.drawable.blue,R.drawable.green
)
Box(modifier = Modifier.fillMaxSize()){
    Image(
        painter = painterResource(poster[currentIndex]),
        contentDescription = null,
        contentScale = ContentScale.FillWidth,
        modifier = Modifier.fillMaxWidth()
    )
    HorizontalPager(
        state = pagerState,
        modifier = Modifier.fillMaxSize()
    ) { page ->
        val maxOffset = 70.dp
        val offset = maxOffset * when (page) {
            currentIndex -> {
                currentPageOffset.absoluteValue
            }
            currentIndex - 1 -> {
                1   currentPageOffset.coerceAtMost(0f)
            }
            currentIndex   1 -> {
                1 - currentPageOffset.coerceAtLeast(0f)
            }
            else -> {
                1f
            }
        }
        Card(
            modifier = Modifier
                .fillMaxWidth(0.7f)
                .fillMaxHeight(0.7f)
                .padding(22.dp)
                .offset(y = offset),
            shape = RoundedCornerShape(30.dp),
            elevation = 110.dp
        ) {}
    }
}