画面上のオブジェクトの位置の変更が必要になることがよくあります。たとえば、ユーザーの操作やなんらかのバックグラウンド処理の結果として、オブジェクトの位置変更が必要となることがあります。そのような場合に、オブジェクトの位置を瞬間的に更新し、ある領域にあるオブジェクトが突然消えて別の領域に突然現れるようにするのではなく、アニメーションを使用して、開始位置から終了位置に移動させることをおすすめします。
Android には、ObjectAnimator など、画面上のビュー オブジェクトの位置を変更するための方法が用意されています。オブジェクトを配置する終了位置と、アニメーションの持続時間を指定することができます。そして、時間インターポレーターを組み合わせることで、アニメーションの加速や減速を制御することができます。
ObjectAnimator を使用してビューの位置を変更する
ObjectAnimator API を使用すると、指定した持続時間に基づいてビューのプロパティを簡単に変更することができます。この API には、アニメーション化する属性のタイプに応じた ObjectAnimator インスタンスを作成するための静的メソッドが用意されています。画面上のビューの位置を変更するときは、translationX 属性と translationY 属性を使用します。
画面の左端から 100 ピクセルの位置に 2 秒間かけてビューを移動する ObjectAnimator の例を以下に示します。
Kotlin
ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
duration = 2000
start()
}
Java
ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setDuration(2000);
animation.start();
この例では、変換値を float 型にする必要があるため、ObjectAnimator.ofFloat() メソッドを使用しています。1 番目のパラメータは、アニメーション化するビューを示しています。2 番目のパラメータは、アニメーション化するプロパティを示しています。ビューを水平方向に移動する必要があるため、translationX プロパティを使用しています。最後のパラメータは、アニメーションの終了値を示しています。この「100」という値は、画面の左端からのピクセル数を示しています。
次のメソッドでは、アニメーションにかかる時間をミリ秒単位で指定しています。この例の場合、アニメーションの実行時間は 2 秒間（2,000 ミリ秒）になります。
最後のメソッドにより、アニメーションが実行され、画面上のビューの位置が更新されます。
ObjectAnimator の使用方法については、ObjectAnimator を使用してアニメーション化するをご覧ください。
曲線モーションを追加する
ObjectAnimator は簡単に利用できますが、デフォルトでは、ビューの位置を変更する際、開始点と終了点をつなぐ直線を使用します。他方、マテリアル デザインは、アニメーションのタイミングだけでなく、画面上のオブジェクトの空間的な動きに関しても曲線をベースとしています。そのため、曲線モーションを使用することで、アニメーションの魅力を高めつつ、マテリアル デザインとしての質も高めることができます。
PathInterpolator を使用する
Android 5.0（API 21）において、新しいインターポレーターとして PathInterpolator クラスが導入されました。このクラスは、ベジェ曲線または Path オブジェクトをベースとします。このインターポレーターは、1×1 の正方形内にモーション曲線を指定します。アンカー ポイントは（0,0）と（1,1）で、コントロール ポイントはコンストラクタ引数を使用して指定します。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)
}
Java
// 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()
}
Java
ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setInterpolator(pathInterpolator);
animation.start();
独自の経路を定義する
ObjectAnimator クラスに導入された新しいコンストラクタの場合、経路と一緒に一度に複数のプロパティを使用することで、経路に沿って座標をアニメーション化することができます。たとえば、次のアニメーターの場合、Path オブジェクトを使用して、ビューの X プロパティと Y プロパティをアニメーション化しています。
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
}
Java
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
}
これにより、次のような弧を描くアニメーションを作成できます。
独自のタイミングや経路曲線を作成したくない場合、マテリアル デザインの仕様として、3 つの基本曲線の XML リソースが用意されています。
@interpolator/fast_out_linear_in.xml@interpolator/fast_out_slow_in.xml@interpolator/linear_out_slow_in.xml