[Android] 화면 전환 애니메이션

시작

디자이너가 앱 전반적으로 화면 전환 애니메이션 추가를 요청했다. 

 

요구 사항

앱의 화면 종류는 크게 둘로 나뉜다. 상단 툴바 버튼 종료 모양이 화살표(←)인 것과 엑스(X)인 것으로 나뉜다.

 

1. ←화면에 진입할 때

• 가려지는 화면은 fade out
• 진입하는 화면은 오른쪽에서 왼쪽으로 슬라이드하며 진입

 

2. ←화면이 사라지고 이전 화면으로 돌아갈 때

• 등장하는 이전 화면은 fade in
• 사라지는 화면은 왼쪽으로 오른쪽으로 슬라이드하며 사라짐

 

3. X 화면에 진입할 때

• 가려지는 화면은 fade out
• 진입하는 화면은 아래에서 위로 슬라이드하며 진입

 

4. X 화면이 사라지로 이전 화면으로 돌아갈 때

• 등장하는 이전 화면은 fade in
• 진입하는 화면은 위에서 아래로 슬라이드하며 사라짐

 

과정

1) 디자이너가 원하는 애니메이션 설정 값 찾기

디자이너를 내 자리로 불러서 애니메이션 설정 값들을 하나하나 조정해 가며 같이 화면 전환 애니메이션들을 테스트해봤다. 테스트를 통해 애니메이션 설정 값들이 정해졌다.

 

여기 Animation attribute 값들에 대한 설명을 너무나 잘 써주신 글을 봤다. 

https://seosh817.tistory.com/18

[Android] Animation 정리

 

예시를 남긴다.

애니메이션 xml 파일

적용할 애니메이션이 하나에, 가로(오른쪽에서 왼쪽으로)로 이동한다.

<?xml version="1.0" encoding="UTF-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:toXDelta="100%" 
    android:fromXDelta="0%" 
    android:duration="150" />

몇몇 블로그 예시들을 보니까, 적용할 애니메이션이 하나임에도 <set>으로 컨테이너를 설정하는 예시들이 있었다. 공식 문서를 보니까 적용할 애니메이션이 하나이면 딱히 쓸 필요없다. 코드는 간결한 게 좋다고 생각해서 나는 적용할 애니메이션이 하나이면 <set>을 쓰지 않도록 작성했다.

 

적용할 애니메이션이 하나에, fade in 적용

<?xml version="1.0" encoding="UTF-8"?>
<alpha 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:toAlpha="1.0" 
    android:fromAlpha="0.9" 
    android:duration="300" />

 

적용할 애니메이션이 두 개 이상. 단순히 fade out 하는 애니메이션이다. 테스트할 때 액티비티에서 이런 화면 고정용 translate를 넣지 않으면 fade out할 타겟 화면이 아예 사라져 버려서 어쩔 수 없이 넣었다.😵😢🤦‍♀️ 프래그먼트 fade out 애니메이션에서는 이렇게 억지로 화면을 고정시키는 translate 설정이 없어도 fade out되는 타겟 프래그먼트가 사라지지 않아서 alpha만 사용했다. 

<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:toYDelta="0%" 
        android:toXDelta="0%" 
        android:fromYDelta="0%" 
        android:fromXDelta="0%" 
        android:duration="150"/>
    <alpha 
        android:duration="150" 
        android:toAlpha="0.8" 
        android:fromAlpha="1.0"/>
</set>

 

 

 

화면 전환에 두 종류가 있음을 파악했다.

1) 액티비티와 액티비티 간 화면 전환

2) 프래그먼트와 프래그먼트 간 화면 전환

 

두 종류의 화면 전환 애니메이션 작업을 진행했다.

 

2) 액티비티와 액티비티 간 화면 전환 작업

앱의 화면 전환 애니메이션에 쓰일 메서드는 Activity의 overridePendingTransition() 이다.

https://developer.android.com/reference/android/app/Activity#overridePendingTransition(int,%20int)

Activity  |  Android Developers

 

앱의 모든 액티비티들은 base 액티비티를 상속받고 있다. base 액티비티에 공통 처리를 하면 수훨하게 작업할 수 있음을 알았다.

 

화면 전환 슬라이드 모드를 담당하는 enum class에 가로 슬라이드, 세로 슬라이드  두 종류를 만들었다. 각 종류에 해당 화면이 진입할 때의 enter animation, exit animation, 해당 화면이 사라질 때의 enter animation, exit animation xml 파일들을 지정해줬다. 액티비티의 onCreate()에 쓸 화면 진입용 animation들을 실행할 overridePendingTransition() 호출 함수와 액티비티의 finish()에 쓸 화면 제거용 animation 실행 overridePendingTrasition() 호출 함수를 생성했다.

 

base 액티비티의 기본 화면 전환 모드는 가로 슬라이드이다. 세로 슬라이드가 필요한 Activity들은 직접 세로 슬라이드 모드로 오버라이드할 수 있게 했다. 세로 슬라이드를 개발자가 직접 손수 지정해야 한다는 불편함이 있기는 하다. 이것까지 자동으로 판단하기에는, 이 프로젝트는 너무나 많은 개발자들의 손을 탔기에 화면의 상단 툴바들은 겉보기에 똑같아 보여도 다양하게 구현되었다. 모든 구현 케이스들을 일일히 파악해가며 탐색하고 슬라이드 모드를 판단하는 코드를 짜는 것이 더 효율이 떨어지고 공수 낭비라는 판단이 들었다.

 

base 액티비티의 onCreate()와 finish()에 생성한 슬라이드 모드의 코드들을 삽입했다.

 

테스트해보니 잘 돌아갔다. 작업이 정말 쉽게 끝났다.

내가 구현한 것과 비슷하게 base 액티비티에 화면 전환 애니메이션을 구현한 글을 찾았다.

https://greedy0110.tistory.com/52

[잡학] Activity 전환 애니메이션 설정하기, overridePendingTransition

 

3) 프래그먼트와 프래그먼트 간 화면 전환

프래그먼트 간 화면 이동을 앱에서 주로 (사실 거의 대부분) Jetpack Navigation으로 하고 있다. 이제껏 navigation graph에서 (디자이너의 검수를 받지 았았던) 화면 전환 애니메이션들을 지정해주고 쓰고 있었다. 여기서는 쉽게 공통처리할 방법을 못 찾았다. navigation graph의 모든 화면 이동 액션을 찾아 손수 하나씩 애니메이션들을 넣어줬다. 😵

navigation controller를 호출해 화면 이동하는 메서드에 화면 전환 애니메이션을 지정해 넣어주도록 공통처리할 수 있다는 걸 알았지만, 앱 내의 모든 navation controller 호출 메서드를 찾아서 공통처리하는 메서드로 수정해줘야는 작업이 필요했다. navigation graph에 애니메이션들을 넣어주는 노동이 더 나아보이고 쉬워보였다.🥺

 

Navigation Graph의 Action에서 Animation 지정하기

<action
    android:id="@+id/action_aFragment_to_bFragment"
    app:destination="@id/bFragment"
    app:enterAnim="@anim/slide_in_right"
    app:exitAnim="@anim/stay_fade_out_for_slide_horizontal"
    app:popEnterAnim="@anim/stay_fade_in_for_slide_horizontal"
    app:popExitAnim="@anim/slide_out_right" />

AFragment에서 BFragment로 진입하고, BFragment가 사라지면 AFragment나 나오는 화면 이동이다.

 

attribute 설명

• enterAnim : 진입하는 화면의 애니메이션. BFragment가 진입할 때의 애니메이션
• exitAnim : 진입하는 화면에 가려지는 화면의 애니메이션. BFragment가 진입할 때의 Afragment의 애니메이션
• popEnterAnim : 이전 화면으로 돌아갈 때, 위에 노출된 화면이 사라질 때의 애니메이션. BFragment가 사라질 때의 애니메이션
• popExitAnim : 이전 화면으로 돌아갈 때 나오는 이전 화면의 애니메이션. AFragment가 등장할 때의 애니메이션

 

프래그먼트 간 화면 이동 애니메이션도 테스트해보니 잘 동작했다.

그런데 테스트를 하다가 몇 가지 문제가 있다는 것을 알았다.

 

4) 문제 발생을 확인

4-1) 액티비티 간 화면 전환 실행 속도가 느림

재현 상황

사용자가 화면 전환을 위해 터치 이벤트를 만들면, 프래그먼트 간 이동은 정말 빠르게 반응해 화면 전환이 이뤄지는데 반해, 액티비티 간 이동은 화면 전환이 이뤄지는 데에 시간이 몇 초 걸렸다. 디자이너가 이 부분을 어떻게 할 수 없냐고 질문했었다. 

 

이슈 발생 원인

이슈가 발생한 테스트 단말 성능이 낮았다. 내 개인폰에서는 액티비티 간 화면 전환이 시작하는 속도와 프래그먼트 간 화면 전환이 시작하는 속도가 비슷했다. 단말에 따라 이슈 발생 여부가 달라질 수 있다는 것을 알았다.

 

예상하는 해결 방법

하드웨어 성능 문제를 소트프웨어로 보안해야 한다면...🤔 액티비티 생성 시 (onCreate()에서) Main Thread의 할 일을 줄여주면 좀 나아지지 않을까 추측만 하고 있는 상태이다. 화면 전환 애니메이션이 없어도 존재하는 이슈이고, 모든 단말에 100% 등장하는 이슈도 아니며, 크리티컬한 이슈가 아니고, 각 액티비티 화면들을 일일히 확인하고 수정해야 하는 공수가 많은 작업이라 우선순위가 확 뒤로 밀렸다. 사실 이 이슈는 다른 이슈로 인해 잊혀졌다.

 

4-2) 액티비티 간 화면 전환 애니메이션, 프래그먼트 간 화면 전환 애니메이션의 차이가 있음

재현 이슈

액티비티 간 화면 전환 애니메이션의 fade in, fade out과 프래그먼트 간 화면 전환 애니메이션의 fade in, fade out이 다르다는 걸 확인했다. 분명 다른데 무엇이 다른 건지 바로 알 수가 없어서 고민하다가 알게 됐다. 

 

이슈 발생 원인

액티비티가 fade in, fade out할 때의 배경색은 검정색인데, 프래그먼트가 fade in, fade out 할 때의 배경색은 흰색이었다. 검정색 바탕에서 투명도가 조절되는 것과 흰 색 바탕에서 투명도가 조절되는 것은 정말 다른 것이었다.

 

구글의 대응을 찾음

구글도 이 부분에 대해서 알았는지, Android 13부터 화면 전환 애니메이션의 배경색 지정 기능이 등장했다.

 

• 액티비티 화면 전환용 백그라운드 색 지정

https://developer.android.com/reference/android/app/Activity#overridePendingTransition(int,%20int,%20int)

Activity  |  Android Developers

 

• xml 파일에서 백그라운드 색 지정

공식 문서를 보면, 앱에서 쓰고 있는 애니메이션은 뷰 애니메이션이다. 뷰 에니메이션 중에서도 트윈 애니메이션이다.

https://developer.android.com/guide/topics/resources/animation-resource?hl=ko#View

애니메이션 리소스  |  Android 개발자  |  Android Developers

 

내 눈에 띄인 것은 이것이다.

https://developer.android.com/guide/topics/resources/animation-resource?hl=ko#Tween

 

https://developer.android.com/guide/topics/resources/animation-resource?hl=ko#Tween

Animation 클래스에 배경색 지정 메서드 및 attribute가 있는지 확인해 봤다.

있다!

Animation의 android:backdropColor

https://developer.android.com/reference/android/view/animation/Animation?hl=ko#attr_android:backdropColor

Animation  |  Android Developers

https://developer.android.com/reference/android/view/animation/Animation?hl=ko#attr_android:backdropColor

요 related methods의 setBackropColor를 보면

https://developer.android.com/reference/android/view/animation/Animation?hl=ko#setBackdropColor(int)

Animation  |  Android Developers

https://developer.android.com/reference/android/view/animation/Animation?hl=ko#setBackdropColor(int)

Android 13부터 적용된다. 

 

디자이너에게 권장한 해결 방법

타협안들을 제시할 수 밖에 없었다.

1] Android 12 이하 단말들의 액티비티 간 fade in, fade out 애니메이션과 프레그먼트간 fade in, fade out 애니메이션의 통일은 포기하고, Android 13 이상 단말부터 배경색을 지정해 fade in, fade out 애니메이션을 통일하자

2] fade in, fade out 애니메이션을 쓰지 말자

 

4-3) 프래그먼트 간 화면 전환 애니메이션이 프래그먼트의 라이프사이클에 영향을 줌

재현 상황

서비스 상 최신 데이터를 계속 갱신해 사용자에게 보여주는 것이 중요하다. 그래서 프래그먼트 화면들이 다른 화면에 갔다가 돌아와서 데이터 갱신을 발생시키는 화면들이 있다. 애니메이션을 적용하고 나서 이런 최신 데이터 갱신이 제대로 이뤄지고 있지 않음을 알았다. 이건 진짜 기능에 영향을 주는 이슈라서 중요하게 생각했다. 

 

이슈 발생 원인

애니메이션 적용 전에는, 해당 프래그먼트 위로 다른 프래그먼트가 올라와 백스택으로 빠지면, 프래그먼트의 view가 destroyed 됐다. onViewDestroyed()가 호출되는 것이다. 위에 올라가 있던 프래그먼트가 사라지면서 다시 노출된 프래그먼트는 view를 다시 생성한다. onViewCreated()가 호출되고, 데이터 갱신 코드는 이 onViewCreated() 안에 있다. 

애니메이션을 적용하고 나서는 해당 프래그먼트 위로 다른 프래그먼트가 올라와도 프래그먼트이 view가 destroyed 되지 않는 것을 확인했다. onViewDestroyed()가 호출되지 않았다. 위에 올라가 있던 프래그먼트가 사라지면서 프래그먼트는 그대로 노출되었다. view를 다시 생성하지 않으니 onViewCreated()가 호출되지 않았고 그러다보니 데이터 갱신도 이뤄지지 않은 것이었다.

이제는, 애니메이션의 어느 설정값에 문제가 있어 원래 프래그먼트의 lifecycle에 영향을 주는지 테스트삽질을 하며 찾아낼 차례였다. 여러 시도 끝에 찾아냈다.

화면 전환이 발생할 때, 화면 전환 애니메이션이 하나만 일어나는 것이 아니다. 진입하는 화면은 진입하는 애니메이션이 동작하고, 사라지는 화면들은 그에 맞는 애니메이션이 동작한다. 두 애니메이션의 duration 시간 값이 다르면(디자이너와 같이 설정한 애니메이션은 가려지는 가려지는 화면 애니메이션의 duration이 노출되는 화면의 duration보다 길었다) 가려지는 프래그먼트 화면의 lifecycle이 영향을 받는 것이었다.

 

해결 방법

디자이너에게 이 문제를 공유해 동시에 일어나는 애니메이션들의 duration 값들을 통일했다.

 

5) 디자이너가 interpolator 삽입을 원함

디자이너가 애니메이션에 interpolator 삽입을 원했다. 

 

요 포스트에서 여러 interpolator를 구별할 수 있었다.

https://gus0000123.medium.com/android-animation-interpolar-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-8d228f4fc3c3

Android Animation Interpolator 구현하기

 

디폴트 interpolator 삽입

https://developer.android.com/guide/topics/resources/animation-resource#Interpolators

애니메이션 리소스  |  Android 개발자  |  Android Developers

안드로이드 디벨로퍼스 공식 문서에 디폴트 interpolator들에 대해서 설명해놓았다.

디폴트 interpolator 삽입 코드 자체는 간단했다.

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:fromYDelta="100%"
    android:toXDelta="0%" />

interpolator 라는 attribute를 쓰면된다. 그런데 그 어떤 디폴트 interpolator를 넣더라도 육안으로 변화를 감지하기 어려웠다. 나랑 디자이너 둘 다 이게 interpolator가 적용된 게 맞는지 계속 갸우뚱거리며 테스트했었다.🤷‍♀️🤷‍♂️

 

커스텀 interpolator 삽입

디폴트 interpolator로는 변화를 느낄 수가 없어서, 내가 interpolator attribute를 제대로 쓴 게 맞나 하는 의심이 들었다. 그래서 커스텀 interpolator를 작성해 사용해보기로 했다.

 

https://developer.android.com/guide/topics/resources/animation-resource#custom-interpolators

애니메이션 리소스  |  Android 개발자  |  Android Developers

커스텀 interpolator에 대한 설명도 공식 문서에 잘 나와있다.

내가 짠 엄청 간단한 custom accelerate interpolator.

<?xml version="1.0" encoding="utf-8"?>
<accelerateInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:factor="2"/>

적용해 보니 결과는 성공적이었다. 변화가 육안으로 보였다. 내가 interpolator attribute를 잘 쓰고 있던게 맞았다는 것을 요 커스텀 interpolator 덕분에 확인했다. 커스텀 interpolator로 디자이너가 원하는 설정이 가능할 것 같다고 전했을 때 디자이너가 좋아했다. 물론, 제한이 있기는 했다.

https://developer.android.com/guide/topics/resources/animation-resource#custom-interpolators

디자이너가 정말 손보고 싶어 했던 interpolator가 accelerateDecelerateInterpolator 였는데, 이 친구는 건들 수 있는 attribute가 없다. 그럼 어떻게 anim xml 파일로 custom interpolator를 만들라는 것인가? 디자이너에게 이 친구의 커스텀 버전은 내가 만들 수 없다는 슬픈 소식도 전했다.

 

결과

이런 여정을 거치며 왔다. 화면 전환 애니메이션 적용의 마무리 단계에 거의 다다랐다고 생각했는데 결국에는 애니메이션 적용을 하지 않는 것으로 결정이 났다. 이런 결정이 난 것이 기술적인 이슈 때문(나 때문)은 아니었다. 디자이너는 그동안 같이 머리 싸맨 시간들을 아쉬워하기는 했는데, 어쩔 수 있나. 난 공부하는 과정이었으니 나쁘지는 않았다 🙃