アニメーションを使ってビューを移動する

Compose をお試しください
Jetpack Compose は、Android で推奨される UI ツールキットです。Compose でアニメーションを使用する方法をご覧ください。
位置をアニメーション化する →

画面上のオブジェクトの位置は、ユーザー操作やバックグラウンドでの処理によって変更する必要が生じることがよくあります。そのような場合に、オブジェクトの位置を瞬間的に更新し、ある領域にあるオブジェクトが突然消えて別の領域に突然現れるようにするのではなく、アニメーションを使用して、開始位置から終了位置に移動させることをおすすめします。

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();

この例では、 ObjectAnimator.ofFloat() メソッドを使用しています。変換値は浮動小数点数でなければならないためです。最初のパラメータは、アニメーション化するビューです。2 番目のパラメータは、アニメーション化するプロパティを示しています。ビューを水平方向に移動する必要があるため、translationX プロパティを使用しています。最後のパラメータは、アニメーションの終了値を示しています。この例では、「100」という値は、画面の左端から 100 ピクセルの位置を示しています。

次のメソッドでは、アニメーションにかかる時間をミリ秒単位で指定しています。この例の場合、アニメーションの実行時間は 2 秒間（2, 000 ミリ秒）になります。

最後のメソッドにより、アニメーションが実行され、画面上のビューの位置が更新されます。

ObjectAnimator の使用方法について詳しくは、ObjectAnimator を使用してアニメーション化するをご覧ください。

曲線モーションを追加する

ObjectAnimator は簡単に利用できますが、デフォルトでは、ビューの位置を変更する際、開始点と終了点をつなぐ直線を使用します。マテリアル デザインは、画面上のオブジェクトの空間的な動きとアニメーションのタイミングに曲線をベースとしています。そのため、曲線モーションを使用することで、アニメーションの魅力を高めつつ、マテリアル デザインとしての質も高めることができます。

独自の経路を定義する

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
}

これにより、次のような弧を描くアニメーションを作成できます。

図 1.曲線経路のアニメーション。

An Interpolator は、イージング曲線の実装です。イージング曲線のコンセプトについて詳しくは、 マテリアル デザインのドキュメント をご覧ください。Interpolator は、アニメーションの特定の値を時間の関数として計算する方法を定義します。マテリアル デザインの仕様として、3 つの基本曲線の XML リソースが用意されています。

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

PathInterpolator を使用する

The PathInterpolator クラスは、Android 5.0（API 21）で導入されたインターポレーターです。このクラスは、 ベジェ曲線または Pathオブジェクトをベースとします。イージングに関するマテリアル デザインのドキュメントの Android の例では、 PathInterpolatorを使用しています。

PathInterpolator には、さまざまなタイプのベジェ曲線に基づくコンストラクタがあります。 すべてのベジェ曲線で、開始点と終了点はそれぞれ (0,0) と (1,1) に固定されています。その他のコンストラクタ引数は、作成するベジェ曲線のタイプによって異なります。

たとえば、2 次ベジェ曲線の場合、必要なのは 1 つの制御点の X 座標と Y 座標のみです。

Kotlin

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

Java

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

これにより、開始時は速く、終了に近づくにつれて減速するイージング曲線が生成されます。

同様に、3 次ベジェ曲線のコンストラクタも開始点と終了点が固定されていますが、2 つの制御点が必要です。

Kotlin

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

Java

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()
}

Java

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();