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
