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

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

図 1. アニメーションドローアブル。

場合によっては、画像をアニメーションにする必要があります。これは、1 対 1 のチャットに複数の画像で構成されるカスタムの読み込みアニメーションが、できます。Android には、ドローアブルをアニメーション化するための 2 つのオプションがあります。

最初のオプションは、AnimationDrawable を使用することです。この静的フィードをドローアブルファイルを 1 つずつ表示して、アニメーションを作成します。2 つ目の方法は AnimatedVectorDrawable: プロパティをアニメーション化できます。ベクター型ドローアブルの

AnimationDrawable を使用する

アニメーションを作成する方法の 1 つは、映画のロールなど、ドローアブルリソースのシーケンスを読み込むことです。 AnimationDrawable クラスが、この種のドローアブルアニメーションのベースになります。

コード内でアニメーションのフレームを定義するには、AnimationDrawable 単一の XML ファイルを使用して定義するのは簡単ですが、アニメーションを構成します。この種のアニメーションの XML ファイルは 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 を res/drawable/ に rocket_thrust.xml として保存すると、作成すると、それを背景画像として 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();
      }
  });
}

なお、start()メソッドは onCreate() メソッドの進行中は AnimationDrawable を呼び出せません。 Activity。AnimationDrawable がまだ完全にはアタッチされていないためクリックします。操作なしですぐにアニメーションを再生するには、 onStart() メソッドを Activity 内で呼び出します。このメソッドは、Android がビューを画面に表示したときに呼び出されます。

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

AnimatedVectorDrawable を使用する

ベクター型ドローアブルモザイクやぼやけが発生せず、拡張可能なドローアブルの一種です。「 AnimatedVectorDrawable class および AnimatedVectorDrawableCompat（下位互換性があるため）ベクター型ドローアブルのプロパティを回転させたり、パスデータを変更して表示されます。

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

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

アニメーション化ベクター型ドローアブルでは、<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 オブジェクト。「この例の最初の Animator は、ターゲットグループを 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 の Animated Vector Drawable ツールを使用すると、アニメーションをドローアブルリソース。このツールは、<animation-list>、 <animated-vector> と <animated-selector> 個のリソース Android Studio では、カスタムアニメーションの改良が容易になります。

Android Studio 内でアニメーションのプレビューと再生を行うユーザー

図 3. Android Studio の Animated Vector Drawable ツール

詳細は API リファレンスを AnimatedVectorDrawable。

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