このページは Cloud Translation API によって翻訳されました。

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

画面上のオブジェクトは、ユーザー操作やバックグラウンドで行われる処理です。オブジェクトの点滅させる場合は、アニメーションを使って開始位置から終了位置に移動させます

Android で画面上のビューオブジェクトの位置を変更する方法の一つに、 ObjectAnimator を使用します。テストを終了する位置はアニメーションの長さに応じて変わります。Google Chat では時間インターポレータを使用して作成します。

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

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

ビューを位置 100 に移動する ObjectAnimator の例を次に示します。画面の左端から 2 秒間に 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 クラスには、座標をアニメーション化できるコンストラクタがあります。複数のプロパティを一度に使用できます対象次の例のアニメーターでは、 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 オブジェクト。Google Play Console のマテリアルデザインドキュメントにある Android の例イージング PathInterpolator を使用します。

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

たとえば、二次ベジェ曲線では X 座標と Y 座標のみ少なくとも 1 つのコントロールポイントが必要です

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