[Android] Animation 정리

안드로이드에서 애니메이션을 만드는 방법이 여러가지가 존재하는데, 복합적으로 사용하면 다양한 애니메이션을 연출 할 수 있습니다.

 

Translate 애니메이션

translate 애니메이션은 X, Y축으로 이동하게 하는 효과를 줍니다.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromYDelta="50%"
        android:repeatCount="infinite"
        android:repeatMode="reverse"
        android:fillAfter="true"
        android:toYDelta="-100%" />
</set>

속성	설명	예시
fromXDelta	X축 시작 지점. % 단위로 설정한다.	0%p -> 현재 view의 위치
toXDelta	X축 도착 지점. % 단위로 설정한다.	100%p -> 대상만큼 오른쪽 이동
fromYDelta	Y축 시작 지점. % 단위로 설정한다.	0%p -> 현재 view의 위치
toYDelta	X축 도착 지점. % 단위로 설정한다.	100%p -> 대상만큼 오른쪽 이동
duration	애니메이션 시간. 단위는 밀리초	2500 -> 2.5초동안 지속
repeatMode	반복할 경우 반복 모드. restart, reverse 모드가 있다.	restart-> 끝나면 처음부터 시작, reverse 끝나면 맨마지막부터 reverse하여 시작
repeatCount	반복할 횟수.	1-> 한번 반복. -1 -> 무한 반복.
startOffset	애니메이션 시작까지 대기 시간	값만큼 대기
fillAfter	애니메이션이 끝난 이후 Delta의 위치를 유지 할 것인지. Boolean 값	true -> 원위치로 돌아오지 않음

만약, fillAfter 속성을 넣어도 적용이 안된다면 set태그 안에 넣어주도록 합시다.

 

위와 같이 좌측 상단이 (0,0) 입니다.

 

%로 할 경우,

X축 기준으로 -100%가 되면 Activity가 좌측으로 완전히 사라집니다.

X축 기준으로 100%가 되면 Activity가 우측으로 완전히 사라집니다.

단, 위 그림에서 Y축은 부등호가 반대로 그림이 그려져있습니다. Y축으로 갈 수록 +이니 고려해서 보면 될 것 같습니다.

Rotate 애니메이션

rotate 애니메이션을 사용하면 View를 회전하는 효과를 줄 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="300"
        android:repeatMode="restart"
        android:repeatCount="infinite"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        />
</set>

속성	설명
fromDegree	회전 시작 각도
toDegree	회전 끝 각도
pivotX	회전할 때 중점의 X 좌표. %로 적은 경우에는 비율로 작동하고 숫자로 적으면 pixel로 취급한다.
pivotY	회전할 때 중점의 X 좌표. %로 적은 경우에는 비율로 작동하고 숫자로 적으면 pixel로 취급한다.

alpha 애니메이션

alpha 애니메이션은 뷰의 '투명도를 변경'하는 기능을 합니다.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="300"
        android:fromAlpha="1.0"
        android:repeatCount="infinite"
        android:repeatMode="reverse"
        android:toAlpha="0.5" />
</set>

alpha 속성

속성	설명
fromAlpha	시작 투명도 값
toAlpha	끝 투명도 값

scale 애니메이션

scale 애니메이션은 뷰의 '축소/확대'하는 기능을 합니다.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="300"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="infinite"
        android:repeatMode="reverse"
        android:toXScale="1.5"
        android:toYScale="1.5" />
</set>

scale

속성	설명	예시
fromXScale	시작 X 크기 값	1.0 -> 현재 크기
toXScale	끝 X 크기 값	2.0 -> 현재 크기의 2배
fromYScale	시작 Y 크기 값	1.0 -> 현재 크기
toYScale	끝 Y 크기 값	2.0 -> 현재 크기의 2배
pivotX	크기를 늘릴 때 중점의 X 좌표. %로 적은 경우에는 비율로 작동하고 숫자로 적으면 pixel로 취급한다.	50% -> view의 중간
pivotY	크기를 늘릴 때 중점의 X 좌표. %로 적은 경우에는 비율로 작동하고 숫자로 적으면 pixel로 취급한다.	view의 중간

Interpolator

Interpolator는 한글로 보간이라는 뜻입니다.
보간은 두 점을 연결하는 방법을 의미합니다. 여기서 말하는 연결은 궤적을 생성한다는 뜻입니다. 즉, Animation의 value의 시작지점과 종료지점의 두점 사이를 선으로 연결하여 어떠한 효과를 줄 것인지를 정의한 것을 interpolator라고 합니다. (y: -1 ~ +1의 값)

http://inloop.github.io/interpolator/
위 링크에 들어가면 각각의 interpolator에 대한 값을 그래프로 확인하실 수 있습니다.

속성	설명
AccelerateDecelerate	시작시점에 가속했다가 종료시점에 감속합니다.
Accelerate	시작시점에 가속합니다.
Anticipate	종료시점을 지나쳐서 살짝 이동한 이후에 다시 종료시점으로 돌아옵니다.
Bounce	종료시점에 도착한 이후 공이 튀듯이 몇회에 걸쳐 튀어 오릅니다.
Cycle	종료시점에 도착후 다시 시작시점으로 이동하며 이후 다시 종료시점으로 이동합니다.
Decelerate	종료시점에 가속합니다.
Linear(default)	동일한 속도로 시작시점에서 종료시점으로 이동합니다.

적용

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        binding.ivSimple.setOnClickListener {
            val animation = AnimationUtils.loadAnimation(this, R.anim.animate_translate)
            binding.ivSimple.startAnimation(animation)
        }
    }
}

Animator

 

ViewPropertyAnimator

ViewPropertyAnimator를 이용하면 안드로이드에서 제공하는 간단한 애니메이션을 만들 수 있으며 animate() 메소드를 통해서 구현 가능합니다. 단, ViewPropertyAnimator 자체에서 반복기능을 가지고 있지는 않아서 반복시키려면 외부에서 따로 처리를 해주어야 합니다. 애니메이션의 순차처리와 커스터마이징한 애니메이션은 적용할 수 없습니다.

ObjectAnimator

반복동작 등 복잡한 애니메이션을 구현하고 싶은 경우에는 ObjectAnimator를 이용하면 됩니다. ViewProeprtyAnimator에 없는 RepeatCount 속성을 Repeat으로 설정해 주면 반복적으로 실행되는 애니메이션을 만들 수 있습니다.

ValueAnimator

AnimatorSet과의 조합을 통해 가장 커스터마이징한 애니메이션을 만들 수 있고 객체의 속성이 아닌 것에도 애니메이션을 적용할 수 있습니다.

ValueAnimator.ofObject(ArgbEvaluator(), startColor, endColor).apply {
    duration = duration.toLong()
    repeatCount = ObjectAnimator.INFINITE
    repeatMode = ValueAnimator.RESTART
    interpolator = interpolator
    addUpdateListener { animation ->
        // TODO
    }
    start()
}

참고 자료

https://developer.android.com/guide/topics/graphics/prop-animation?hl=ko

속성 애니메이션 개요  |  Android 개발자  |  Android Developers

https://dwfox.tistory.com/26

[Android] Activity 화면 이동 애니메이션 효과 적용하기

https://m.blog.naver.com/PostView.nhn?blogId=tkddlf4209&logNo=220700530627&proxyReferer=https:%2F%2Fwww.google.com%2F

[Android] 안드로이드 애니메이션(Animation)효과 주기 트윈애니메이션(TweenAnimation)

https://tourspace.tistory.com/18

Android 애니메이션#2 - Tweened Animation

https://gus0000123.medium.com/android-animation-interpolar-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-8d228f4fc3c3

Android Animation Interpolator 구현하기

https://www.crocus.co.kr/1690