화면에서 개체의 위치를 변경해야 할 경우가 많습니다. 이러한 경우는 백그라운드에서 수행되는 일부 처리 작업에 대한 사용자의 상호작용 때문에 발생하기도 합니다. 개체 위치를 업데이트하면 영역 위치가 빠르게 전환되는데 이 방식 대신에 애니메이션을 사용하여 개체를 시작 위치에서 끝 위치로 옮길 수 있습니다.
Android에는 화면에서 ObjectAnimator 같은 뷰 개체의 위치를 조정할 수 있는 다양한 방법이 있습니다. 그리고 애니메이션 재생 시간뿐만 아니라 개체를 놓을 끝 위치도 지정할 수 있습니다. 이를 시간 보간과 함께 사용하면 애니메이션 가속과 감속을 조정할 수 있습니다.
ObjectAnimator로 뷰 위치 변경
ObjectAnimator API는 지정된 재생 시간에 뷰 속성을 변경할 수 있는 간편한 방법을 제공합니다. 이 API에는 애니메이션하는 속성 유형에 따라 ObjectAnimator의 인스턴스를 만들 수 있는 정적 메서드가 포함되어 있습니다. 화면에서 뷰 위치를 변경할 때에는 translationX 속성과 translationY 속성이 사용됩니다.
다음은 뷰를 2초 동안 화면 왼쪽에서부터 100픽셀 지점으로 옮기는 ObjectAnimator의 예제입니다.
Kotlin
ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
duration = 2000
start()
}
자바
ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setDuration(2000);
animation.start();
변환 값이 부동소수점이어야 하기 때문에 이 예제에는 ObjectAnimator.ofFloat() 메서드가 사용됩니다. 첫 번째 매개변수는 애니메이션할 뷰입니다. 두 번째 매개변수는 애니메이션 중인 속성입니다. 뷰를 가로로 옮겨야 하기 때문에
translationX 속성이 사용됩니다. 마지막 매개변수는 애니메이션의 끝 값입니다. 이 값이 100이기 때문에 화면 왼쪽을 기준으로 많은 픽셀에 해당할 것입니다.
그다음 메서드는 애니메이션의 재생 시간을 밀리초 단위로 지정합니다. 이 예제에서 애니메이션은 2초(2000밀리초)간 실행됩니다.
마지막 메서드로 인해 애니메이션이 실행되어 화면에서 보기의 위치가 업데이트됩니다.
ObjectAnimator 사용에 관한 자세한 내용은 ObjectAnimator로 애니메이션을 참조하세요.
곡선 모션 추가
ObjectAnimator 사용 방법은 간편하지만 기본적으로 이 개체는 시작 점과 끝 점을 잇는 직선을 사용하여 뷰 위치를 변경합니다. 머티리얼 디자인은 애니메이션 시간은 물론, 개체의 화면상 공간 움직임에도 곡선을 사용합니다. 곡선 모션을 사용하면 앱에 질감을 더 부여할 수 있고 애니메이션을 좀 더 흥미롭게 만들 수 있습니다.
PathInterpolator 사용
PathInterpolator 클래스는 Android 5.0(API 21)에 새로 도입된 보간기입니다. 이 클래스는 Bézier 곡선 또는 Path 개체를 바탕으로 합니다. 이 보간기는 생성자 인수를 사용하여 지정된 기준점 (0,0) 및 (1,1)과 제어점으로 모션 커브를 1x1 정사각형 안에 지정합니다. PathInterpolator를 만드는 한 가지 방법은 Path 개체를 만들고 그 개체를 PathInterpolator에 제공하는 것입니다.
Kotlin
// arcTo() and PathInterpolator only available on API 21+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
val path = Path().apply {
arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true)
}
val pathInterpolator = PathInterpolator(path)
}
자바
// arcTo() and PathInterpolator only available on API 21+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Path path = new Path();
path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true);
PathInterpolator pathInterpolator = new PathInterpolator(path);
}
또한 경로 보간기를 XML 리소스로 정의할 수도 있습니다.
<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:controlX1="0.4"
android:controlY1="0"
android:controlX2="1"
android:controlY2="1"/>
만든 PathInterpolator 개체는 Animator.setInterpolator() 메서드에 전달할 수 있습니다. 그러면 애니메이터는 시작 시 보간기를 사용하여 시간 또는 경로 곡선을 확인하게 됩니다.
Kotlin
val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
interpolator = pathInterpolator
start()
}
자바
ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setInterpolator(pathInterpolator);
animation.start();
경로 정의
ObjectAnimator 클래스에는 경로와 함께 두 개 이상의 속성을 한 번에 사용하여 경로를 따라 좌표를 애니메이션할 수 있는 새로운 생성자가 있습니다. 예를 들어 다음 애니메이터는 뷰의 X 및 Y 속성을 애니메이션하기 위해 Path 개체를 사용합니다.
Kotlin
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
}
자바
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Path path = new Path();
path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true);
ObjectAnimator animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
animator.setDuration(2000);
animator.start();
} else {
// Create animator without using curved path
}
다음은 원호 애니메이션의 모습입니다.
자체 시간이나 경로 곡선을 만들지 않는 경우 시스템은 머티리얼 디자인 사양에서 세 가지 기본 곡선에 사용할 수 있는 다음과 같은 XML 리소스를 제공합니다.
@interpolator/fast_out_linear_in.xml@interpolator/fast_out_slow_in.xml@interpolator/linear_out_slow_in.xml