Ressources d'animation

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Une ressource d'animation peut définir l'un des deux types d'animations suivants :

Animation des propriétés
Crée une animation en modifiant les valeurs des propriétés d'un objet sur une période donnée à l'aide d'un élément Animator.
Afficher l'animation

Le framework d'affichage des animations vous permet d'effectuer deux types d'animations :

Animation des propriétés

Animation définie en XML qui modifie les propriétés de l'objet cible, telles que la couleur d'arrière-plan ou la valeur alpha, sur une période donnée.

Emplacement du fichier :
res/animator/filename.xml
Le nom de fichier est utilisé comme ID de ressource.
Type de données de la ressource compilée :
Pointeur de ressource vers ValueAnimator, ObjectAnimator ou AnimatorSet.
Référence de la ressource :
En code Java ou Kotlin : R.animator.filename
En XML : @[package:]animator/filename
Syntaxe :
<set
  android:ordering=["together" | "sequentially"]>

    <objectAnimator
        android:propertyName="string"
        android:duration="int"
        android:valueFrom="float | int | color"
        android:valueTo="float | int | color"
        android:startOffset="int"
        android:repeatCount="int"
        android:repeatMode=["restart" | "reverse"]
        android:valueType=["intType" | "floatType"]/>

    <animator
        android:duration="int"
        android:valueFrom="float | int | color"
        android:valueTo="float | int | color"
        android:startOffset="int"
        android:repeatCount="int"
        android:repeatMode=["restart" | "reverse"]
        android:valueType=["intType" | "floatType"]/>

    <set>
        ...
    </set>
</set>

Le fichier doit comporter un seul élément racine : <set>, <objectAnimator> ou <valueAnimator>. Vous pouvez regrouper des éléments d'animation dans l'élément <set>, y compris d'autres éléments <set>.

Éléments :
<set>
Conteneur dans lequel se trouve d'autres éléments d'animation (<objectAnimator>, <valueAnimator> ou d'autres éléments <set>). Représente un AnimatorSet.

Vous pouvez spécifier des balises <set> imbriquées pour regrouper davantage les animations. Chaque <set> peut définir son propre attribut ordering.

Attributs :

android:ordering
Mot clé. Spécifie l'ordre de lecture des animations de cet ensemble.
ValeurDescription
sequentiallyLire les animations de cet ensemble de manière séquentielle
together (par défaut)Lire simultanément les animations de cet ensemble
<objectAnimator>
Anime une propriété spécifique d'un objet sur une période donnée. Représente un ObjectAnimator.

Attributs :

android:propertyName
Chaîne. Obligatoire. Propriété de l'objet à animer, référencée par son nom. Par exemple, vous pouvez spécifier "alpha" ou "backgroundColor" pour un objet View. Toutefois, l'élément objectAnimator n'expose pas d'attribut target. Vous ne pouvez donc pas définir l'objet pour effectuer l'animation dans la déclaration XML. Vous devez gonfler la ressource XML d'animation. Pour ce faire, appelez loadAnimator() et setTarget() pour définir l'objet cible contenant cette propriété.
android:valueTo
float, int ou color. Obligatoire. Valeur où la propriété animée se termine. Les couleurs sont représentées par des nombres hexadécimaux à six chiffres (par exemple, #333333).
android:valueFrom
float, int ou color. Valeur où la propriété animée commence. Si elle n'est pas spécifiée, l'animation commence à la valeur obtenue par la méthode get de la propriété. Les couleurs sont représentées par des nombres hexadécimaux à six chiffres (par exemple, #333333).
android:duration
int. Durée de l'animation, en millisecondes. La valeur par défaut est de 300 millisecondes.
android:startOffset
int. Durée en millisecondes du décalage de l'animation après l'appel de start().
android:repeatCount
int. Nombre de répétitions d'une animation. Définissez cette valeur sur "-1" pour répéter indéfiniment l'animation, ou sur un entier positif. Par exemple, la valeur "1" signifie que l'animation est répétée une fois après son exécution initiale. Elle est donc lue deux fois au total. La valeur par défaut est "0", ce qui signifie qu'il n'y a pas de répétition.
android:repeatMode
int. Comportement d'une animation lorsqu'elle atteint sa fin. android:repeatCount doit être défini sur un entier positif ou "-1" pour que cet attribut ait un effet. Définissez cette valeur sur "reverse" pour que l'animation soit inversée à chaque itération, ou sur "restart" pour lire l'animation en boucle.
android:valueType
Mot clé. Ne spécifiez pas cet attribut si la valeur est une couleur. Le framework de l'animation gère automatiquement les valeurs de couleur.
ValeurDescription
intTypeIndique que les valeurs animées sont des entiers.
floatType (par défaut)Indique que les valeurs animées sont des valeurs à virgule flottante.
<animator>
Effectue une animation sur une durée spécifiée. Représente un ValueAnimator.

Attributs :

android:valueTo
float, int ou color. Obligatoire. Valeur où l'animation se termine. Les couleurs sont représentées par des nombres hexadécimaux à six chiffres (par exemple, #333333).
android:valueFrom
float, int ou color. Obligatoire. Valeur où l'animation commence. Les couleurs sont représentées par des nombres hexadécimaux à six chiffres (par exemple, #333333).
android:duration
int. Durée de l'animation, en millisecondes. La valeur par défaut est de 300 ms.
android:startOffset
int. Durée en millisecondes du décalage de l'animation après l'appel de start().
android:repeatCount
int. Nombre de répétitions d'une animation. Définissez cette valeur sur "-1" pour répéter indéfiniment l'animation, ou sur un entier positif. Par exemple, la valeur "1" signifie que l'animation est répétée une fois après son exécution initiale. Elle est donc lue deux fois au total. La valeur par défaut est "0", ce qui signifie qu'il n'y a pas de répétition.
android:repeatMode
int. Comportement d'une animation lorsqu'elle atteint sa fin. android:repeatCount doit être défini sur un entier positif ou "-1" pour que cet attribut ait un effet. Définissez cette valeur sur "reverse" pour que l'animation soit inversée à chaque itération, ou sur "restart" pour lire l'animation en boucle.
android:valueType
Mot clé. Ne spécifiez pas cet attribut si la valeur est une couleur. Le framework de l'animation gère automatiquement les valeurs de couleur.
ValeurDescription
intTypeIndique que les valeurs animées sont des entiers.
floatType (par défaut)Indique que les valeurs animées sont des valeurs à virgule flottante.
Exemple :
Fichier XML enregistré sous res/animator/property_animator.xml :

<set android:ordering="sequentially">
    <set>
        <objectAnimator
            android:propertyName="x"
            android:duration="500"
            android:valueTo="400"
            android:valueType="intType"/>
        <objectAnimator
            android:propertyName="y"
            android:duration="500"
            android:valueTo="300"
            android:valueType="intType"/>
    </set>
    <objectAnimator
        android:propertyName="alpha"
        android:duration="500"
        android:valueTo="1f"/>
</set>

Pour exécuter cette animation, vous devez gonfler les ressources XML dans le code en un objet AnimatorSet, puis définir les objets cibles de toutes les animations avant de démarrer l'ensemble d'animation. Pour simplifier les choses, l'appel de setTarget() spécifie un objet cible unique pour tous les enfants de AnimatorSet. Pour ce faire, entrez le code suivant :

Kotlin

val set: AnimatorSet = AnimatorInflater.loadAnimator(myContext, R.animator.property_animator)
    .apply {
        setTarget(myObject)
        start()
    }

Java

AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(myContext,
    R.animator.property_animator);
set.setTarget(myObject);
set.start();
Voir aussi :

Afficher l'animation

Le framework d'affichage des animations est compatible avec les animations d'interpolation et "frame par frame", qui peuvent être déclarées au format XML. Les sections suivantes décrivent comment utiliser ces deux méthodes.

Animation d'interpolation

Animation définie en XML qui effectue des transitions telles que la rotation, le fondu, le déplacement et l'étirement d'un élément graphique.

Emplacement du fichier :
res/anim/filename.xml
Le nom de fichier est utilisé comme ID de ressource.
Type de données de la ressource compilée :
Pointeur de ressource vers Animation.
Référence de la ressource :
En Java : R.anim.filename
En XML : @[package:]anim/filename
Syntaxe :
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@[package:]anim/interpolator_resource"
    android:shareInterpolator=["true" | "false"] >
    <alpha
        android:fromAlpha="float"
        android:toAlpha="float" />
    <scale
        android:fromXScale="float"
        android:toXScale="float"
        android:fromYScale="float"
        android:toYScale="float"
        android:pivotX="float"
        android:pivotY="float" />
    <translate
        android:fromXDelta="float"
        android:toXDelta="float"
        android:fromYDelta="float"
        android:toYDelta="float" />
    <rotate
        android:fromDegrees="float"
        android:toDegrees="float"
        android:pivotX="float"
        android:pivotY="float" />
    <set>
        ...
    </set>
</set>

Le fichier doit comporter un seul élément racine : un élément <alpha>, <scale>, <translate>, <rotate> ou <set> qui contient un groupe (ou des groupes) d'autres éléments d'animation (y compris des éléments <set> imbriqués).

Éléments :
<set>
Conteneur dans lequel se trouve d'autres éléments d'animation (<alpha>, <scale>, <translate>, <rotate>) ou d'autres éléments <set>. Représente un AnimationSet.

Attributs :

android:interpolator
Ressource d'interpolateur. Élément Interpolator à appliquer à l'animation. La valeur doit être une référence à une ressource spécifiant un interpolateur (et non un nom de classe d'interpolateur). Des ressources d'interpolateur par défaut sont disponibles sur la plate-forme. Vous pouvez aussi créer votre propre ressource d'interpolateur. Pour en savoir plus sur les interpolateurs, consultez la discussion ci-dessous.
android:shareInterpolator
Booléen. "true" si vous souhaitez partager le même interpolateur entre tous les éléments enfants.
<alpha>
Animation d'ouverture et de fermeture en fondu. Représente un AlphaAnimation.

Attributs :

android:fromAlpha
Float. Décalage d'opacité de départ, où 0 correspond à transparent, et 1 à opaque.
android:toAlpha
Float. Décalage d'opacité de fin, où 0 correspond à transparent, et 1 à opaque.

Pour connaître les autres attributs acceptés par <alpha>, consultez la documentation de référence de la classe Animation (parmi lesquels, tous les attributs XML sont hérités par cet élément).

<scale>
Animation de redimensionnement Vous pouvez spécifier le point central à partir de laquelle l'image s'agrandira vers l'extérieur (ou l'intérieur) en définissant pivotX et pivotY. Par exemple, si ces valeurs correspondent à 0, 0 (angle supérieur gauche), l'agrandissement aura lieu vers le bas et vers la droite. Représente un ScaleAnimation.

Attributs :

android:fromXScale
Float. Décalage de taille X de départ, où 1 correspond à aucun changement.
android:toXScale
Float. Décalage de taille X de fin, où 1 correspond à aucun changement.
android:fromYScale
Float. Décalage de taille Y de départ, où 1 correspond à aucun changement.
android:toYScale
Float. Décalage de taille Y de fin, où 1 correspond à aucun changement.
android:pivotX
Float. La coordonnée X reste fixe lorsque l'objet est mis à l'échelle.
android:pivotY
Float. La coordonnée Y reste fixe lorsque l'objet est mis à l'échelle.

Pour connaître les autres attributs acceptés par <scale>, consultez la documentation de référence de la classe Animation (parmi lesquels, tous les attributs XML sont hérités par cet élément).

<translate>
Mouvement vertical et/ou horizontal. Accepte les attributs ci-dessous dans l'un des trois formats suivants : valeurs comprises entre -100 et 100 se terminant par "%", indiquant un pourcentage par rapport à lui-même, valeurs comprises entre -100 et 100 se terminant par "%p", indiquant un pourcentage par rapport à son parent, float sans suffixe, indiquant une valeur absolue. Représente un TranslateAnimation.

Attributs :

android:fromXDelta
Float ou pourcentage. Décalage X de départ. Exprimé en pixels par rapport à la position normale (par exemple, "5"), en pourcentage par rapport à la largeur de l'élément (par exemple, "5%") ou en pourcentage par rapport à la largeur du parent (par exemple, "5%p").
android:toXDelta
Float ou pourcentage. Décalage X de fin. Exprimé en pixels par rapport à la position normale (par exemple, "5"), en pourcentage par rapport à la largeur de l'élément (par exemple, "5%") ou en pourcentage par rapport à la largeur du parent (par exemple, "5%p").
android:fromYDelta
Float ou pourcentage. Décalage Y de départ. Exprimé en pixels par rapport à la position normale (par exemple, "5"), en pourcentage par rapport à la hauteur de l'élément (par exemple, "5%") ou en pourcentage par rapport à la hauteur du parent (par exemple, "5%p").
android:toYDelta
Float ou pourcentage. Décalage Y de fin. Exprimé en pixels par rapport à la position normale (par exemple, "5"), en pourcentage par rapport à la hauteur de l'élément (par exemple, "5%") ou en pourcentage par rapport à la hauteur du parent (par exemple, "5%p").

Pour connaître les autres attributs acceptés par <translate>, consultez la documentation de référence de la classe Animation (parmi lesquels, tous les attributs XML sont hérités par cet élément).

<rotate>
Animation de rotation Représente un RotateAnimation.

Attributs :

android:fromDegrees
Float. Position angulaire de départ, en degrés.
android:toDegrees
Float. Position angulaire de fin, en degrés.
android:pivotX
Float ou pourcentage. Coordonnée X du centre de rotation. Exprimé en pixels par rapport au bord gauche de l'objet (par exemple, "5"), en pourcentage par rapport au bord gauche de l'objet (par exemple, "5%") ou en pourcentage par rapport au bord gauche du conteneur parent (par exemple, "5%p").
android:pivotY
Float ou pourcentage. Coordonnée Y du centre de rotation. Exprimé en pixels par rapport au bord supérieur de l'objet (par exemple, "5"), en pourcentage par rapport au bord supérieur de l'objet (par exemple, "5%") ou en pourcentage par rapport au bord supérieur du conteneur parent (par exemple, "5%p").

Pour connaître les autres attributs acceptés par <rotate>, consultez la documentation de référence de la classe Animation (parmi lesquels, tous les attributs XML sont hérités par cet élément).

Exemple :
Fichier XML enregistré sous res/anim/hyperspace_jump.xml :

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />
    <set
        android:interpolator="@android:anim/accelerate_interpolator"
        android:startOffset="700">
        <scale
            android:fromXScale="1.4"
            android:toXScale="0.0"
            android:fromYScale="0.6"
            android:toYScale="0.0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:duration="400" />
        <rotate
            android:fromDegrees="0"
            android:toDegrees="-45"
            android:toYScale="0.0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:duration="400" />
    </set>
</set>

Ce code d'application applique l'animation à un élément ImageView et la lance :

Kotlin

val image: ImageView = findViewById(R.id.image)
val hyperspaceJump: Animation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump)
image.startAnimation(hyperspaceJump)

Java

ImageView image = (ImageView) findViewById(R.id.image);
Animation hyperspaceJump = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
image.startAnimation(hyperspaceJump);
Voir aussi :

Interpolateurs

Un interpolateur est un modificateur d'animation défini en XML qui affecte la fréquence de changement d'une animation. Les effets de vos animations existantes peuvent ainsi être accélérés, ralentis, répétés, à rebonds, etc.

Un interpolateur est appliqué à un élément d'animation avec l'attribut android:interpolator, dont la valeur est une référence à une ressource d'interpolateur.

Tous les interpolateurs disponibles dans Android sont des sous-classes de la classe Interpolator. Pour chaque classe d'interpolateur, Android inclut une ressource publique à laquelle vous pouvez renvoyer afin d'appliquer l'interpolateur à une animation à l'aide de l'attribut android:interpolator. Le tableau suivant indique la ressource à utiliser pour chaque interpolateur :

Classe d'interpolateurID de ressource
AccelerateDecelerateInterpolator @android:anim/accelerate_decelerate_interpolator
AccelerateInterpolator @android:anim/accelerate_interpolator
AnticipateInterpolator @android:anim/anticipate_interpolator
AnticipateOvershootInterpolator @android:anim/anticipate_overshoot_interpolator
BounceInterpolator @android:anim/bounce_interpolator
CycleInterpolator @android:anim/cycle_interpolator
DecelerateInterpolator @android:anim/decelerate_interpolator
LinearInterpolator @android:anim/linear_interpolator
OvershootInterpolator @android:anim/overshoot_interpolator

Pour appliquer l'un de ces interpolateurs avec l'attribut android:interpolator, procédez comme suit :

<set android:interpolator="@android:anim/accelerate_interpolator">
    ...
</set>

Interpolateurs personnalisés

Si vous n'êtes pas satisfait des interpolateurs fournis par la plate-forme (indiqués dans le tableau ci-dessus), vous pouvez créer une ressource d'interpolateur personnalisée avec des attributs modifiés. Par exemple, vous pouvez ajuster le taux d'accélération pour AnticipateInterpolator ou le nombre de cycles pour CycleInterpolator. Pour ce faire, vous devez créer votre propre ressource d'interpolateur dans un fichier XML.

Emplacement du fichier :
res/anim/filename.xml
Le nom de fichier est utilisé comme ID de ressource.
Type de données de la ressource compilée :
Pointeur de ressource vers l'objet interpolateur correspondant.
Référence de la ressource :
En XML : @[package:]anim/filename
Syntaxe :
<?xml version="1.0" encoding="utf-8"?>
<InterpolatorName xmlns:android="http://schemas.android.com/apk/res/android"
    android:attribute_name="value"
    />

Si vous n'appliquez aucun attribut, votre interpolateur fonctionnera exactement comme ceux fournis par la plate-forme (indiqués dans le tableau ci-dessus).

Éléments :
Notez que chaque implémentation d'Interpolator, lorsqu'elle est définie en XML, commence par son nom en minuscules.

<accelerateDecelerateInterpolator>
La fréquence de changement commence et se termine lentement, mais accélère au milieu.

Aucun attribut.

<accelerateInterpolator>
La fréquence de changement commence par être lente, puis s'accélère.

Attributs :

android:factor
Float. Taux d'accélération (1 par défaut).
<anticipateInterpolator>
Le changement commence en arrière, puis avance.

Attributs :

android:tension
Float. Quantité de tension à appliquer (la valeur par défaut est 2).
<anticipateOvershootInterpolator>
Le changement commence à l'envers, avance et dépasse la valeur cible, puis revient à la valeur finale.

Attributs :

android:tension
Float. Quantité de tension à appliquer (la valeur par défaut est 2).
android:extraTension
Float. Quantité par laquelle la tension est multipliée (la valeur par défaut est 1,5).
<bounceInterpolator>
Le changement rebondit à la fin.

Aucun attribut.

<cycleInterpolator>
Répète l'animation pendant un nombre défini de cycles. La fréquence de changement suit un modèle sinusoïdal.

Attributs :

android:cycles
Nombre entier. Nombre de cycles (par défaut, 1).
<decelerateInterpolator>
La fréquence de changement commence par être rapide, puis ralentit.

Attributs :

android:factor
Float. Taux de ralentissement (1 par défaut).
<linearInterpolator>
La fréquence de changement est constante.

Aucun attribut.

<overshootInterpolator>
Le changement avance et dépasse la dernière valeur, puis revient en arrière.

Attributs :

android:tension
Float. Quantité de tension à appliquer (la valeur par défaut est 2).
Exemple :

Fichier XML enregistré sous res/anim/my_overshoot_interpolator.xml :

<?xml version="1.0" encoding="utf-8"?>
<overshootInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:tension="7.0"
    />

Ce fichier XML d'animation applique l'interpolateur :

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@anim/my_overshoot_interpolator"
    android:fromXScale="1.0"
    android:toXScale="3.0"
    android:fromYScale="1.0"
    android:toYScale="3.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="700" />

Animation frame par frame

Animation définie en XML qui présente une séquence d'images (comme un film) dans l'ordre.

Emplacement du fichier :
res/drawable/filename.xml
Le nom de fichier est utilisé comme ID de ressource.
Type de données de la ressource compilée :
Pointeur de ressource vers AnimationDrawable.
Référence de la ressource :
En Java : R.drawable.filename
En XML : @[package:]drawable.filename
Syntaxe :
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot=["true" | "false"] >
    <item
        android:drawable="@[package:]drawable/drawable_resource_name"
        android:duration="integer" />
</animation-list>
Éléments :
<animation-list>
Obligatoire. Il doit s'agir de l'élément racine. Contient un ou plusieurs éléments <item>.

Attributs :

android:oneshot
Booléen. "true" si vous souhaitez exécuter l'animation une seule fois ; "false" pour lire l'animation en boucle.
<item>
Frame unique de l'animation. Doit être un enfant d'un élément <animation-list>.

Attributs :

android:drawable
Ressource drawable. Drawable à utiliser pour ce frame.
android:duration
Nombre entier. Durée d'affichage de ce frame, en millisecondes.
Exemple :
Fichier XML enregistré sous res/drawable/rocket_thrust.xml :
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <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>
Ce code d'application définit l'animation en arrière-plan d'une vue, puis la lance :

Kotlin

val rocketImage: ImageView = findViewById(R.id.rocket_image)
rocketImage.setBackgroundResource(R.drawable.rocket_thrust)

val rocketAnimation = rocketImage.background
if (rocketAnimation is Animatable) {
    rocketAnimation.start()
}

Java

ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);

rocketAnimation = rocketImage.getBackground();
if (rocketAnimation instanceof Animatable) {
    ((Animatable)rocketAnimation).start();
}
Voir aussi :