ViewPager의 커스텀 애니메이션 적용 방법은?

Q1: ViewPager에 커스텀 애니메이션을 적용하려면 어떻게 하나요?
A1: ViewPager에서는 `ViewPager.PageTransformer` 인터페이스를 구현하여 화면 전환 시 사용자 정의 애니메이션 효과를 줄 수 있습니다. 이 구현체를 생성한 뒤 `viewPager.setPageTransformer()` 메서드에 전달하면 커스텀 애니메이션이 적용됩니다.

---

Q2: PageTransformer를 구현하는 기본 예제는 어떻게 되나요?
A2:
```java
public class CustomPageTransformer implements ViewPager.PageTransformer {
@Override
public void transformPage(@NonNull View page, float position) {
// position: -1(왼쪽 완전 사라짐) ~ 0(중간) ~ 1(오른쪽 완전 사라짐)
if (position < -1) { // 화면 왼쪽 밖
page.setAlpha(0);
} else if (position <= 1) { // 화면에 보이는 범위
page.setAlpha(1);
page.setTranslationX(-position * page.getWidth());
// 예: 페이지가 좌우로 슬라이드될 때 크기를 축소
float scaleFactor = Math.max(0.85f, 1 - Math.abs(position));
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
} else { // 화면 오른쪽 밖
page.setAlpha(0);
}
}
}
```
적용:
```java
viewPager.setPageTransformer(true, new CustomPageTransformer());
```

---

Q3: `position`이 의미하는 것은 무엇인가요?
A3: `transformPage()`의 `position`은 현재 페이지 위치를 나타내며, 기준 페이지가 0입니다.
- 0: 현재 보여지는 페이지
- -1: 바로 왼쪽 페이지 (완전히 화면 밖 왼쪽)
- 1: 바로 오른쪽 페이지 (완전히 화면 밖 오른쪽)
값에 따라 페이지가 화면에 어느 정도 노출되는지를 알 수 있기 때문에 애니메이션 효과를 줄 때 사용합니다.

---

Q4: 여러 애니메이션을 조합할 수 있나요?
A4: 네, `transformPage()` 내에서 `translationX`, `alpha`, `rotation`, `scaleX`, `scaleY` 등 다양한 뷰 속성을 조합해 애니메이션 효과를 자유롭게 만들 수 있습니다.

---

Q5: 커스텀 애니메이션 적용 시 주의할 점은 무엇인가요?
A5:
- 페이지가 화면 밖으로 완전히 나갈 때는 상태를 명확히 지정해줘야 깜빡임이나 잔상이 생기지 않습니다 (예: alpha = 0).
- 복잡한 애니메이션은 성능에 영향을 줄 수 있으므로 변환이 최소화된 애니메이션을 권장합니다.
- `setPageTransformer()`의 첫 번째 인자로 `true`를 주면 하드웨어 가속이 활성화되지만, 이로 인해 일부 뷰의 동작이 달라질 수 있습니다.

---

Q6: ViewPager2에서도 똑같이 적용되나요?
A6: 네, ViewPager2에서도 `ViewPager2.PageTransformer` 인터페이스를 사용해 비슷한 방식으로 커스텀 애니메이션을 적용할 수 있습니다.
예:
```java
viewPager2.setPageTransformer(new ViewPager2.PageTransformer() {
@Override
public void transformPage(@NonNull View page, float position) {
// 커스텀 애니메이션 구현
}
});
```

---

요약:
1. `ViewPager.PageTransformer` 구현체를 만든다.
2. `transformPage(View page, float position)`에서 애니메이션 효과를 코드로 작성한다.
3. `viewPager.setPageTransformer()`에 적용한다.
4. `position` 값에 따라 뷰 속성(alpha, translationX, scale, rotation 등)을 조절해 원하는 전환 효과를 만든다.

ViewPager에 커스텀 애니메이션을 적용하려면 주로 `PageTransformer`를 구현하여 사용합니다.
`PageTransformer`는 ViewPager의 페이지 전환 시 애니메이션을 적용하는 데 사용되는 인터페이스입니다.
아래의 단계에 따라 커스텀 애니메이션을 적용하는 방법을 설명하겠습니다.
1.
PageTransformer 인터페이스 구현 먼저, `ViewPager.PageTransformer` 인터페이스를 구현한 클래스를 만듭니다.
여기서는 기본적인 예로 페이지가 좌우로 이동할 때 축소/확대되는 애니메이션을 적용해보겠습니다.
```java public class MyTransformer implements ViewPager.PageTransformer { @Override public void transformPage(View page, float position) { if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left.
page.setAlpha(0); } else if (position <= 1) { // [-1,1] // Modify the page's properties based on its position.
page.setAlpha(1 - Math.abs(position)); page.setTranslationX(-position * page.getWidth()); // Scale the page based on its position float scaleFactor = 0.85f + (1 - Math.abs(position)) * 0.15f; page.setScaleX(scaleFactor); page.setScaleY(scaleFactor); } else { // (1,+Infinity] // This page is way off-screen to the right.
page.setAlpha(0); } } } ``` 2.
ViewPager에 Transformer 설정 이제 위에서 만든 `MyTransformer`를 ViewPager에 설정해주시면 됩니다.
아래는 Activity 또는 Fragment에서 ViewPager를 설정하는 코드 예시입니다.
```java ViewPager viewPager = findViewById(R.id.viewPager); viewPager.setAdapter(new MyPagerAdapter()); // 어댑터 설정 viewPager.setPageTransformer(true, new MyTransformer()); // 커스텀 애니메이션 적용 ``` 3.
페이지 어댑터 구현 `MyPagerAdapter`를 구현하여 ViewPager에 표시할 페이지들을 제공합니다.
```java public class MyPagerAdapter extends PagerAdapter { @Override public Object instantiateItem(ViewGroup container, int position) { // 페이지를 생성하는 로직 View view = LayoutInflater.from(container.getContext()).inflate(R.layout.page_layout, container, false); container.addView(view); return view; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } @Override public int getCount() { return 5; // 페이지 수 } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } } ``` 4.
추가적인 애니메이션 효과 위 예시에서는 페이지 스케일과 알파 효과를 추가했습니다.
필요에 따라 다양한 애니메이션을 추가하거나 조정할 수 있습니다.
예를 들어, 페이지 회전, 이동 거리 조절 등 다양한 효과를 실험해 보세요.
5.
테스트 및 조정 모바일 환경에서 테스트하면서 각 페이지 전환 효과가 자연스럽고 사용하기 쉽도록 조정합니다.
사용하는 애니메이션이 사용자 경험에 어떻게 영향을 미치는지 항상 염두에 두세요.
이렇게 해서 ViewPager에 커스텀 애니메이션을 적용하는 방법을 살펴보았습니다.
필요에 따라 다양한 Transformer를 만들어 보고, 적용해보는 것이 좋습니다.