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