[Android]HorizontalPager 효과 적용하기

ViewPager2에서 Compose HorizontalPager로 마이그레이션

기존 ViewPager2에서 사용했던 효과를 Compose의 HorizontalPager로 최대한 비슷하게 구현했다. 참고한 링크: Medium 글

1. 기본 설정

HorizontalPager(
    modifier = Modifier.fillMaxSize(),
    state = pagerState,
    contentPadding = PaddingValues(horizontal = 90.dp),
    pageSpacing = 45.dp
)

• contentPadding: 아이템에 적용할 패딩값 (현재 horizontal 90dp)
• pageSpacing: 페이지 간 거리 설정 (contentPadding보다 작으면 화면에 보이게 됨)

2. 투명도 설정

• Modifier.graphicsLayer: 카드뷰에 투명도를 설정할 때 사용

• pageOffset: 현재 페이지의 위치에서 얼마나 떨어졌는지를 계산

  val pageOffset = pagerState.currentPage - page + pagerState.currentPageOffsetFraction

• Alpha 설정: lerp 함수를 사용하여 투명도 설정

  alpha = lerp(
    start = 0.5f,
    stop = 1.0f,
    fraction = 1f - pageOffset.absoluteValue.coerceIn(0f, 1f)
  )

  3. 크기 조절

• scaleX, scaleY: 상하, 좌우 모두 크기를 줄이도록 설정

  scaleY = lerp(
  start = 1f,
  stop = 0.8f,
  fraction = pageOffset.absoluteValue.coerceIn(0f, 1f)
  )

4. 크기 조절에 따른 위치 조정

크기 조절에 따른 위치 조정을 위해 translationX를 설정.

translationX = size.width * (1 - scaleX) / 2 * (if (pagerState.currentPage > page) 1 else -1)

최종 코드는 다음과 같다.

modifier = Modifier.graphicsLayer {
    val pageOffset = pagerState.currentPage - page + pagerState.currentPageOffsetFraction
    val offsetFraction = pageOffset.absoluteValue.coerceIn(0f, 1f)

    alpha = lerp(
        start = 0.5f,
        stop = 1.0f,
        fraction = 1f - offsetFraction
    )

    scaleX = lerp(
        start = 1f,
        stop = 0.8f,
        fraction = offsetFraction
    )
    scaleY = scaleX

    translationX = size.width * (1 - scaleX) / 2 * (if (pagerState.currentPage > page) 1 else -1)
}

5. 기타 고려 사항

• 각도 수정: rotationX, rotationY, rotationZ를 사용해 각도 조절 가능
• CameraDistance: 회전에 따라 카메라가 보이는 부분을 다르게 설정 가능

---

이 마이그레이션 작업을 통해 기존 ViewPager2에서 사용하던 애니메이션 효과를 Compose HorizontalPager로 대체할 수 있다. 추가적으로 회전이나 카메라 거리 효과도 조정 가능하므로 더 다양한 UI 효과를 연출할 수 있다.