디지털라이프

scale: 뷰의 크기을 조절하여 심장이 뛰는 것처럼 커졌다  작아졌다하는 것과 같은 효과를 낼 수 있다.

android:duration 은 애니메이션 적용시간이며, 밀리세컨드 단위이다.
android:fromXScale 은 X축의 시작시점 크기이다.
android:fromYScale 은 Y축의 시작시점 크기이다.
android:pivotX 은 X축 중심점 좌표이다.
android:pivotY 은 Y축 중심점 좌표이다.
android:toXScale 은 X축의 종료시점 크기이다.
android:toYScale 은 Y축의 종료시점 크기이다.

X축는 수평방향, Y축는 수직방향이다.

1.0은 변경이 없다는 의미이다.

res/anim 폴더에 bounce_circle.xml 로 아래와 같이 작성한다.

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="0.6"
    android:toYScale="0.6" />

위에서 작성한 애니메이션을 적용해 반복해서 바운스 효과를 내는 코드

val aniBounce = AnimationUtils.loadAnimation(mContext, R.anim.bounce_circle)
val interpolator = BounceInterpolator()
aniBounce.interpolator = interpolator
aniBounce.repeatCount = Animation.INFINITE
aniBounce.repeatMode = Animation.REVERSE
        
imgCircleBounce.startAnimation(aniBounce)

interpolator: 애니메이션 효과를 가속하거나 감속 또는 반복하는등 여러가지 효과를 낼 수 있다. BounceInterpolator를 주어서 심장이 뛰는 것과 같은 효과를 주었다.

참고: https://developer.android.com/guide/topics/resources/animation-resource#Interpolators

repeatCount는 반복회수인데 Animation.INFINITE(-1)로 설정하면 무한 반복이다. 또는 양의 정수로 설정한다. 0은 반복없음으로 한번 효과를 내고 끝나며, 1은 효과를 한번더 반복하는 것이다.

repeatMode는 repeatCount가 INFINITE여야 한다. 반복할때 애니메이션을 역방향으로 적용하려면 REVERSE를, 처음 위치부터 다시 적용하려면 RESTART를 적용한다.

fillAfter: 애니메이션 종료후에 상태를 설정한다. true는 종료후에 변형을 유지한다. false는 종료후에 변형을 유지하지 않고  원래대로 복원한다.

fillBefore: 애니메이션 시작전에 상태를 설정한다. true는 시작전에 변형을 적용한다. false는 시작전에 변형을 적용하지 않는다.

translate : https://lumasca.tistory.com/609

translate: 뷰를 왼쪽, 오른쪽, 위, 아래로 이동하는 효과를 낸다.

 fromXDelta : X축의 시작 위치
 toXDelta : X축의 종료 위치
 fromYDelta : Y축의 시작 위치
 toYDelta : Y축의 종료 위치 

설정 값의 범위

-자신을 기준으로 -100 ~ 100 의 '%'로 끝나는 값: '100%'

-상위요소를 기준으로 -100 ~ 100 의 '%p'로 끝나는 값: '100%p'

-부동소수점(절대값)

이미지뷰가 위아래로 반복해서 움직이면서 오른쪽에서 왼쪽으로 부모 뷰의 절반 정도 이동했다가 다시 오른쪽으로 이동해서 멈추는 효과

투명도를 적용한 이미지뷰를 바운스를 시킬 것이고

해당 이미지뷰를 감싼 레이아웃은 수직으로 움직을 것이다. height가 wrap_content이다.

그리고 수직으로 움직이는 레이아웃을 감싸서 수평으로 움직일 것이다. width가 wrap_content이다.

최상위 레이아웃은 gravity 은 설정하지 않는다.

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

        <LinearLayout
            android:id="@+id/layoutCardCircleHorz"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            >
        <RelativeLayout
            android:id="@+id/layoutCardCircleVert"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical">

            <ImageView
                android:id="@+id/imgCircle"
                android:layout_width="44dp"
                android:layout_height="44dp"
                android:layout_centerInParent="true"
                android:src="@drawable/btn_login_bn"
                />

            <ImageView
                android:id="@+id/imgCircleBounce"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:alpha="0.2"
                android:layout_centerInParent="true"
                android:background="@drawable/circle_yellow" />
        </RelativeLayout>
    </LinearLayout>
    </RelativeLayout>

repeatCount는 반복회수인데 Animation.INFINITE(-1)로 설정하면 무한 반복이다. 또는 양의 정수로 설정한다. 0은 반복없음으로 한번 효과를 내고 끝나며, 1은 효과를 한번더 반복하는 것이다.

repeatMode는 repeatCount가 INFINITE여야 한다. 반복할때 애니메이션을 역방향으로 적용하려면 REVERSE를, 처음 위치부터 다시 적용하려면 RESTART를 적용한다.

//위아래 반복 애니메이션
val animUpDown = TranslateAnimation(
                Animation.RELATIVE_TO_PARENT,0f,
                Animation.RELATIVE_TO_PARENT, 0f,
                Animation.RELATIVE_TO_PARENT, -0.2f,
                Animation.RELATIVE_TO_PARENT, 0.2f)
animUpDown.duration = 300
animUpDown.repeatCount = Animation.INFINITE
animUpDown.repeatMode = Animation.REVERSE

layoutCardCircleVert.startAnimation(animUpDown)

//왼쪽으로 이동 애니메이션
val aniLeft = TranslateAnimation(
                TranslateAnimation.RELATIVE_TO_PARENT, 0f,
                TranslateAnimation.RELATIVE_TO_PARENT, -0.4f,
                TranslateAnimation.RELATIVE_TO_PARENT, 0f,
                TranslateAnimation.RELATIVE_TO_PARENT, 0f)
//RELATIVE_TO_PARENT(상위요소기준), RELATIVE_TO_SELF(자신), ABSOLUTE(절대값)
aniLeft.duration = 2000 //애니메이션 적용시간

//오른쪽 이동 애니메이션
val aniRight = TranslateAnimation(
                TranslateAnimation.RELATIVE_TO_PARENT, -0.4f,
                TranslateAnimation.RELATIVE_TO_PARENT, 0f,
                TranslateAnimation.RELATIVE_TO_PARENT, 0f,
                TranslateAnimation.RELATIVE_TO_PARENT, 0f)
        aniRight.duration = 2500
        
        aniLeft.setAnimationListener(object : Animation.AnimationListener{
            override fun onAnimationEnd(animation: Animation?) {
                //왼쪽이동이 끝나면 오른쪽으로 이동 애니 시작
                layoutCardCircleHorz.startAnimation(aniRight)
            }

            override fun onAnimationStart(animation: Animation?) {

            }

            override fun onAnimationRepeat(animation: Animation?) {

            }
        })

        aniRight.setAnimationListener(object: Animation.AnimationListener{
            override fun onAnimationEnd(animation: Animation?) {
                //오른쪽 이동이 끝나면 위아래 반복 중지
                layoutCardCircleVert.clearAnimation()
                //바운스 시작
                imgCircleBounce.startAnimation(aniBounce)
            }

            override fun onAnimationStart(animation: Animation?) {

            }

            override fun onAnimationRepeat(animation: Animation?) {

            }
        })
//왼쪽 이동 애니 시작        
layoutCardCircleHorz.startAnimation(aniLeft)

scale이용한 바운스 효과: https://lumasca.tistory.com/610