Drawable-Grafiken animieren

Compose ausprobieren

Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zur Verwendung von Animationen in Compose

Vektordrawables animieren →

In einigen Situationen müssen Bilder animiert werden. Das ist nützlich, wenn Sie eine benutzerdefinierte Ladeanimation aus mehreren Bildern anzeigen möchten oder wenn ein Symbol nach einer Nutzeraktion in ein anderes übergehen soll. Android bietet zwei Optionen zum Animieren von Drawables.

Die erste Option ist die Verwendung eines AnimationDrawable. So können Sie mehrere statische Drawable-Dateien angeben, die nacheinander angezeigt werden, um eine Animation zu erstellen. Die zweite Option ist die Verwendung eines AnimatedVectorDrawable, mit dem Sie die Eigenschaften eines Vektordrawables animieren können.

AnimationDrawable verwenden

Eine Möglichkeit, eine Animation zu erstellen, besteht darin, eine Sequenz von Drawables zu laden, ähnlich wie bei einem Filmstreifen. Die AnimationDrawable-Klasse ist die Grundlage für diese Arten von animierten Drawables.

Sie können die Frames einer Animation in Ihrem Code mit der AnimationDrawable-Klassen-API definieren. Es ist jedoch einfacher, sie mit einer einzelnen XML-Datei zu definieren, in der die Frames aufgeführt sind, aus denen die Animation besteht. Die XML-Datei für diese Art von Animation gehört in das Verzeichnis res/drawable/ Ihres Android-Projekts. In diesem Fall geben die Anweisungen die Reihenfolge und Dauer für jedes Frame in der Animation an.

Die XML-Datei besteht aus einem <animation-list>-Element als Stammknoten und einer Reihe untergeordneter <item>-Knoten, die jeweils einen Frame definieren – eine zeichnungsfähige Ressource und ihre Dauer. Hier sehen Sie ein Beispiel für eine XML-Datei für eine Drawable-Animation:

<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>

Diese Animation wird für drei Frames ausgeführt. Wenn Sie das Attribut android:oneshot der Liste auf true festlegen, wird die Liste einmal durchlaufen und dann angehalten. Der letzte Frame wird beibehalten. Wenn Sie android:oneshot auf false setzen, wird die Animation in einer Schleife wiedergegeben.

Wenn Sie dieses XML als rocket_thrust.xml im Verzeichnis res/drawable/ des Projekts speichern, können Sie es als Hintergrundbild für ein View hinzufügen und dann start() aufrufen, um es abzuspielen. Hier ist ein Beispiel für eine Aktivität, in der die Animation einem ImageView hinzugefügt und dann animiert wird, wenn der Bildschirm berührt wird:

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() })
}

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();
      }
  });
}

Die start()-Methode, die für AnimationDrawable aufgerufen wird, kann nicht während der onCreate()-Methode Ihres Activity aufgerufen werden, da AnimationDrawable noch nicht vollständig an das Fenster angehängt ist. Wenn Sie die Animation sofort und ohne Interaktion abspielen möchten, können Sie sie in Ihrer Activity über die Methode onStart() aufrufen. Diese Methode wird aufgerufen, wenn Android die Ansicht auf dem Display sichtbar macht.

Weitere Informationen zur XML-Syntax und zu den verfügbaren Tags und Attributen finden Sie unter Animationsressourcen.

AnimatedVectorDrawable verwenden

Ein Vektor-Drawable ist ein Drawable-Typ, der skaliert werden kann, ohne dass es zu Pixelbildung oder Unschärfe kommt. Mit der AnimatedVectorDrawable-Klasse und AnimatedVectorDrawableCompat für die Abwärtskompatibilität können Sie die Eigenschaften eines Vektordrawables animieren, z. B. durch Drehen oder Ändern der Pfaddaten, um es in ein anderes Bild zu verwandeln.

Normalerweise definieren Sie animierte Vektordrawables in drei XML-Dateien:

• Ein Vektor-Drawable mit dem <vector>-Element in res/drawable/.
• Ein animiertes Vektor-Drawable mit dem <animated-vector>-Element in res/drawable/.
• Ein oder mehrere Objekt-Animatoren mit dem <objectAnimator>-Element in res/animator/.

Mit animierten Vektordrawables können die Attribute der Elemente <group> und <path> animiert werden. Das <group>-Element definiert eine Reihe von Pfaden oder Untergruppen und das <path>-Element definiert die zu zeichnenden Pfade.

Wenn Sie ein Vektordrawable definieren, das animiert werden soll, verwenden Sie das Attribut android:name, um Gruppen und Pfaden einen eindeutigen Namen zuzuweisen. So können Sie in Ihren Animator-Definitionen darauf verweisen. Beispiel:

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>

Die Definition des animierten Vektordrawables verweist anhand ihrer Namen auf die Gruppen und Pfade im Vektordrawable:

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>

Die Animationsdefinitionen stellen ObjectAnimator- oder AnimatorSet-Objekte dar. Der erste Animator in diesem Beispiel dreht die Zielgruppe um 360 Grad:

res/animator/rotation.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
  <objectAnimator
      android:duration="6000"
      android:propertyName="rotation"
      android:valueFrom="0"
      android:valueTo="360" />
</set>

Der zweite Animator in diesem Beispiel wandelt den Pfad des Vektordrawables von einer Form in eine andere um. Die Pfade müssen für das Morphen kompatibel sein. Sie müssen dieselbe Anzahl von Befehlen und dieselbe Anzahl von Parametern für jeden Befehl haben.

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>

Hier ist das Ergebnis: AnimatedVectorDrawable

Vorschau für animierte Vektor-Drawables (AVD)

Mit dem Tool „Animated Vector Drawable“ in Android Studio können Sie animierte Drawable-Ressourcen in der Vorschau ansehen. Mit diesem Tool können Sie <animation-list>-, <animated-vector>- und <animated-selector>-Ressourcen in Android Studio in der Vorschau ansehen und benutzerdefinierte Animationen einfacher optimieren.

Weitere Informationen finden Sie in der API-Referenz für AnimatedVectorDrawable.