RecyclerView Item에 Animation 주기

프로젝트 중 리스트가 처음 항목들이 나타날 때
우측에서 차례대로 등장하는 모션을 구현해야 해서
layoutAnimation을 이용해 RecyclerView의 Item에 동작 모션을 주었다.

 

각 Item들에 지정할 Animation 생성

res/anim/anim_list_slide_in_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500">

    //위치
    <translate		
        android:fromXDelta="200%"  //시작점 위치 		//200% = 2배
        android:toXDelta="0"       //목표 위치			 //기존 init 위치
        android:interpolator="@android:anim/decelerate_interpolator" />

    //투명도
    <alpha			
        android:fromAlpha="0"      
        android:toAlpha="1"
        android:interpolator="@android:anim/decelerate_interpolator" />

    //크기
    <scale			
        android:fromXScale="105%"  
        android:fromYScale="105%"
        android:toXScale="100%"
        android:toYScale="100%"
        android:pivotX="50%"		//X좌표 중심점
        android:pivotY="50%"
        android:startOffSet="200"   //시간 200Mills
        android:interpolator="@android:anim/decelerate_interpolator" />

</set>

 

RecyclerView에 지정할 LayoutAnimation 생성

res/anim/anim_slide.xml

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/anim_list_slide_in_right"
    android:animationOrder="normal"
    android:delay="20%" />

 

 

RecyclerView에 LayoutAnimation 지정

Programmatically

val anim = AnimationUtils.loadLayoutAnimation(requireContext(), R.anim.anim_quiz_slide)
recentRecycler.layoutAnimation = anim

or xml

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recent_recycler"
    android:layout_width="match_parent"
    android:layout_height="@dimen/common_100dp"
    android:layout_marginTop="@dimen/common_8dp"
    android:layout_marginBottom="@dimen/common_15dp"
    android:clipToPadding="false"
    
    android:layoutAnimation="@anim/anim_quiz_slide"  // 지정
    
    android:paddingStart="@dimen/common_30dp"
    android:paddingEnd="@dimen/common_30dp"
    app:layout_constraintBottom_toTopOf="@id/exit_btn"
    app:layout_constraintTop_toBottomOf="@id/textView10" />

임시 데이터로 구성해 본 결과 animation이 우측에서 좌측 모션이 잘 적용되었다.

 

문제점

그런데 실제로 LiveData로 구현해야 하는 데이터를 구성해 animation을 적용해 보니 translate가 먹지를 않았다.

구글링을 좀 해본 결과 RecyclerView의 scheduleLayoutAnimation() 속성을 지정해주라고 한다.

recentRecycler.scheduleLayoutAnimation()

Data가 변경될 때 notifyDataSetChanged() 등을 호출하면 애니메이션이 취소되므로 RecyclerView에서 애니메이션을 다시 적용해야 한다고 한다.

Schedules the layout animation to be played after the next layout pass of this view group. This can be used to restart the layout animation when the content of the view group changes or when the activity is paused and resumed.

 

지정해 주니 원하는 대로 Animation이 잘 나온다.

 

RecyclerView Item Animation
https://stackoverflow.com/questions/26724964/how-to-animate-recyclerview-items-when-they-appear
https://stackoverflow.com/questions/46681597/recycler-view-item-enter-animation-not-working