[Android/Kotlin] 간단한 Animation Transition 구현하기

요즘 다양한 인터렉션에 대해 관심이 생겨 찾아보던 도중 다음과 같은 Animation을 만드는 방법에 대해 알게 되었습니다 !

AcitivityOptions의 makeScenceTransitionAnimation() 을 이용하여 Animation Transition을 하는 방법에 대해 적어보겠습니다.

 

아래와 같이 간단한 Animation도 가능하지만 RecyclerView에도 Animation Transition을 적용해 볼 수 있을 것 같습니다 : )

다음 포스팅에서는 RecyclerView에 Animation Transition 적용하는 방법에 대해 써보도록 하겠습니다 !

 

 

 

 

📌 Styles 추가해주기

해당 Animation Transition을 적용하려면 Style에 "android:windowActivityTransitions"을 추가해주어야 합니다!

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowActivityTransitions">true</item>
    </style>

 

📌  IntroActivity.xml 

Animation 전의 화면을 IntroActivity 로 하여 만들어보았습니다.

CircleImageView 라이브러리를 활용하여 ImageView 하나와 TextView 하나를 배치하였습니다.

한 화면에 너무 많은 애니메이션이 들어가게 되면 정신없이 보일 수도 있기 때문에 저는 ImageView / TextView 1개만 배치했습니다.

 

✔️ 동그란 이미지 커스텀 뷰 라이브러리를 사용하시려면 !?

hdodenhof/CircleImageView

- Gradle에 아래 코드를 작성해주시면 됩니다 : )

 //동그란 이미지 커스텀 뷰 라이브러리 : https://github.com/hdodenhof/CircleImageView
implementation 'de.hdodenhof:circleimageview:3.1.0'

 

 

✔️ AnimationView에 android:transitionName = "" 추가해주기

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.IntroActivity"
    android:padding="30dp"
    android:background="@color/colorYellow">

    <RelativeLayout
        android:padding="10dp"
        android:id="@+id/rl_intro"
        android:layout_centerInParent="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorWhite"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="140dp"
            android:layout_height="140dp"
            android:src="@drawable/profileimg"
            android:layout_centerHorizontal="true"
            android:transitionName="imgTransition"
            android:id="@+id/img_profile_intro"
            app:civ_border_width="1dp"
            app:civ_border_color="@color/colorYellow"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/txt_name_intro"
            android:transitionName="nameTransition"
            android:layout_below="@id/img_profile_intro"
            android:layout_centerHorizontal="true"
            android:text="yuna kim"
            android:textStyle="bold"
            android:textSize="20sp"
            android:textColor="@color/colorBlack"
            android:layout_marginTop="10dp"/>

    </RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 

📌 MainActivity.xml

Animation 후의 화면인 MainActivity에 transitionName과 동일한 View를 구성해주었습니다.

애니메이션이 매끄러우려면 동일한 화면과내용으로 구성되어야 할 거 같아서 동일한 ImageView와 TextView를 만들었습니다.

이때 주의하실점은 IntroActivityxml 과 동일한 이름으로 transitionName을 지정해줘야합니다!!

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:id="@+id/cl_profile"
        android:padding="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/profileimg"
            android:id="@+id/img_profile"
            app:civ_border_width="1dp"
            android:transitionName="imgTransition"
            app:civ_border_color="@color/colorYellow"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>

        <TextView
            android:id="@+id/txt_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="yuna kim"
            android:textColor="@color/colorBlack"
            android:textSize="20sp"
            android:textStyle="bold"
            android:transitionName="nameTransition"
            android:layout_marginLeft="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toRightOf="@id/img_profile"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

📌 AcitivityOptions.makeScenceTransitonAnimation() 적용하기

위와 같이 IntroActivity(애니메이션 전 화면) 과 MainActivity(애니메이션 후 화면)을 transitionName을 동일하게 View를 구성해주었다면, Intent를 통해 IntroActivity -> MainActivity 화면 전환이 필요합니다!

이때 AcitivityOptions.makeScenceTransitonAnimation()을 이용하여 Intent에 Bundle로 같이 전달해줍니다.

val Pair1 = UtilPair.create<View,String>(img_profile_intro,"imgTransition")
val Pair2 = UtilPair.create<View,String>(txt_name_intro,"nameTransition")

Pair를 만들때, (ImageView / TextView id , transitionName)으로 만들어 주시면 됩니다!

rl_intro.setOnClickListener {
       val intent = Intent(this, MainActivity::class.java)

       var options : ActivityOptions = ActivityOptions.makeSceneTransitionAnimation(this@IntroActivity,Pair1,Pair2)
       startActivity(intent, options.toBundle())
}

 

 

 

아주 간단하게 Animation을 적용하는 방법을 소개해드렸습니다 : )

다음 포스팅에는 TransitionAnimation을 RecyclerView에 적용하는 방법에 대해 포스팅해보도록 하겠습니다 !