Android Shared Elements Transition을 ActivityOptionsCompat.makeSceneTransitionAnimation으로 구현하기

앱들을보면 그림등을 눌러 화면이동될때 그림이 커지면서 다음화면에 적용되는 모습을 본적이 있을것입니다. 이러한 동작은 Shared Element Transtions라고 합니다. Shared Element Transtions는 화면 간에 공유 되는 요소들에 의해서 좀 더 직관적이고 부드러운 연출을 가능하게 합니다.

안드로이드에서는 이런한동작을 하기위해서는 사전작업이 필요합니다. 우선 현재화면과 다음화면에 동일한 종류의 뷰가 필요합니다. 이때 각뷰가 동일한 이름의 transitionName이 있으면xml에서 해줘야 되는 설정은 끝납니다. 이후 ActivityOptionsCompat.makeSceneTransitionAnimation으로 ActivityOptionsCompat을 만들어 액티비티를 실행시킬때 넣어주면 됩니다.

---

적용

private fun openDetail(view: View, cardName: CharSequence) {
    view.transitionName = "sampleName"//현재 화면에 transitionName을 지정하지 않았다며 이런식으로 코드에서 지정할수도 있습니다.
   
    val optionsCompat =
        ActivityOptionsCompat.makeSceneTransitionAnimation(
            this@MainActivity,
            Pair(view, view.transitionName)
        )
    val intent = Intent(this, SecondActivity::class.java)
    startActivity(intent, optionsCompat.toBundle())
}

---

reference
https://developer.android.com/reference/androidx/core/app/ActivityOptionsCompat
https://gamjatwigim.tistory.com/89
https://benstagram.tistory.com/276
https://velog.io/@chc0331/Shared-Element-Transitions