[Kotlin] 안드로이드스튜디오 Fragment에서 Fragment 복합 트랜지션 (여러 애니메이션 동시 적용)

안녕하세요, 하루플입니다.

 

Activity에서 Activity로 화면을 전환을 할 때와 Fragment에서 Fragment로 전환할 때의 방법이 다릅니다.

해당 방법은 Fragment 전환에만 해당하는 방법입니다.

저는 위/아래로 움직이면서 동시에 Fade in / Fade out 되는 애니메이션을 적용해보겠습니다

 

먼저 트랜지션 애니메이션을 적용하기 위한 xml을 만들어야 합니다.

여러 애니메이션을 한번에 적용하기 위해서는 <set/>으로 사용할 애니메이션을 묶어주어야 합니다.

 

transition_fade_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <objectAnimator
        android:propertyName="translationY"
        android:valueFrom="50"
        android:valueTo="0"
        android:duration="250"
        android:startOffset="500"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>

    <objectAnimator
        android:propertyName="alpha"
        android:valueFrom="0.0"
        android:valueTo="0.0"
        android:duration="250"
      />

    <objectAnimator
        android:propertyName="alpha"
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:duration="250"
        android:startOffset="500"
        />

</set>

 

 

transition_fade_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <objectAnimator
        android:propertyName="translationY"
        android:valueFrom="0"
        android:valueTo="50"
        android:duration="250"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>

    <objectAnimator
        android:propertyName="alpha"
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:duration="250"
        />

    <objectAnimator
        android:propertyName="alpha"
        android:valueFrom="0.0"
        android:valueTo="0.0"
        android:duration="250"
        android:startOffset="500" />

</set>

 

사실 단순히 <alpha/> 를 사용해서 단순히 트랜지션을 적용할 수 있는 방법이 널리 쓰이고 있지만 복합적으로 여러 애니메이션을 동시에 적용할 수는 없습니다. 동시에 애니메이션을 사용하기 위해서는 <set/>을 사용 후 <objectAnimator/> 를 사용해 여러 애니메이션을 한번에 묶어주어야 합니다.

 

 

애니메이션 xml 코드를 생성한 후에 프래그먼트를 전환할 액티비티에 아래의 코드를 작성해줍니다.

    fun changeFragment(fragment: Fragment) {
        supportFragmentManager.beginTransaction().run { 
            setCustomAnimations(R.anim.frg_transition_fade_in, R.anim.frg_transition_fade_out, R.anim.frg_transition_fade_in, R.anim.frg_transition_fade_out)
            addToBackStack(supportFragmentManager.backStackEntryCount.toString())
            commit()
        }
    }

전환할 프래그먼트에서 위 함수를 사용해서 화면 전환을 수행하면 됩니다.