Drawable-Grafiken animieren

Schreiben Sie jetzt
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Weitere Informationen zur Verwendung von Animationen in „Compose“
<ph type="x-smartling-placeholder"></ph> Vektor-Drawables animieren →
Abbildung 1: Ein animiertes Drawable.

In einigen Fällen müssen Bilder animiert sein. Dies ist nützlich, wenn Sie eine benutzerdefinierte Ladeanimation, die aus mehreren Bildern besteht, oder wenn ein Symbol sich nach dem Aktion ausführen. Android bietet zwei Optionen zum Animieren von Drawables.

Die erste Möglichkeit besteht darin, AnimationDrawable zu verwenden. Dieses können Sie mehrere statische Drawable-Dateien, die nacheinander angezeigt werden, eine Animation erstellen. Die zweite Möglichkeit besteht darin, AnimatedVectorDrawable, mit dem Sie die Eigenschaften animieren können eines Vektor-Drawables.

AnimationDrawable verwenden

Eine Möglichkeit zum Erstellen einer Animation besteht darin, eine Sequenz von Drawable-Ressourcen wie eine Filmrolle zu laden. AnimationDrawable-Klasse ist die Grundlage für diese Art von Drawable-Animationen.

Sie können die Frames einer Animation in Ihrem Code mithilfe der AnimationDrawable definieren Klassen-API. Es ist jedoch einfacher, sie mit einer einzelnen XML-Datei zu definieren, in der die Frames aufgelistet sind, für die Erstellung der Animation. Die XML-Datei für diese Art von Animation gehört in den res/drawable/ Verzeichnis Ihres Android-Projekts. In diesem Fall wird in der Anleitung die Reihenfolge und Dauer jeden Frame in der Animation.

Die XML-Datei besteht aus einem <animation-list>-Element als Stammknoten und einem Reihe untergeordneter <item>-Knoten, die jeweils einen Frame definieren – eine Drawable-Ressource und die Dauer. Hier ist eine Beispieldatei 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 läuft über drei Frames. android:oneshot festlegen Attribut der Liste für true sorgt dafür, dass der Zyklus einmalig durchgeführt wird und dann gestoppt und gehalten wird. im letzten Frame. Wenn Sie android:oneshot auf false setzen, der Animationsschleifen.

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

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

Beachten Sie, dass die Methode start() im AnimationDrawable kann nicht während der onCreate()-Methode deines Activity, da die AnimationDrawable noch nicht vollständig mit dem . Um die Animation sofort und ohne Interaktion wiederzugeben, können Sie sie über das onStart() in Ihrer Activity, die aufgerufen wird, wenn Android die Ansicht auf dem Bildschirm sichtbar macht.

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

AnimierteVektorDrawable verwenden

Ein Vektor-Drawable ist eine Art Drawable, das skalierbar ist, ohne verpixelt oder verschwommen zu werden. Die AnimatedVectorDrawable Kurs und AnimatedVectorDrawableCompat aus Gründen der Abwärtskompatibilität: eines Vektor-Drawables, beispielsweise Drehen oder Ändern der Pfaddaten, um es in ein ein anderes Bild.

Normalerweise definierst du animierte Vektor-Drawables in drei XML-Dateien:

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

Animierte Vektor-Drawables können die Attribute von <group> und <path>-Elemente. Mit dem Element <group> wird eine Reihe von Pfade oder Untergruppen und das <path>-Element definiert die zu zeichnenden Pfade.

Wenn du ein Vektor-Drawable definierst, das animiert werden soll, verwende die Schaltfläche android:name. , um Gruppen und Pfaden einen eindeutigen Namen zuzuweisen, damit du in deinem Animationsprogramm darauf verweisen kannst Definitionen. 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 Vektor-Drawables bezieht sich auf die Gruppen und Pfade im Vektor-Drawable. nach ihren Namen:

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 ObjectAnimator oder AnimatorSet-Objekte. Die Der erste Animationskünstler in diesem Beispiel dreht die Zielgruppe um 360 Grad:

res/animator/rotation.xml

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

Der zweite Animator in diesem Beispiel wandelt den Pfad des Vektor-Drawables von einer Form in eine andere. Die Pfade müssen für Morphing kompatibel sein: Sie müssen die gleiche Anzahl von Befehlen enthalten. und dieselbe Anzahl von Parametern für jeden Befehl.

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:

<ph type="x-smartling-placeholder">
Abbildung 2. Ein AnimatedVectorDrawable.

Animierte AVD-Vorschau (Vector Drawable)

Mit dem Tool „animated Vector Drawable“ in Android Studio können Sie animierte Vektorgrafiken Drawable-Ressourcen. Mit diesem Tool können Sie eine Vorschau von <animation-list> anzeigen, <animated-vector> und <animated-selector> Ressourcen in Android Studio und erleichtert das Verfeinern benutzerdefinierter Animationen.

Ein Nutzer sieht sich eine Animation in Android Studio in der Vorschau an und spielt sie wieder ab.
Abbildung 3: Das Tool „Animiertes Vektor-Drawable“ in Android Studio.

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