애니메이션 뷰 이동?

안드로이드 개발을 진행을 하다보면 View을 해당 지점으로 이동해야 하는 일이 가끔식 발생을 합니다.

 

이동하는 방법에서는 여러 방법이 있지만 그 중 대표적인것만 설명을 드리도록 하겠습니다.

 

ObjectAnimator 뷰 위치 이동

ObjectAnimator API로 지정된 재생 시간에 뷰 속성을 변경할 수 있는 간편한 방법을 제공합니다.

 

[예시]

    ObjectAnimator.ofFloat(textView, "translationX", 100f).apply {
        duration = 1000
        start()
    }

첫번째 매개변수는 애니메이션 대상인 View입니다.

두번째 매개변수는 애니메이션 중인 속성입니다. 현재는 translationX이기 때문에 가로로 이동을 합니다.

(translationX , translationY , rotation , rotationX , rotationY , scaleX , scaleY , pivotX ,pivotY)

등등 자세한 내용은 링크를 확인하시면 됩니다.

마지막 매개변수는 애니메이션이 끝나고 마지막 위치 입니다. 여기서는 100f 이기 때문에 오른쪽으로 100만큼 이동합니다.

 

그다음으로 duration을 통해 애니메이션 재생 시간을 지정을 했습니다.

 

ViewPropertyAnimator 뷰 위치 이동

위에 내용과 비슷하게 ViewPorpertyAnimator을 통해서 움직일수가 있습니다.

textView.animate().translationX(100f).apply {
	duration = 2000
}

 

곡선 이동

일반적으로 위에 설명드렸던 내용은 직선을 애니메이션을 통해 뷰위치를 이동하는것입니다.

 

하지만 곡선으로 변경하고 싶은 경우에는 다음과 같이 사용이 가능합니다.

다음과 같이 Path을 사용하는 방법이있습니다.

   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        val path = Path().apply {
            arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true)
        }
        val animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path).apply {
            duration = 2000
            start()
        }
    } else {
        // Create animator without using curved path
    }

 

일반적인 Path관련 함수들도 다 작동을 합니다.

 

따라서 다음도 가능합니다.

val path = Path().apply {
	this.moveTo(it.x, it.y);
	this.quadTo(it.x + 100f , it.y + 100 , it.x + 200, it.y + 200)
}

val animator = ObjectAnimator.ofFloat(it, View.X, View.Y, path).apply {
    duration = 2000
    start()
}

위에서 내용은 moveTo로 마지막 위치인 View x , y 로 이동후

quadTo로 인해서 (x1 , y1 , x2 , y2) 에서 x1 -> x2 로 이동 , y1 -> y2로 이동하는것 입니다.