arc_animation_pager1

arc_animation_pager1.kt

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun TestScreen() {
    val pageCount = 3
    val rotateDegree = 15F
    val pagerState = rememberPagerState()
    HorizontalPager(
        modifier = Modifier.fillMaxSize().background(Color.LightGray),
        pageCount = pageCount,
        state = pagerState,
    ) { page ->
        Box(
            modifier = Modifier.fillMaxSize()
        ) {
            Card(
                page = page,
                modifier = Modifier
                    .align(Alignment.Center)
                    .height(300.dp)
                    .graphicsLayer {
                        val pageOffset = pagerState.offsetForPage(page)

                        rotationZ = -rotateDegree * pageOffset
                    }
            )
        }
    }
}

@Composable
fun Card(page: Int, modifier: Modifier = Modifier) {
    Surface(
        modifier = modifier,
        color = Color.DarkGray,
        shape = RoundedCornerShape(16.dp)
    ) {
        Box(modifier = Modifier.fillMaxSize()) {
            Text(
                text = "Page $page",
                modifier = Modifier.align(Alignment.Center),
                style = MaterialTheme.typography.headlineLarge,
                color = Color.White
            )
        }
    }
}


@OptIn(ExperimentalFoundationApi::class)
fun PagerState.offsetForPage(page: Int) = (currentPage - page) + currentPageOffsetFraction