In einigen Fällen müssen Bilder animiert sein. Dies ist nützlich, wenn Sie eine benutzerdefinierte Ladeanimation aus mehreren Bildern anzeigen möchten oder wenn Sie möchten, dass sich ein Symbol nach einer Nutzeraktion verwandelt. Android bietet zwei Optionen zum Animieren von Drawables.
Die erste Möglichkeit besteht darin, AnimationDrawable zu verwenden. 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 du die Eigenschaften eines Vektor-Drawables animieren kannst.
AnimationDrawable verwenden
Eine Möglichkeit zum Erstellen einer Animation besteht darin, eine Sequenz von Drawable-Ressourcen wie eine Filmrolle zu laden.
Die Klasse AnimationDrawable ist die Grundlage für diese Art von Drawable-Animationen.
Sie können die Frames einer Animation in Ihrem Code mithilfe der AnimationDrawable-Klassen-API definieren. Es ist aber einfacher, sie mit einer einzelnen XML-Datei zu definieren, in der die Frames der Animation aufgeführt sind. 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 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 dessen 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. Wenn Sie das Attribut android:oneshot der Liste auf true setzen, wird der Zyklus einmal ausgeführt und dann im letzten Frame angehalten und gedrückt. 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 einem View als Hintergrundbild hinzufügen und dann start() aufrufen, um sie abzuspielen. Hier ein Beispiel für eine Aktivität, bei der die Animation zu einem ImageView hinzugefügt und dann beim Berühren des Bildschirms animiert 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();
}
});
}
Die start()-Methode, die für AnimationDrawable aufgerufen wird, kann nicht während der onCreate()-Methode von Activity aufgerufen werden, da die 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 ü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 verfügbaren Tags und Attributen finden Sie unter Animationsressourcen.
AnimierteVektorDrawable verwenden
Ein Vektor-Drawable ist eine Art von Drawable, das skalierbar ist, ohne verpixelt oder verschwommen zu sein. Mit der Klasse AnimatedVectorDrawable und
AnimatedVectorDrawableCompat für die Abwärtskompatibilität können Sie die Eigenschaften eines Vektor-Drawables animieren, z. B. das Drehen des Vektors oder das Ändern der Pfaddaten, um das Bild in ein anderes Bild umzuwandeln.
Normalerweise definierst du animierte Vektor-Drawables in drei XML-Dateien:
- Ein Vektor-Drawable mit dem Element
<vector>inres/drawable/. - Ein animiertes Vektor-Drawable mit dem Element
<animated-vector>inres/drawable/. - Ein oder mehrere Objektanimationen mit dem Element
<objectAnimator>inres/animator/.
Mit animierten Vektor-Drawables können die Attribute der Elemente <group> und <path> animiert werden. Das Element <group> definiert eine Reihe von Pfaden oder Untergruppen und das Element <path> definiert 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 Animationsdefinitionen darauf verweisen kannst. 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 für den 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 Morphing kompatibel sein: Sie müssen für jeden Befehl die gleiche Anzahl von Befehlen und die gleiche Anzahl von Parametern 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.Animierte AVD-Vorschau (Vector Drawable)
Mit dem Tool „animated Vector Drawable“ in Android Studio können Sie animierte Drawable-Ressourcen in der Vorschau ansehen. Mit diesem Tool kannst du dir eine Vorschau der Ressourcen für <animation-list>, <animated-vector> und <animated-selector> in Android Studio ansehen und deine benutzerdefinierten Animationen leichter optimieren.
Weitere Informationen finden Sie in der API-Referenz zu AnimatedVectorDrawable.