[안드로이드] 애니메이션을 사용하여 액티비티 시작하기

오늘은 애니메이션을 사용하여 현재 액티비티에 있는 이미지를 공유하면서 다음 액티비티를 실행하는 법을 정리 해보겠습니다.

우선 이 기능을 사용하려면 Android 5.0(API 21) 이상이어야 합니다. 이전 버전과 호완성을 유지하려면 아래처럼 버전을 확인하는 코드를 작성하셔야 합니다.

// Check if we're running on Android 5.0 or higher
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        // Apply activity transition
    } else {
        // Swap without transition
    }

그 다음 트랜지션을 설정해야 하는데 해당 액티비티가 사용하는 theme에서 스타일을 정의할때 android:windowActivityTransitions 를 true로 설정해주셔야 합니다. 추가로 들어가기, 나가기 및 공유 요소 전환도 정의 할수 있습니다. 저는 들어갈때 이미지뷰를 공유하는 기능만 필요하기 때문에 아래와 같이 정의 했습니다.

    <style name="NoActionBar" parent="Theme.AppCompat.NoActionBar">
        <!-- enable window content transitions -->
        <item name="android:windowActivityTransitions">true</item>

        <!-- specify shared element transitions -->
        <item name="android:windowSharedElementEnterTransition">
            @transition/product_detail_transition</item>
    </style>

이 예에서 @transition/product_detail_transition은 아래와 같이 정의했습니다.

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <autoTransition android:duration="@integer/animation_duration"/>
</transitionSet>

이제 첫번째 액티비티로 가셔서 다음과 같이 두 액티비티 모두에서 공통으로 사용될 트랜지션 이름을 설정하여 주시고 ActivityOptions.makeSceneTransitionAnimation() 함수를 사용해서 액티비티를 시작하시면 됩니다.

private fun startActivityWithAnimation(product: ProductListItem) {
      val intent = Intent(mContext, ProductDetailActivity::class.java)
      intent.putExtra(mContext.getString(R.string.thumb_img_url_intent_param), product.thumbnail_520)

      val activityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(
          activity,
          mImageViewThumb,
          트랜지션 이름
      )
      startActivity(intent, activityOptions.toBundle())
}

마지막으로 두번째 액티비티에서 View.setTransitionName() 함수를 사용하여 트랜지션 이름을 설정해준뒤 이미지뷰에 이미지를 할당해주면 됩니다. 만약에 두번째 액티비티를 완료할때 전환 애니메이션을 역전시키려면 Activity.finish()가 아니라 Activity.finishAfterTransition() 함수를 호출해야 합니다.

private fun applyTransition() {
        mImageViewThumb = findViewById(R.id.image_view_prod_detail_thumb)
        ViewCompat.setTransitionName(mImageViewThumb, 트랜지션 이름)
        if (mThumbImgUrl != null) {
            Picasso.get().load(mThumbImgUrl).noFade().into(mImageViewThumb)
        }
}