Animer des images drawables

Essayer Compose
Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment utiliser des animations dans Compose.
<ph type="x-smartling-placeholder"></ph> Animer des drawables vectoriels →
Figure 1 : Drawable animé.

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() dans votre 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> dans res/drawable/
  • Un drawable vectoriel animé avec l'élément <animated-vector> dans res/drawable/
  • Un ou plusieurs animateurs d'objets avec l'élément <objectAnimator> dans res/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:

<ph type="x-smartling-placeholder">
Figure 2. Un élément 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.

Utilisateur prévisualisant et lisant une animation dans Android Studio
Figure 3 : Outil Drawable vectoriel animé dans Android Studio.

Pour en savoir plus, consultez la documentation de référence de l'API AnimatedVectorDrawable