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