애니메이션으로 뷰 이동

화면에서 개체의 위치를 변경해야 할 경우가 많습니다. 이러한 경우는 백그라운드에서 수행되는 일부 처리 작업에 대한 사용자의 상호작용 때문에 발생하기도 합니다. 개체 위치를 업데이트하면 영역 위치가 빠르게 전환되는데 이 방식 대신에 애니메이션을 사용하여 개체를 시작 위치에서 끝 위치로 옮길 수 있습니다.

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