[Android] 프래그먼트 전환 시 애니메이션 효과 적용

✏️ TIL(Today I Learned)

화면의 비디오 아이템을 클릭하면 비디오상세화면으로 전환될 때, 줌 인/아웃 애니메이션 효과를 적용해 봤다.

 

우선 res/anim에 사용할 애니메이션 효과 xml 파일을 생성해줘야 한다.

// zoom_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    <scale
        android:duration="100"
        android:fromXScale="0.7"
        android:fromYScale="0.7"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>

// zoom_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    <scale
        android:duration="100"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.7"
        android:toYScale="0.7" />
</set>

• android:fillAfter="true" : 애니메이션이 끝난 후에도 애니메이션의 최종 상태가 유지 여부
• <scale> 태그: 스케일(확대/축소) 애니메이션을 정의
  • android:duration: 애니메이션이 지속될 시간 (밀리초 단위)
  • android:fromXScale  & android:fromYScale: 애니메이션 시작 시의 X, Y 축의 스케일을 정의
  • android:pivotX & android:pivotY: 애니메이션이 View의 중앙을 기준으로 수행
  • android:toXScale & android:toYScale: 애니메이션 종료 시의 X, Y 축의 스케일을 정의

 

그다음, supportFragmentManager에서 commit을 할 때

setCustomAnimations()를 사용해 전환 애니메이션을 설정해 주면 된다.

// MainActivity

fun showVideoDetailFragment(detailFragment: Fragment) {
    supportFragmentManager.commit {
        setCustomAnimations(
            R.anim.zoom_in,
            R.anim.zoom_out,
            R.anim.zoom_in,
            R.anim.zoom_out
        )
        replace(R.id.fl_video_detail, detailFragment)
        addToBackStack(null)
    }
}

• setCustomAnimations():
  • R.anim.zoom_in: 새 프래그먼트가 나타날 때 적용될 애니메이션
  • R.anim.zoom_out: 기존 프래그먼트가 사라질 때 적용될 애니메이션
  • R.anim.zoom_in: 뒤로 갈 때 새 프래그먼트가 나타날 때 적용될 애니메이션
  • R.anim.zoom_out: 뒤로 갈 때 기존 프래그먼트가 사라질 때 적용될 애니메이션

 

 

---

 

📌 Ref:

애니메이션을 사용하여 프래그먼트 간 탐색  |  Android 개발자  |  Android Developers