애니메이션과 함께 뷰 이동

화면상의 객체는 사용자 상호작용이나 이동성 때문에 자동으로 처리됩니다 객체의 현재 상태를 깜박이도록 하는 경우 애니메이션을 사용하여 시작 위치에서 끝 위치로 이동합니다.

Android에서 화면에서 뷰 객체의 위치를 변경할 수 있는 한 가지 방법은 ObjectAnimator 사용 원하는 도착 지점을 객체가 안정되도록 할 수 있습니다. 다음과 같은 작업을 할 수 있습니다. 또한 시간 보간기를 사용하여 애니메이션을 적용할 수 있습니다.

ObjectAnimator로 뷰 위치 변경

ObjectAnimator API는 지정된 기간으로 뷰의 속성을 변경하는 방법을 제공합니다. 여기에는 다음에 따라 ObjectAnimator의 인스턴스를 만드는 정적 메서드가 포함되어 있습니다. 지정할 수 있습니다. 보기의 위치를 변경할 때 화면에서 translationX 및 translationY 속성을 사용합니다.

다음은 뷰를 100번 위치로 이동하는 ObjectAnimator의 예입니다. 2초 내에 화면 왼쪽에서부터 2픽셀을 변경합니다.

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를 사용하는 것이 편리하지만 기본적으로 시작점과 끝점 사이의 직선을 따라 이미지를 볼 수 있습니다. 소재 화면상의 물체와 화면 속 물체의 공간적 움직임에 따라 애니메이션을 적용할 수 있습니다. 곡선 모션을 사용하면 앱에 질감이 더해집니다. 애니메이션을 더욱 흥미롭게 만들 수도 있습니다.

자체 경로 정의

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
}

다음은 원호 애니메이션의 모습입니다.

그림 1. 곡선 경로 애니메이션.

Interpolator 이징 곡선의 구현입니다. 자세한 내용은 머티리얼 디자인 문서 를 참조하세요. Interpolator 애니메이션의 특정 값이 계산되는 방식을 있습니다. 시스템은 Material Design 사양:

  • @interpolator/fast_out_linear_in.xml
  • @interpolator/fast_out_slow_in.xml
  • @interpolator/linear_out_slow_in.xml

PathInterpolator 사용

이 PathInterpolator 드림 클래스는 Android 5.0 (API 21)에서 도입된 보간기입니다. 이 것은 베지어 곡선 또는 Path 객체 Android용 머티리얼 디자인 문서 이징 PathInterpolator 사용

PathInterpolator에는 다양한 유형의 베지어 곡선을 기반으로 하는 생성자가 있습니다. 모든 베지어 곡선은 시작점과 끝점이 (0,0) 및 (1,1)에 고정되어 있습니다. 각각 1개의 값으로 사용합니다. 다른 생성자 인수는 베지에 유형에 따름 만들려고 합니다.

예를 들어 이차 베지어 곡선에서는 X 및 Y 좌표만 두 개 이상의 제어점이 필요합니다

Kotlin

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.67f, 0.33f)
} else {
    LinearInterpolator()
}

자바

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.67f, 0.33f);
} else {
  myInterpolator = new LinearInterpolator();
}

이렇게 하면 빠르게 시작했다가 속도가 느려지는 이징 곡선이 만들어집니다. 끝부분에 가까워집니다.

마찬가지로 cubic Bézier 생성자는 시작점과 끝점을 고정했지만 두 개의 기준점이 필요합니다.

Kotlin

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f)
} else {
    LinearInterpolator()
}

자바

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f);
} else {
  myInterpolator = new LinearInterpolator();
}

이는 머티리얼 디자인의 구현으로 강조되고 감속 이징 곡선을 볼 수 있습니다.

더 세부적으로 제어하기 위해 임의의 Path를 사용하여 곡선을 정의할 수 있습니다.

Kotlin

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  val path = Path().apply {
    moveTo(0.0f, 0.0f)
    cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f)
  }
  PathInterpolator(path)
} else {
  LinearInterpolator()
}

자바

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.moveTo(0.0f, 0.0f);
  path.cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f);
  myInterpolator = new PathInterpolator(path);
} else {
  myInterpolator = new LinearInterpolator();
}

이 경우 3차원 베지어 예와 동일한 이징 곡선이 생성되지만 대신 Path하세요.

또한 경로 보간 유형을 XML 리소스로 정의할 수도 있습니다.

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.5"
    android:controlY1="0.7"
    android:controlX2="0.1f"
    android:controlY2="1.0f"/>

PathInterpolator 객체를 만든 후에는 이 객체를 다음과 같이 전달할 수 있습니다. Animator.setInterpolator() 메서드를 사용하여 축소하도록 요청합니다. Animator는 보간기를 사용하여 타이밍이나 경로를 결정합니다. 곡선을 그리는 것입니다.

Kotlin

val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    interpolator = myInterpolator
    start()
}

Java

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setInterpolator(myInterpolator);
animation.start();