In manchen Fällen müssen Bilder animiert sein. Dies ist nützlich, wenn Sie eine benutzerdefinierte Ladeanimation anzeigen lassen möchten, die aus mehreren Bildern besteht, oder wenn Sie möchten, dass sich ein Symbol nach der Aktion eines Nutzers verwandelt. Android bietet zwei Optionen zum Animieren von Drawables.
Die erste Möglichkeit besteht in der Verwendung von AnimationDrawable. So können Sie mehrere statische Drawable-Dateien angeben, die nacheinander angezeigt werden, um eine Animation zu erstellen. Die zweite Möglichkeit besteht darin, ein AnimatedVectorDrawable-Element zu verwenden, mit dem sich die Eigenschaften eines Vektor-Drawable animieren lassen.
AnimationDrawable verwenden
Eine Möglichkeit zum Erstellen einer Animation besteht darin, eine Abfolge von Drawable-Ressourcen zu laden, z. B. eine Filmrolle.
Die AnimationDrawable-Klasse ist die Grundlage für solche Drawable-Animationen.
Sie können die Frames einer Animation in Ihrem Code mithilfe der AnimationDrawable-Klassen-API definieren. Es ist jedoch einfacher, sie mit einer einzelnen XML-Datei zu definieren, die die Frames auflistet, aus denen die Animation besteht. Die XML-Datei für diese Art von Animation befindet sich in das Verzeichnis res/drawable/ Ihres Android-Projekts. In diesem Fall geben die Anweisungen die Reihenfolge und Dauer für jeden Frame in der Animation an.
Die XML-Datei besteht aus einem <animation-list>-Element als Stammknoten und einer Reihe von untergeordneten <item>-Knoten, die jeweils einen Frame definieren – eine Drawable-Ressource und ihre Dauer. Hier ist eine Beispiel-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 läuft über drei Frames. Wenn Sie das Attribut android:oneshot der Liste auf true setzen, wird die Liste einmal ausgeführt. Anschließend wird sie angehalten und beim letzten Frame gehalten. Wenn Sie android:oneshot auf false setzen, wird die Animation als Schleife wiedergegeben.
Wenn du diese XML-Datei als rocket_thrust.xml im Verzeichnis res/drawable/ des Projekts speicherst, kannst du sie als Hintergrundbild zu einer View hinzufügen und dann start() aufrufen, um sie wiederzugeben. Hier ist ein Beispiel für eine Aktivität, bei der die Animation einem ImageView hinzugefügt und dann animiert wird, 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();
}
});
}
Dabei ist zu beachten, dass die für AnimationDrawable aufgerufene Methode start() während der onCreate()-Methode der Activity nicht aufgerufen werden kann, da die AnimationDrawable noch nicht vollständig an das Fenster angehängt ist. Wenn Sie die Animation sofort ohne Interaktion abspielen möchten, können Sie sie über die Methode onStart()Activity aufrufen. Diese wird aufgerufen, wenn Android die Ansicht auf dem Bildschirm sichtbar macht.
Weitere Informationen zur XML-Syntax und zu den verfügbaren Tags und Attributen finden Sie unter Animationsressourcen.
AnimierteVectorDrawable verwenden
Ein Vektor-Drawable ist eine Art Drawable, das skalierbar ist, ohne verpixelt oder verschwommen zu werden. Mit der AnimatedVectorDrawable-Klasse und
AnimatedVectorDrawableCompat für Abwärtskompatibilität können Sie die Eigenschaften eines Vektor-Drawable animieren, z. B. es drehen oder die Pfaddaten ändern, um es in ein anderes Bild umzuwandeln.
Animierte Vektor-Drawables werden normalerweise in drei XML-Dateien definiert:
- Ein Vektor-Drawable mit dem
<vector>-Element inres/drawable/. - Ein animierter Vektor-Drawable mit dem
<animated-vector>-Element inres/drawable/. - Ein oder mehrere Objektanimatoren mit dem
<objectAnimator>-Element inres/animator/.
In animierten Vektor-Drawables können die Attribute der Elemente <group> und <path> animiert werden. Das <group>-Element definiert eine Reihe von Pfaden oder Untergruppen, das <path>-Element die zu zeichnenden Pfade.
Wenn du ein Vektor-Drawable definierst, das du animieren möchtest, verwende das Attribut android:name, um Gruppen und Pfaden einen eindeutigen Namen zuzuweisen, damit du in deinen Animator-Definitionen darauf verweisen kannst. Beispiele:
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-Drawable bezieht sich auf die Gruppen und Pfade im Vektor-Drawable mit 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 stellen ObjectAnimator- oder AnimatorSet-Objekte dar. Der erste Animator 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 zur anderen um. Die Pfade müssen für das Morphen kompatibel sein: Sie müssen die gleiche Anzahl von Befehlen und die gleiche Anzahl von Parametern für jeden Befehl enthalten.
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:
AnimatedVectorDrawable.Vorschau von Animiertem Vektor-Drawable (AVD)
Mit dem Tool Animierte Vektor-Drawables in Android Studio können Sie sich animierte Drawable-Ressourcen in der Vorschau ansehen. Mit diesem Tool können Sie die Ressourcen von <animation-list>, <animated-vector> und <animated-selector> in Android Studio als Vorschau ansehen und Ihre benutzerdefinierten Animationen leichter optimieren.
Weitere Informationen finden Sie in der API-Referenz zu AnimatedVectorDrawable.