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

ユーザー操作やバックグラウンド処理のために、画面上のオブジェクトの位置の変更が必要になることがよくあります。オブジェクトの位置を即座に更新して別の領域に点滅させるのではなく、アニメーションを使用してオブジェクトを開始位置から終了位置に移動します。

Android で画面上のビュー オブジェクトを再配置する方法の 1 つは、ObjectAnimator を使用することです。オブジェクトを配置する終了位置と、アニメーションの継続時間を指定します。時間インターポレータを使用して、アニメーションの加速または減速を制御することもできます。

ObjectAnimator を使用してビューの位置を変更する

ObjectAnimator API を使用すると、指定した期間にビューのプロパティを変更できます。これには、アニメーション化する属性のタイプに応じて ObjectAnimator のインスタンスを作成する静的メソッドが含まれています。画面上のビューの位置を変更するには、translationX 属性と translationY 属性を使用します。

次の ObjectAnimator の例では、ビューを画面の左から 100 ピクセルの位置に 2 秒で移動します。

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 は画面の左側から何ピクセルも離れた位置を示します。

次のメソッドでは、アニメーションにかかる時間をミリ秒単位で指定します。この例では、アニメーションは 2 秒間(2, 000 ミリ秒)実行されます。

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

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

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

ObjectAnimator は便利ですが、デフォルトでは、始点と終点を結ぶ直線に沿ってビューの位置を変更します。マテリアル デザインでは、画面上のオブジェクトの空間的な動きとアニメーションのタイミングに曲線を使用します。曲線モーションを使用すると、アプリの質感が高まり、アニメーションをより魅力的なものにすることができます。

独自の経路を定義する

ObjectAnimator クラスには、パスとともに 2 つ以上のプロパティを使用して座標をアニメーション化できるコンストラクタがあります。たとえば、次のアニメーターでは 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. 曲線パスのアニメーション。

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

  • @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)で導入された interpolator です。これは、ベジエ曲線または 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()
}

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 は interpolator を使用して、開始時のタイミングまたはパス曲線を決定します。

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