Dans certains cas, les images doivent être animées. Cela est utile si vous souhaitez afficher une animation de chargement personnalisée composée de plusieurs images ou si vous voulez qu'une icône se transforme action. Android propose deux options pour animer des drawables.
La première consiste à utiliser un AnimationDrawable. Ce
vous permet de spécifier plusieurs
fichiers drawables qui s'affichent un par un pour
créer une animation. La deuxième option consiste à utiliser
AnimatedVectorDrawable, qui vous permet d'animer les propriétés
d'un drawable vectoriel.
Utiliser AnimationDrawable
Pour créer une animation, vous pouvez charger une séquence de ressources drawables, comme une pellicule.
La classe AnimationDrawable
constitue la base de ces types d'animations drawable.
Vous pouvez définir les frames d'une animation dans votre code à l'aide de AnimationDrawable
mais il est plus facile de les définir avec un seul fichier XML qui répertorie les frames qui
constituent l'animation. Le fichier XML de ce type d'animation appartient à res/drawable/
de votre projet Android. Dans ce cas, les instructions indiquent
l'ordre et la durée pour
chaque image de l'animation.
Le fichier XML se compose d'un élément <animation-list> en tant que nœud racine et d'un
série de nœuds <item> enfants qui définissent chacun un frame (une ressource drawable)
et sa durée. Voici un exemple de fichier XML pour une animation Drawable:
<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>
Cette animation s'exécute pour trois images. Définir android:oneshot
l'attribut de la liste sur true, qui passe une fois, puis s'arrête et s'arrête
sur la dernière image. Si vous définissez android:oneshot sur false,
les boucles d'animation.
Si vous enregistrez ce fichier XML sous le nom rocket_thrust.xml dans res/drawable/
du projet, vous pouvez l'ajouter comme image de fond à un View, puis
appelez start() pour l'exécuter. Voici un exemple d'activité dans laquelle l'animation est ajoutée à une
ImageView, puis animé
lorsque l'utilisateur appuie sur l'écran:
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(); } }); }
Il est important de noter que la méthode start() a appelé au niveau
AnimationDrawable ne peut pas être appelé lors de la méthode onCreate() de votre
Activity, car AnimationDrawable n'est pas encore complètement associé à
fenêtre. Pour lire l'animation immédiatement, sans nécessiter d'interaction, vous pouvez l'appeler à partir de la
onStart()Activity, qui est appelée lorsque Android rend la vue visible à l'écran.
Pour en savoir plus sur la syntaxe XML ainsi que sur les balises et les attributs disponibles, consultez la section Ressources d'animation.
Utiliser AnimatedVectorDrawable
Un drawable vectoriel.
est un type de drawable évolutif sans être pixélisé ni flou. La
AnimatedVectorDrawable
classe, et
AnimatedVectorDrawableCompat pour assurer la rétrocompatibilité (vous permet d'animer le
d'un drawable vectoriel, comme sa rotation ou la modification des données de tracé pour le transformer en
une autre image.
Les drawables vectoriels animés sont généralement définis dans trois fichiers XML:
- Un drawable vectoriel avec l'élément
<vector>dansres/drawable/ - Un drawable vectoriel animé avec l'élément
<animated-vector>dansres/drawable/ - Un ou plusieurs animateurs d'objets avec l'élément
<objectAnimator>dansres/animator/
Les drawables vectoriels animés peuvent animer les attributs de <group> et
<path>. L'élément <group> définit un ensemble de
chemins ou sous-groupes, et l'élément <path> définit les chemins à tracer.
Lorsque vous définissez un drawable vectoriel que vous souhaitez animer, utilisez android:name
pour attribuer un nom unique aux groupes et aux chemins, afin que vous puissiez vous y référer depuis votre animateur.
et définitions. Exemple :
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>
La définition du drawable vectoriel animé fait référence aux groupes et aux chemins qu'il contient par leur nom:
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>
Les définitions de l’animation représentent
ObjectAnimator ou
Objets AnimatorSet. La
Le premier outil d'animation de cet exemple fait pivoter le groupe cible de 360 degrés:
res/animator/rotation.xml
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
Dans cet exemple, le deuxième outil d'animation transforme le tracé du drawable vectoriel, qui passe d'une forme à une autre. Les chemins d'accès doivent être compatibles avec le morphing: ils doivent comporter le même nombre de commandes et le même nombre de paramètres pour chaque commande.
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>
Voici le AnimatedVectorDrawable obtenu:
AnimatedVectorDrawable.Aperçu du drawable vectoriel animé (AVD)
L'outil Drawable vectoriel animé dans Android Studio vous permet de prévisualiser les éléments animés.
ressources drawables. Cet outil vous permet de prévisualiser <animation-list>,
<animated-vector> et <animated-selector> ressources dans
Android Studio permet d'affiner plus facilement vos animations personnalisées.
Pour en savoir plus, consultez la documentation de référence de l'API
AnimatedVectorDrawable