プロパティ アニメーションの概要

Compose を試す

Jetpack Compose は、Android に推奨される UI ツールキットです。Compose でアニメーションを使用する方法を学習します。

<ph type="x-smartling-placeholder"></ph> Animation*AsState →

プロパティ アニメーション システムは堅牢なフレームワークであり、 ほぼすべてをアニメーション化できます。オブジェクトのプロパティを時間とともに変化させるアニメーションを定義できます。 画面に描画されるかどうかに関係なくプロパティ アニメーションは、 （オブジェクト内のフィールド）値を返します。何かをアニメーション化するには、 指定することもできます。たとえば、画面上のオブジェクトの位置、 およびその間のアニメーション化する 値を指定します

プロパティ アニメーション システムを使用すると、 アニメーション:

• 継続時間: アニメーションの長さを指定できます。デフォルトの長さは 300 ms です。
• 時間補間: プロパティの値を 現在の経過時間の関数を定義します。
• 繰り返しの回数と動作: 次の場合にアニメーションを繰り返すかどうかを指定できます。 アニメーションの終わりに達すると、そのアニメーションが何回繰り返されるかが決まります。また、 アニメーションを逆方向に再生するかどうかを指定します。逆再生に設定する 繰り返しの回数に達するまで、アニメーションが前後に繰り返し実行されます。
• Animator セット: アニメーションを、同時に再生する論理セットまたは論理セットにグループ化できます。 遅延させることもできます。
• フレーム更新遅延: アニメーションのフレームを更新する頻度を指定できます。「 デフォルトでは 10 ミリ秒ごとに更新するよう設定されていますが、アプリケーションでフレームを更新できる速度は 最終的には、システム全体のビジー状態と、基になるタイマーをシステムがどれだけ速く処理できるかに依存します。

プロパティ アニメーションの完全な例については、 CustomTransition の ChangeColor クラス ご覧ください。

プロパティ アニメーションの仕組み

まず、簡単な例を使用してアニメーションの仕組みについて説明します。図 1 は、 x プロパティでアニメーション化された架空のオブジェクト。 画面上に水平に配置されます。アニメーションの持続時間は 40 ms に設定されており、距離は 40 ピクセルです。デフォルトのフレーム リフレッシュ レートである 10 ミリ秒ごとに、オブジェクトは 横方向に 10 ピクセルずつスケーリングします。40 ミリ秒が経過すると、アニメーションは停止し、オブジェクトは 水平方向は 40 番ですこれは線形補間を使用したアニメーションの例です。 一定の速度で移動するものです。

図 1. 線形アニメーションの例

非線形補間を行うアニメーションを指定することもできます。図 2 は、 アニメーションの開始時には加速し、 終わります。オブジェクトは 40 ms で 40 ピクセル移動しますが、非線形です。 このアニメーションは中間点まで加速し、 アニメーションが最後まで途中で止まるようにします。図 2 に示すように、移動距離は アニメーションの最初と最後では、中央よりも小さくなります。

図 2. 非線形アニメーションの例

プロパティ アニメーション システムの重要なコンポーネントがどのように は、上に示したようなアニメーションを計算します。図 3 は、メインクラスがどのようにして 相互に連携します

図 3. アニメーションの計算方法

ValueAnimator オブジェクトは、アニメーションのタイミングをトラッキングします。 たとえばアニメーションの実行時間や 現在のプロパティの現在の値などです あります。

ValueAnimator は、アニメーションの補間を定義する TimeInterpolator と、対象のプロパティの値の計算方法を定義する TypeEvaluator をカプセル化します。 アニメーション化します。たとえば図 2 では、使用される TimeInterpolator は次のようになります。 AccelerateDecelerateInterpolator では、TypeEvaluator は IntEvaluator になります。

アニメーションを開始するには、ValueAnimator を作成し、 アニメーション化するプロパティの開始値と終了値、 追加します。start() を呼び出すと、アニメーションが 開始されます。アニメーション全体の中で、ValueAnimator は経過した割合を計算します。 0 ～ 1 の間で指定します。「 経過時間の割合は、アニメーションが完了した時間の割合を表します。0 は 0% を意味します。 1 は 100%を意味しますたとえば、図 1 では、t = 10 ms での経過時間の割合は 0 .25 になります。 時間の合計は t = 40 ミリ秒です。

ValueAnimator で経過した割合の計算が完了すると、 現在設定されている TimeInterpolator を呼び出し、 補間された割合です。補間された割合は、経過した割合を新しい値にマッピングします。 設定された時間補間を考慮した値。たとえば、図 2 では、 アニメーションがゆっくりと加速するため、補間される割合（約 0 .15）は t = 10 ms で 0.25 と表した。図 1 では、補間された割合は常に 経過した割合を返します

補間された割合が計算されるとき、ValueAnimator は以下を呼び出します。 適切な TypeEvaluator を使用して、 値に基づいて、アニメーション化するプロパティを アニメーションの終了値を指定します。たとえば、図 2 では、t = 10 ミリ秒なので、その時点でのプロパティの値は 0.15 × (40 - 0)、つまり 6 になります。

プロパティ アニメーションとビュー アニメーションの違い

ビュー アニメーション システムには、View のみをアニメーション化する機能があります。 そのため、View 以外のオブジェクトをアニメーション化する場合は、 できます。また、ビュー アニメーション システムには、 スケーリングやアニメーション化など、アニメーション化する View オブジェクトのいくつかの側面を公開します。 背景色は割り当てません。

ビュー アニメーション システムのもう 1 つのデメリットは、 実際のビュー自体ではなく、ビューが描画された。たとえば、移動させるボタンをアニメーション化し、 ボタンは正しく描画されますが、クリックできる実際の位置は ボタンは変わらないため、これを処理する独自のロジックを実装する必要があります。

プロパティ アニメーション システムでは、こうした制約が完全に削除され、 任意のオブジェクト（ビューとビュー以外）のすべてのプロパティと、オブジェクト自体が実際に変更される。 プロパティ アニメーション システムは、アニメーションの実行方法も堅牢です。ちなみに 大まかに言うと、色、 位置、サイズを指定でき、補間やサイズなどのアニメーションの 複数のアニメーターを同期できます。

一方、ビュー アニメーション システムでは、セットアップにかかる時間が短くなり、記述するコードも少なくて済みます。 ビュー アニメーションで必要な操作がすべて完了する場合、または既存のコードがすでに プロパティ アニメーション システムを使用する必要はありません。また、 ユースケースが発生した場合は、それぞれの状況で両方のアニメーション システムを使用するのが合理的です。

API の概要

プロパティ アニメーション システムの API のほとんどは、android.animation にあります。ビュー アニメーション システムには、 android.view.animation で多数の interpolator を定義している場合、 プロパティ アニメーション システムで interpolator を使用することもできます。以下の表で、Terraform を構成する主な プロパティ アニメーション システムのコンポーネントです。

Animator クラスは、コンテンツ作成のための基本構造を提供します。 作成できます。このクラスは、最低限の機能しか提供しないため、通常は直接使用しません。 値のアニメーション化を完全にサポートするように拡張する必要がある機能。次の サブクラスは Animator を拡張します。

表 1. アニメーター

評価者は、特定のプロパティの値の計算方法をプロパティ アニメーション システムに指示する プロパティです。このメソッドは、Animator から提供されるタイミング データを取得します。 クラス、アニメーションの開始値と終了値を取得し、プロパティのアニメーション値を計算します。 予測します。プロパティ アニメーション システムには、次のエバリュエータが用意されています。

表 2. エバリュエータ

時間補間器は、アニメーション内の特定の値を時間として計算する方法を です。たとえば、アニメーションが全体にわたって直線的に発生するように指定できます。 アニメーションは時間を通して均等に動きます。また、アニメーションを 非線形時間を使用するには、たとえば、開始時に加速し、 終わります。表 3 に、android.view.animation に含まれるインターポレータを示します。指定された interpolator がいずれも TimeInterpolator インターフェースを実装し、独自のインターフェースを作成します。カスタム関数を記述する方法の詳細については、interpolator の使用をご覧ください。 interpolator を使用します。

表 3: interpolator

ValueAnimator を使用してアニメーション化する

ValueAnimator クラスを使用すると、 アニメーションの再生時間（int、float、色のセットを指定） アニメーション化します。ValueAnimator を取得するには、次のいずれかを呼び出します。 ファクトリ メソッド: ofInt()、ofFloat()、または ofObject()。例:

ValueAnimator.ofFloat(0f, 100f).apply {
    duration = 1000
    start()
}

ValueAnimator animation = ValueAnimator.ofFloat(0f, 100f);
animation.setDuration(1000);
animation.start();

このコードでは、ValueAnimator が start() メソッドが実行されたとき、1,000 ミリ秒の間、0 ～ 100 のアニメーション。

次のようにして、アニメーション化するカスタムタイプを指定することもできます。

ValueAnimator.ofObject(MyTypeEvaluator(), startPropertyValue, endPropertyValue).apply {
    duration = 1000
    start()
}

ValueAnimator animation = ValueAnimator.ofObject(new MyTypeEvaluator(), startPropertyValue, endPropertyValue);
animation.setDuration(1000);
animation.start();

このコードでは、ValueAnimator が startPropertyValue～endPropertyValue の間のアニメーション（ start() メソッドの実行時に 1, 000 ミリ秒間 MyTypeEvaluator によって提供されるロジック。

このアニメーションの値を使用するには、 AnimatorUpdateListener ValueAnimator オブジェクトに追加します。 コード:

ValueAnimator.ofObject(...).apply {
    ...
    addUpdateListener { updatedAnimation ->
        // You can use the animated value in a property that uses the
        // same type as the animation. In this case, you can use the
        // float value in the translationX property.
        textView.translationX = updatedAnimation.animatedValue as Float
    }
    ...
}

animation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator updatedAnimation) {
        // You can use the animated value in a property that uses the
        // same type as the animation. In this case, you can use the
        // float value in the translationX property.
        float animatedValue = (float)updatedAnimation.getAnimatedValue();
        textView.setTranslationX(animatedValue);
    }
});

onAnimationUpdate() メソッドを使用すると、更新されたアニメーション値にアクセスし、 ビューの一つですリスナーについて詳しくは、このモジュールの アニメーション リスナー。

ObjectAnimator を使用してアニメーション化する

ObjectAnimator は ValueAnimator（前のセクションで説明）のサブクラスであり、 エンジンと ValueAnimator の値計算に加え、次の機能を備えています。 ターゲット オブジェクトの名前付きプロパティをアニメーション化します。こうすれば、オブジェクトの作成がずっと簡単になります。 ValueAnimator.AnimatorUpdateListener を実装する必要がなくなりました。 アニメーションプロパティが自動的に更新されるため、

ObjectAnimator のインスタンス化は ValueAnimator と似ていますが、オブジェクトとそのプロパティの名前も指定します（ 次の要素の間でアニメーション化する値を指定します。

ObjectAnimator.ofFloat(textView, "translationX", 100f).apply {
    duration = 1000
    start()
}

ObjectAnimator animation = ObjectAnimator.ofFloat(textView, "translationX", 100f);
animation.setDuration(1000);
animation.start();

ObjectAnimator でプロパティを更新する 次のことを行う必要があります。

• アニメーション化するオブジェクト プロパティには、 set<PropertyName>()。ObjectAnimator が アニメーション中にプロパティを自動更新するには、 このセッター メソッドを使用します。たとえば、プロパティ名が foo の場合、次の操作を行う必要があります。 setFoo() メソッドがある。このセッター メソッドが存在しない場合は、 オプション: <ph type="x-smartling-placeholder">
  </ph>
  • セッター メソッドをクラスに追加する権限がある場合は、追加する。
  • 変更権限のあるラッパークラスを使用し、そのラッパーに 値を有効なセッター メソッドに置き換えて、元のオブジェクトに転送します。
  • 代わりに ValueAnimator を使用する。
• ObjectAnimator ファクトリ メソッドのいずれかで values... パラメータの値を 1 つだけ指定した場合、それが 作成します。そのため、アニメーション化するオブジェクト プロパティにはゲッター関数が必要です。 アニメーションの開始値を取得するために使用される。ゲッター関数は get<PropertyName>() の形式。たとえば、プロパティ名が foo には、getFoo() メソッドが必要です。
• アニメーション化するプロパティのゲッター メソッド（必要な場合）とセッター メソッドには、 ObjectAnimator に指定した開始値と終了値と同じ型で動作する。たとえば、パスワードに targetObject.setPropName(float) および targetObject.getPropName() 次の ObjectAnimator を作成するとします。

  ObjectAnimator.ofFloat(targetObject, "propName", 1f)
  

• アニメーション化するプロパティまたはオブジェクトによっては、ビューで invalidate() メソッドを呼び出して、 更新されたアニメーション値。この作業は onAnimationUpdate() 呼び出すことができます。たとえば、ドローアブル オブジェクトの color プロパティをアニメーション化すると、 そのオブジェクトが再描画されるときに、そのオブジェクトが再度描画されるだけです。ビューのすべてのプロパティ セッター setAlpha() および setTranslationX() View は適切に無効化されるので、これらの呼び出しの際に View を無効にする必要はありません。 メソッドを新しい値に置き換えます。リスナーについて詳しくは、このモジュールの アニメーション リスナー。

AnimatorSet を使用して複数のアニメーションを演出する

多くの場合、別のアニメーションの開始またはタイミングに依存するアニメーションを再生する必要があります。 終了します。Android システムでは、アニメーションを AnimatorSet にバンドルできるため、アニメーションを開始するかどうかを指定できます。 特定の遅延の後に同時、順次、または後続してトリガーされます。AnimatorSet オブジェクトを相互にネストすることもできます。

次のコード スニペットは、次の Animator を再生します。 次のように指定できます。

1. bounceAnim を再生する。
2. squashAnim1、squashAnim2、stretchAnim1、 同時に stretchAnim2 です。
3. bounceBackAnim を再生する。
4. fadeAnim を再生する。

val bouncer = AnimatorSet().apply {
    play(bounceAnim).before(squashAnim1)
    play(squashAnim1).with(squashAnim2)
    play(squashAnim1).with(stretchAnim1)
    play(squashAnim1).with(stretchAnim2)
    play(bounceBackAnim).after(stretchAnim2)
}
val fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f).apply {
    duration = 250
}
AnimatorSet().apply {
    play(bouncer).before(fadeAnim)
    start()
}

AnimatorSet bouncer = new AnimatorSet();
bouncer.play(bounceAnim).before(squashAnim1);
bouncer.play(squashAnim1).with(squashAnim2);
bouncer.play(squashAnim1).with(stretchAnim1);
bouncer.play(squashAnim1).with(stretchAnim2);
bouncer.play(bounceBackAnim).after(stretchAnim2);
ValueAnimator fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f);
fadeAnim.setDuration(250);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(bouncer).before(fadeAnim);
animatorSet.start();

アニメーション リスナー

以下で説明するリスナーを使用して、アニメーションの期間中に重要なイベントをリッスンできます。

• Animator.AnimatorListener
  • onAnimationStart() - アニメーションの開始時に呼び出されます。
  • onAnimationEnd()～ アニメーションの終了時に呼び出されます。
  • onAnimationRepeat() - アニメーションが繰り返されるときに呼び出されます。
  • onAnimationCancel() - アニメーションがキャンセルされたときに呼び出されます。キャンセルされたアニメーション onAnimationEnd() も呼び出します。 その終了方法に関係なく
• ValueAnimator.AnimatorUpdateListener

  • onAnimationUpdate() - アニメーションのすべてのフレームで呼び出されます。このイベントのリッスン対象 発生中に ValueAnimator によって生成された計算値を使用して、 作成します。値を使用するには、ValueAnimator オブジェクトをクエリします。 getAnimatedValue() メソッドで現在のアニメーション値を取得するため、このイベントを渡します。実装すると、 ValueAnimator を使用する場合はリスナーが必要です。

    アニメーション化するプロパティまたはオブジェクトによっては、 View の invalidate() を使用して、その領域を強制的に 新しいアニメーション値で自身を再描画します。たとえば、 Drawable オブジェクトの color プロパティを使用すると、 再描画します。ビューのすべてのプロパティセッターは setAlpha() や setTranslationX() がビューを無効にする そのため、新しい値でこれらのメソッドを呼び出すときに View を無効にする必要はありません。

次のように、AnimatorListenerAdapter クラスを拡張できます。 Animator.AnimatorListener インターフェースの実装 すべてのメソッドを実装したい場合は、Animator.AnimatorListener 行うことができます。AnimatorListenerAdapter クラスは空の文字列を提供する。 オーバーライドできるメソッドの実装。

たとえば、次のコード スニペットは AnimatorListenerAdapter を作成します。 onAnimationEnd() のみ 次のコールバックを使用します。

ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f).apply {
    duration = 250
    addListener(object : AnimatorListenerAdapter() {
        override fun onAnimationEnd(animation: Animator) {
            balls.remove((animation as ObjectAnimator).target)
        }
    })
}

ValueAnimator fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f);
fadeAnim.setDuration(250);
fadeAnim.addListener(new AnimatorListenerAdapter() {
public void onAnimationEnd(Animator animation) {
    balls.remove(((ObjectAnimator)animation).getTarget());
}

ViewGroup オブジェクトへのレイアウト変更をアニメーション化する

プロパティ アニメーション システムには、ViewGroup オブジェクトへの変更をアニメーション化する機能が用意されています。 View オブジェクト自体を簡単にアニメーション化することもできます。

ViewGroup 内のレイアウトの変化をアニメーション化するには、 LayoutTransition クラス。ViewGroup 内のビューは、 アセットを追加または追加する際に、表示と非表示のアニメーションが ViewGroup から削除したり、View の setVisibility() メソッド VISIBLE、INVISIBLE、または GONE。ViewGroup の残りのビューは、 ビューを追加または削除したときに、新しい位置にアニメーション表示されます。1 対 1 の LayoutTransition オブジェクト内の次のアニメーション setAnimator() を呼び出す そして、Animator オブジェクトを 次の LayoutTransition 定数を使用します。

• APPEARING - 指定されたアイテムで実行されるアニメーションを示すフラグ。 表示されます。
• CHANGE_APPEARING - 指定されたアイテムで実行されるアニメーションを示すフラグ。 新しいアイテムがコンテナに表示されると変更されます。
• DISAPPEARING - 指定されたアイテムで実行されるアニメーションを示すフラグ。 コンテナから消えます。
• CHANGE_DISAPPEARING - 実行されるアイテムで実行されるアニメーションを示すフラグ。 アイテムがコンテナから消えたことで変更される。

これら 4 種類のイベントに対して独自のカスタム アニメーションを定義して外観をカスタマイズできます。 デフォルトのアニメーションを使用するように設定したりすることもできます。

属性に対して android:animateLayoutchanges 属性を true に設定するには、 ViewGroup では、次の処理を行います。

<LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:id="@+id/verticalContainer"
    android:animateLayoutChanges="true" />

この属性を true に設定すると、 ViewGroup と、その ViewGroup の残りのビュー。

StateListAnimator を使用してビューの状態の変化をアニメーション化する

StateListAnimator クラスを使用すると、実行時に実行されるアニメーターを定義できます。 ビューの状態を変更できます。このオブジェクトは、コンテンツの Animator オブジェクトが返され、指定された場合にそのアニメーションが ビュー状態（「押下」や「フォーカス」など）の変更。

StateListAnimator は、root 権限を持つ XML リソースで定義できます。 <selector> 要素と、それぞれで指定する子 <item> 要素 StateListAnimator クラスで定義された別のビュー状態。各 <item> には、プロパティ アニメーション セットの定義が含まれています。

たとえば、次のファイルでは、x と y のスケールを変更する状態リスト アニメーターを作成しています。 次のように表示されます。

res/xml/animate_scale.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- the pressed state; increase x and y size to 150% -->
    <item android:state_pressed="true">
        <set>
            <objectAnimator android:propertyName="scaleX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1.5"
                android:valueType="floatType"/>
            <objectAnimator android:propertyName="scaleY"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1.5"
                android:valueType="floatType"/>
        </set>
    </item>
    <!-- the default, non-pressed state; set x and y size to 100% -->
    <item android:state_pressed="false">
        <set>
            <objectAnimator android:propertyName="scaleX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1"
                android:valueType="floatType"/>
            <objectAnimator android:propertyName="scaleY"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>

状態リスト アニメーターをビューにアタッチするには、 android:stateListAnimator 属性を次のように設定します。

<Button android:stateListAnimator="@xml/animate_scale"
        ... />

これで、このボタンの実行時に animate_scale.xml で定義されたアニメーションが使用されるようになりました。 必要があります。

または、コード内のビューに状態リスト アニメーターを割り当てるには、 AnimatorInflater.loadStateListAnimator() メソッドを呼び出し、アニメーターを View.setStateListAnimator() メソッドを使用してビューを作成します。

または、ビューのプロパティをアニメーション化する代わりに、2 つの間にドローアブル アニメーションを再生することもできます。 状態変化。AnimatedStateListDrawable を使用します。 一部のシステム ウィジェットは Android 5.0 では、これらのアニメーションがデフォルトで使用されます。次の例は AnimatedStateListDrawable を XML リソースとして定義するには、次のようにします。

<!-- res/drawable/myanimstatedrawable.xml -->
<animated-selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- provide a different drawable for each state-->
    <item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
        android:state_pressed="true"/>
    <item android:id="@+id/focused" android:drawable="@drawable/drawableF"
        android:state_focused="true"/>
    <item android:id="@id/default"
        android:drawable="@drawable/drawableD"/>

    <!-- specify a transition -->
    <transition android:fromId="@+id/default" android:toId="@+id/pressed">
        <animation-list>
            <item android:duration="15" android:drawable="@drawable/dt1"/>
            <item android:duration="15" android:drawable="@drawable/dt2"/>
            ...
        </animation-list>
    </transition>
    ...
</animated-selector>

TypeEvaluator を使用する

Android システムで認識されていないタイプをアニメーション化する場合は、 TypeEvaluator インターフェースを実装してエバリュエータを作成します。データの取り込み時に int、float、または色があります。 IntEvaluator、FloatEvaluator、ArgbEvaluator の各タイプでサポートされている 評価担当者に提供します

TypeEvaluator に実装するメソッドは 1 つだけです。 インターフェース、evaluate() メソッド。これにより、 アニメーション プロパティに適切な値を返すために使用しているアニメーターを 位置を指定します。FloatEvaluator クラスは、 方法は次のとおりです。

private class FloatEvaluator : TypeEvaluator<Any> {

    override fun evaluate(fraction: Float, startValue: Any, endValue: Any): Any {
        return (startValue as Number).toFloat().let { startFloat ->
            startFloat + fraction * ((endValue as Number).toFloat() - startFloat)
        }
    }

}

public class FloatEvaluator implements TypeEvaluator {

    public Object evaluate(float fraction, Object startValue, Object endValue) {
        float startFloat = ((Number) startValue).floatValue();
        return startFloat + fraction * (((Number) endValue).floatValue() - startFloat);
    }
}

注: ValueAnimator（または ObjectAnimator）を実行すると、 （0 と 1 の間の値）を取得し、それに基づいて補間バージョンを計算します。 使用する interpolator も考慮する必要があります。補間された小数は、TypeEvaluator が fraction パラメータを介して受け取るため、次のようになります。 アニメーション値を計算するときに interpolator を考慮する必要がない。

インターポレータを使用する

interpolator は、アニメーション内の特定の値を あります。たとえば、アニメーション全体が直線的に発生するように指定できます。 つまり、アニメーションは時間を通して均等に移動します。また、使用するアニメーションを 線形時間で変化します。たとえば、時間間隔の最初または最後に 作成します。

アニメーション システムの interpolator は、Animator から アニメーションの経過時間。interpolator は、タイプに一致するようにこの割合を アニメーションを追加しますAndroid システムには、一般的な interpolator のセットが android.view.animation package。上記のいずれも TimeInterpolator インターフェースを実装して、 あります。

例として、デフォルトの interpolator AccelerateDecelerateInterpolator と LinearInterpolator で補間された割合がどのように計算されるかを比較します。 LinearInterpolator は、経過した割合には影響しません。AccelerateDecelerateInterpolator はアニメーションを加速させ、 減速します。次のメソッドは、これらのインターポレータのロジックを定義します。

AccelerateDecelerateInterpolator

override fun getInterpolation(input: Float): Float =
        (Math.cos((input + 1) * Math.PI) / 2.0f).toFloat() + 0.5f

@Override
public float getInterpolation(float input) {
    return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
}

LinearInterpolator

override fun getInterpolation(input: Float): Float = input

@Override
public float getInterpolation(float input) {
    return input;
}

次の表は、これらのモデルによって計算される近似値を示しています。 interpolator を設定すると、1,000 ミリ秒続くアニメーションを作成できます。

表に示すように、LinearInterpolator は値を変更します。 200 ミリ秒経過するたびに 0.2 の速度になります。AccelerateDecelerateInterpolator は、値を LinearInterpolator より速く 200 ミリ秒から 600 ミリ秒の間で変更し、600 ミリ秒から 600 ミリ秒の間でより遅く変更します。 1,000 ミリ秒。

キーフレームを指定する

Keyframe オブジェクトは、時間と値のペアで構成され、 特定の時点の状態を指定します。各キーフレームには独自の interpolator を使用して、直前のアニメーションと キーフレームの時刻とキーフレームの時刻を指定します。

Keyframe オブジェクトをインスタンス化するには、いずれかのファクトリを使用する必要があります。 メソッド、ofInt()、ofFloat()、または ofObject() を使用して、適切なタイプの Keyframe を取得します。その後、 ofKeyframe() ファクトリ メソッド PropertyValuesHolder オブジェクトを取得します。オブジェクトを取得したら PropertyValuesHolder オブジェクトを渡してアニメーターを取得し、 指定します。次のコード スニペットは、これを行う方法を示しています。

val kf0 = Keyframe.ofFloat(0f, 0f)
val kf1 = Keyframe.ofFloat(.5f, 360f)
val kf2 = Keyframe.ofFloat(1f, 0f)
val pvhRotation = PropertyValuesHolder.ofKeyframe("rotation", kf0, kf1, kf2)
ObjectAnimator.ofPropertyValuesHolder(target, pvhRotation).apply {
    duration = 5000
}

Keyframe kf0 = Keyframe.ofFloat(0f, 0f);
Keyframe kf1 = Keyframe.ofFloat(.5f, 360f);
Keyframe kf2 = Keyframe.ofFloat(1f, 0f);
PropertyValuesHolder pvhRotation = PropertyValuesHolder.ofKeyframe("rotation", kf0, kf1, kf2);
ObjectAnimator rotationAnim = ObjectAnimator.ofPropertyValuesHolder(target, pvhRotation);
rotationAnim.setDuration(5000);

ビューをアニメーション化する

プロパティ アニメーション システムを使用すると、View オブジェクトのアニメーションを合理化できます。また、 ビュー アニメーション システムより優れている点がいくつかあります。ビュー アニメーション システムは、View オブジェクトの描画方法を変更して、View オブジェクトを変換しました。これは ビュー自体には操作するプロパティがないため、各ビューのコンテナで処理されます。 その結果、ビュー オブジェクトはアニメーション化されましたが、ビュー オブジェクト自体は変更されませんでした。この その結果、元の場所にオブジェクトが存在しても元の場所に残ってしまう、というような動作が発生しました。 画面上の別の場所に描画されます。Android 3.0 では、新しいプロパティとそれに対応する この欠点をなくすために、getter メソッドと setter メソッドが追加されました。

プロパティ アニメーション システム View オブジェクトの実際のプロパティを変更することで、画面上の View をアニメーション化できます。イン さらに、ビューは自動的に invalidate() メソッドを使用して、プロパティが変更されるたびに画面を更新します。プロパティ アニメーションを容易にする View クラスの新しいプロパティは次のとおりです。

• translationX、translationY: これらのプロパティは、 ビューは、レイアウトで設定された左と上の座標からの差分として配置されます。 されます。
• rotation、rotationX、rotationY: これらのプロパティ ピボット ポイントを中心とした 2D（rotation プロパティ）と 3D の回転を制御します。
• scaleX、scaleY: これらのプロパティは、地図の 2D スケーリングを制御します。 そのピボット ポイントを中心として表示します。
• pivotX と pivotY: これらのプロパティは、 このピボット ポイントを中心にして、回転とスケーリングの変換が行われます。デフォルトでは、ピボットは オブジェクトの中心に位置します。
• x と y: これらは、イベントを記述するためのシンプルなユーティリティ プロパティです。 コンテナ内のビューの最終的な位置。 translateX と translateY の値。
• alpha: ビューのアルファ透明度を表します。この値は 1（不透明）です。 値 0 は完全な透明度（非表示）を表します。

View オブジェクトのプロパティ（色や回転値など）をアニメーション化するために必要なのは、 プロパティ アニメーターを作成し、使用する View プロパティを指定します。 アニメーション化できます。例:

ObjectAnimator.ofFloat(myView, "rotation", 0f, 360f)

ObjectAnimator.ofFloat(myView, "rotation", 0f, 360f);

アニメーターの作成について詳しくは、 ValueAnimator と ObjectAnimator があります。

ViewPropertyAnimator を使用してアニメーション化する

ViewPropertyAnimator を使用すると、複数の画像を簡単にアニメーション化できます。 1 つの基になる Animator を使用して、View のプロパティを並列で処理します。 渡されます。これは ObjectAnimator と同様に動作します。これは、 ビューのプロパティの実際の値が使用されますが、同じ位置にある多くのプロパティをアニメーション化する方が 1 回だけです。また、ViewPropertyAnimator を使用するコードは次のようになります。 より簡潔で読みやすいものになります次のコード スニペットは、複数の環境変数を使用する場合と、 ObjectAnimator オブジェクト、 ObjectAnimator と ViewPropertyAnimator を ビューの x プロパティと y プロパティを同時にアニメーション化します。

複数の ObjectAnimator オブジェクト

val animX = ObjectAnimator.ofFloat(myView, "x", 50f)
val animY = ObjectAnimator.ofFloat(myView, "y", 100f)
AnimatorSet().apply {
    playTogether(animX, animY)
    start()
}

ObjectAnimator animX = ObjectAnimator.ofFloat(myView, "x", 50f);
ObjectAnimator animY = ObjectAnimator.ofFloat(myView, "y", 100f);
AnimatorSet animSetXY = new AnimatorSet();
animSetXY.playTogether(animX, animY);
animSetXY.start();

1 つの ObjectAnimator

val pvhX = PropertyValuesHolder.ofFloat("x", 50f)
val pvhY = PropertyValuesHolder.ofFloat("y", 100f)
ObjectAnimator.ofPropertyValuesHolder(myView, pvhX, pvhY).start()

PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("x", 50f);
PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("y", 100f);
ObjectAnimator.ofPropertyValuesHolder(myView, pvhX, pvhY).start();

ViewPropertyAnimator

myView.animate().x(50f).y(100f)

myView.animate().x(50f).y(100f);

ViewPropertyAnimator の詳細については、対応する Android デベロッパーをご覧ください。 ブログ 投稿をご覧ください。

XML でアニメーションを宣言する

プロパティ アニメーション システムでは、XML を使用してプロパティ アニメーションを宣言できます。 できます。XML でアニメーションを定義すると、アニメーションを簡単に再利用できます。 アニメーション シーケンスを簡単に編集できます。

新しいプロパティ アニメーション API を使用するアニメーション ファイルと、 従来のビュー アニメーション フレームワーク Android 3.1 以降では、プロパティ アニメーション用の XML ファイルは res/animator/ ディレクトリに保存する必要があります。

次のプロパティ アニメーション クラスでは、 次の XML タグ:

• ValueAnimator - <animator>
• ObjectAnimator - <objectAnimator>
• AnimatorSet - <set>

XML 宣言で使用できる属性を確認するには、アニメーション リソースをご覧ください。次の例では、2 つのオブジェクト アニメーションを再生します。 最初のネストされたセットで、2 つのオブジェクト アニメーションを同時に再生します。

<set android:ordering="sequentially">
    <set>
        <objectAnimator
            android:propertyName="x"
            android:duration="500"
            android:valueTo="400"
            android:valueType="intType"/>
        <objectAnimator
            android:propertyName="y"
            android:duration="500"
            android:valueTo="300"
            android:valueType="intType"/>
    </set>
    <objectAnimator
        android:propertyName="alpha"
        android:duration="500"
        android:valueTo="1f"/>
</set>

このアニメーションを実行するには、アニメーション セットを開始する前に、コード内の XML リソースを AnimatorSet オブジェクトにインフレートしてから、すべてのアニメーションの対象オブジェクトを設定する必要があります。setTarget() を呼び出すと、便宜上、AnimatorSet のすべての子に対して単一の対象オブジェクトが設定されます。次のコードに、その方法を示します。

(AnimatorInflater.loadAnimator(myContext, R.animator.property_animator) as AnimatorSet).apply {
    setTarget(myObject)
    start()
}

AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(myContext,
    R.animator.property_animator);
set.setTarget(myObject);
set.start();

次のように、XML で ValueAnimator を宣言することもできます。 例を示しています。

<animator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:valueType="floatType"
    android:valueFrom="0f"
    android:valueTo="-100f" />

上記の ValueAnimator をコードで使用するには、次の操作を行います。 インフレートする必要があります。また、追加の AnimatorUpdateListener, 更新されたアニメーション値を取得し、いずれかのビューのプロパティで使用する コードのようになります。

(AnimatorInflater.loadAnimator(this, R.animator.animator) as ValueAnimator).apply {
    addUpdateListener { updatedAnimation ->
        textView.translationX = updatedAnimation.animatedValue as Float
    }

    start()
}

ValueAnimator xmlAnimator = (ValueAnimator) AnimatorInflater.loadAnimator(this,
        R.animator.animator);
xmlAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator updatedAnimation) {
        float animatedValue = (float)updatedAnimation.getAnimatedValue();
        textView.setTranslationX(animatedValue);
    }
});

xmlAnimator.start();

プロパティ アニメーションを定義するための XML 構文については、アニメーション リソース をご覧ください。

UI パフォーマンスに及ぶおそれのある影響

UI を更新するアニメーションでは、 指定します。このため、リソースを大量に消費するアニメーションを使用すると、 アプリのパフォーマンスに悪影響を及ぼす可能性があります。

UI をアニメーション化するために必要な作業が、アニメーション ステージに追加されます。 レンダリングされますアニメーションが アプリのパフォーマンスを向上させるには、[GPU レンダリングのプロファイル作成] を有効にします。 モニタリングします。詳しくは、 GPU レンダリングのプロファイル作成をご覧ください。 チュートリアルをご覧ください。