ドローアブル グラフィックをアニメーションにする

Compose を試す
Jetpack Compose は Android で推奨される UI ツールキットです。Compose でアニメーションを使用する方法を学びます。
図 1. アニメーション ドローアブル。

場合によっては、画像をアニメーション化する必要があります。これは、複数の画像で構成されたカスタムの読み込みアニメーションを表示する場合や、ユーザーの操作後にアイコンをモーフィングする場合に役立ちます。Android には、ドローアブルをアニメーション化するためのオプションが 2 つあります。

1 つ目の方法は、AnimationDrawable を使用することです。これにより、一度に 1 つずつ表示する複数の静的ドローアブル ファイルを指定して、アニメーションを作成できます。2 つ目の方法は、AnimatedVectorDrawable を使用することです。これにより、ベクター型ドローアブルのプロパティをアニメーション化できます。

AnimationDrawable を使用する

アニメーションを作成する 1 つの方法は、フィルムのロールのような一連のドローアブル リソースを読み込むことです。AnimationDrawable クラスは、このようなドローアブル アニメーションの基礎となります。

コード内でアニメーションのフレームを定義するには、AnimationDrawable クラス API を使用しますが、アニメーションを構成するフレームをリストした単一の XML ファイルを使用する方が簡単です。この種のアニメーションの XML ファイルは、Android プロジェクトの res/drawable/ ディレクトリにあります。この場合、命令によりアニメーションの各フレームの順序と再生時間が指定されます。

XML ファイルは、ルートノードとしての <animation-list> 要素と、フレーム(ドローアブル リソースとその期間)を定義する一連の子 <item> ノードで構成されます。Drawable アニメーションの XML ファイルの例を次に示します。

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

このアニメーションは 3 つのフレームで実行されます。リストの android:oneshot 属性を true に設定すると、リストが 1 回循環し、最後のフレームで停止して保持されます。android:oneshotfalse に設定すると、アニメーションがループします。

この XML を rocket_thrust.xml としてプロジェクトの res/drawable/ ディレクトリに保存すると、背景画像として View に追加し、start() を呼び出して再生できます。アニメーションを ImageView に追加し、画面がタップされるとアニメーション化するアクティビティの例を次に示します。

Kotlin

private lateinit var rocketAnimation: AnimationDrawable

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main)

    val rocketImage = findViewById<ImageView>(R.id.rocket_image).apply {
        setBackgroundResource(R.drawable.rocket_thrust)
        rocketAnimation = background as AnimationDrawable
    }

    rocketImage.setOnClickListener({ rocketAnimation.start() })
}

Java

AnimationDrawable rocketAnimation;

public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
  rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
  rocketAnimation = (AnimationDrawable) rocketImage.getBackground();

  rocketImage.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        rocketAnimation.start();
      }
  });
}

AnimationDrawable で呼び出される start() メソッドは、ActivityonCreate() メソッド中に呼び出すことはできません。これは、AnimationDrawable がまだウィンドウに完全にアタッチされていないためです。操作なしですぐにアニメーションを再生するには、ActivityonStart() メソッドから呼び出します。このメソッドは、Android がビューを画面に表示したときに呼び出されます。

XML 構文と使用可能なタグと属性の詳細については、アニメーション リソースをご覧ください。

AnimatedVectorDrawable を使用する

ベクター型ドローアブルは、モザイク化したりぼやけたりすることなく、スケーリング可能なドローアブルの一種です。AnimatedVectorDrawable クラスと下位互換性のための AnimatedVectorDrawableCompat を使用すると、ベクター型ドローアブルのプロパティをアニメーション化できます。たとえば、回転させたり、パスデータを変更して別の画像にモーフィングしたりできます。

通常、アニメーション化ベクター型ドローアブルは、次の 3 つの XML ファイルで定義します。

  • res/drawable/<vector> 要素を含むベクター型ドローアブル。
  • res/drawable/<animated-vector> 要素を含むアニメーション化ベクター型ドローアブル。
  • res/animator/<objectAnimator> 要素を持つ 1 つ以上のオブジェクト アニメーター。

アニメーション化ベクター型ドローアブルを使用すると、<group> 要素と <path> 要素の属性をアニメーション化できます。<group> 要素は一連のパスまたはサブグループを定義し、<path> 要素は描画するパスを定義します。

アニメーション化するベクター型ドローアブルを定義する場合は、android:name 属性を使用してグループやパスに一意の名前を割り当てます。これにより、アニメーターの定義から参照できるようになります。次に例を示します。

res/drawable/vectordrawable.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

アニメーション化ベクター型ドローアブルの定義では、ベクター型ドローアブルのグループとパスを名前で参照します。

res/drawable/animatorvectordrawable.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@animator/rotation" />
    <target
        android:name="v"
        android:animation="@animator/path_morph" />
</animated-vector>

アニメーションの定義は、ObjectAnimator オブジェクトまたは AnimatorSet オブジェクトを表します。この例の最初のアニメーターは、ターゲット グループを 360 度回転します。

res/animator/rotation.xml

<objectAnimator
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

この例の 2 つ目のアニメーターは、ベクター型ドローアブルのパスをあるシェイプから別のシェイプにモーフィングします。パスはモーフィングに対応する必要があります。つまり、同じ数のコマンドと、各コマンドで同じ数のパラメータを持つ必要があります。

res/animator/path_morph.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType" />
</set>

結果の AnimatedVectorDrawable は次のようになります。

図 2.AnimatedVectorDrawable

アニメーション化ベクター型ドローアブル(AVD)のプレビュー

Android Studio のアニメーション化ベクター型ドローアブル ツールを使用すると、アニメーション化ドローアブル リソースをプレビューできます。このツールを使用すると、Android Studio で <animation-list><animated-vector><animated-selector> の各リソースをプレビューし、カスタム アニメーションを簡単に調整できます。

Android Studio 内でアニメーションのプレビューと再生を行うユーザー
図 3. Android Studio のアニメーション ベクター型ドローアブル ツール

詳細については、AnimatedVectorDrawable の API リファレンスをご覧ください。