場合によっては、画像をアニメーション化する必要があります。これは、複数の画像で構成されたカスタムの読み込みアニメーションを表示する場合や、ユーザーの操作後にアイコンをモーフィングする場合に役立ちます。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:oneshot
を false
に設定すると、アニメーションがループします。
この 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()
メソッドは、Activity
の onCreate()
メソッド中に呼び出すことはできません。これは、AnimationDrawable
がまだウィンドウに完全にアタッチされていないためです。操作なしですぐにアニメーションを再生するには、Activity
の
メソッドから呼び出します。このメソッドは、Android がビューを画面に表示したときに呼び出されます。onStart()
XML 構文と使用可能なタグと属性の詳細については、アニメーション リソースをご覧ください。
AnimatedVectorDrawable を使用する
ベクター型ドローアブルは、モザイク化したりぼやけたりすることなく、スケーリング可能なドローアブルの一種です。AnimatedVectorDrawable
クラスと下位互換性のための
AnimatedVectorDrawableCompat
を使用すると、ベクター型ドローアブルのプロパティをアニメーション化できます。たとえば、回転させたり、パスデータを変更して別の画像にモーフィングしたりできます。
通常、アニメーション化ベクター型ドローアブルは、次の 3 つの XML ファイルで定義します。
res/drawable/
の<vector>
要素を含むベクター型ドローアブル。res/drawable/
の<animated-vector>
要素を含むアニメーション化ベクター型ドローアブル。res/animator/
に<objectAnimator>
要素を持つ 1 つ以上のオブジェクト アニメーター。
アニメーション化ベクター型ドローアブルを使用すると、<group>
要素と <path>
要素の属性をアニメーション化できます。<group>
要素は一連のパスまたはサブグループを定義し、<path>
要素は描画するパスを定義します。
アニメーション化するベクター型ドローアブルを定義する場合は、android:name
属性を使用してグループやパスに一意の名前を割り当てます。これにより、アニメーターの定義から参照できるようになります。次に例を示します。
<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>
アニメーション化ベクター型ドローアブルの定義では、ベクター型ドローアブルのグループとパスを名前で参照します。
<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 度回転します。
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
この例の 2 つ目のアニメーターは、ベクター型ドローアブルのパスをあるシェイプから別のシェイプにモーフィングします。パスはモーフィングに対応する必要があります。つまり、同じ数のコマンドと、各コマンドで同じ数のパラメータを持つ必要があります。
<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
は次のようになります。
AnimatedVectorDrawable
。アニメーション化ベクター型ドローアブル(AVD)のプレビュー
Android Studio のアニメーション化ベクター型ドローアブル ツールを使用すると、アニメーション化ドローアブル リソースをプレビューできます。このツールを使用すると、Android Studio で <animation-list>
、<animated-vector>
、<animated-selector>
の各リソースをプレビューし、カスタム アニメーションを簡単に調整できます。
詳細については、AnimatedVectorDrawable
の API リファレンスをご覧ください。