스토리 안드로이드 앱의 화면 전환 애니메이션 적용기

스토리 안드로이드 앱의 화면 전환 애니메이션 적용기

 

1. Shared Elements Transition이란?

화면과 화면의 공유요소를 통해 하나의 액티비티에서 동작하는 듯한 좀더 자연스러운 사용자 경험을 줄 수 있다.

shared와 다른 효과의 차이는 영상을 통해 비교하여 확인이 가능하다(아래 링크있음)

 

 

첫번째 View1을 클릭하여 ActivityB에 전달한 후 View2로 전달하여 View1과 동일한 위치 및 크기를 설정하여

애니메이션을 시작한다. 마지막으로 ActivitiyC에서 View2의 원래위치 크기로 돌아가여 실행한다.

 

 

2. 적용 방법(Android 5.0이상부터 사용가능)

 

테마의 스타일을 정의할 때 Transition을 추가

sharedElementEnterTransition이 ActivityB에 대한 효과이고 sharedElementExitTransition은 AcitivityA에 대한 효과이다.

 

 

 스타일 테마 등록 후 -> 화면 전환에 사용되는 코드 작성

 

 

위에서 사용한 makeSceneTransitionAnimation의 함수 원형이다.

 

 

스타일 정의(MoveTransition Set)

각각 4가지 transitionSet의 의미:

위치와 크기 변경 / 배열과 회전을 변경 / 지정된 영역 변경 / 이미지 크기 및 배열 변경

 

 

 

마지막으로 이러한 형식으로 transition을 적용하면 된다.

 

 

 

 

3. 카카오스토리 적용 사례

 

FaceTransition은 얼굴 위주로 크롭하여 보여주는 기능(아래 링크 영상참조)-> 끊기지 않고 부드러워짐(매트릭스의 값이 달라지는 것을 막아줌)

 

 

 

 

현재 프레임을 캡쳐하여 비트맵으로 추출하여 사용한다.

 

 

프로필 진입(원에서 사각형으로 변경)

 

4. 이슈 및 해결

이슈1 -모서리의 라운드 이슈

원인 : 모서리의 라운드로 인하여 자연스럽지 않은 문제가 발생

해결 : 별도의 라운드 애니메이션을 적용한다(RoundTransition 생성)

 

 RoundTransition을 구현하기 위해서는 Transition을 상속받아 구현해야 한다

 

Capture(시작과 종료화면을 캡쳐)->저장했던 Transition value가 파라미터로 전달되어 Animator생성에 사용한다

Capture

 -public void captureStartValues(TransitionValues transitionValues)

 -public void captureEndValues(TransitionValues transitionValues)

Animator

 -public Animator createAnimator(ViewGroup sceneRoot, TransitionValues startValues, TransitionValues endValues)

 

 

이슈2 - 연속클릭 이슈

원인 : 연속 클릭으로 인한 애니메이션 오류(startAcitivty 여러번 호출)

해결 : RxJava를 이용해 클릭 이벤트 흐름 제어

 

지속적으로 이벤트를 받아야 함으로 observer를 생성하고 여러개의 뷰에서 하나의 observable로 클릭이벤트를 전달하고

전달받은 함수를 throttleFirst를 통해 이슈 해결

 

 

이슈3 - 공유 뷰의 생성 지연

원인 : 공유 뷰의 생성 지연으로 애니메이션이 동작하지 못하고 화면 전환

해결 : 화면 전환 지연/ 화면 전환 시작 함수를 사용 

PostponedEnterTransition으로 화면 전환을 멈추고 이미지 로드가 완료되면 다시 함수를 호출해 사용하느 ㄴ형식이다.

 

 

 

이슈4 - 종료 위치 찾지 못하는 이슈

원인 : 종료 애니메이션이 위치를 찾지 못하는 문제

해결 : 공유에 사용한 뷰는 사라지지 않도록 관리(ViewPager adapter의 notifyDataSetChanged()를 쓰지 않고 직접

UI에 접근하여 갱신)

 

 

 

 

---

 

 

포스팅한 내용은 아래 동영상을 참고하여 만들었습니다.

 

 

출처 : if.kakao.com/session/109

if(kakao)2020