화면에서 객체의 위치를 변경해야 하는 경우가 자주 있습니다. 이러한 경우는 백그라운드에서 수행되는 일부 처리 작업에 대한 사용자의 상호작용 때문에 발생하기도 합니다. 객체 위치를 업데이트하면 한 영역에서 다른 영역으로 깜빡임이 발생하므로 이 방식 대신 애니메이션을 사용하여 객체를 시작 위치에서 끝 위치로 이동해야 합니다.
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)에 도입된 새로운 보간 유형입니다. 이 값은 베지에 곡선 또는 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