Afficher l'animation

Essayer Compose
Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment utiliser des animations dans Compose.

Vous pouvez utiliser le système d'animation de vue pour effectuer une animation interpolée sur les vues. L'animation interpolée calcule l'animation avec des informations telles que le point de départ, le point d'arrivée, la taille, la rotation et d'autres aspects courants d'une animation.

Une animation interpolée peut effectuer une série de transformations simples (position, taille, rotation, et transparence) sur le contenu d'un objet View. Ainsi, si vous disposez d'un objet TextView, vous pouvez déplacer, faire pivoter, agrandir ou réduire le texte. S'il comporte une image d'arrière-plan, celle-ci sera transformée en même temps que le texte. Le animation package fournit toutes les classes utilisées dans une animation interpolée.

Une séquence d'instructions d'animation définit l'animation interpolée, définie par du code XML ou Android. Comme pour la définition d'une mise en page, un fichier XML est recommandé, car il est plus lisible, réutilisable et interchangeable que le codage en dur de l'animation. Dans l'exemple ci-dessous, nous utilisons XML. (Pour en savoir plus sur la définition d'une animation dans le code de votre application au lieu de XML, consultez la AnimationSet classe et d'autres Animation sous-classes.)

Les instructions d'animation définissent les transformations que vous souhaitez appliquer, quand elles doivent se produire et combien de temps elles doivent prendre. Les transformations peuvent être séquentielles ou simultanées . Par exemple, vous pouvez faire en sorte que le contenu d'un TextView se déplace de gauche à droite, puis pivote de 180 degrés, ou que le texte se déplace et pivote simultanément. Chaque transformation prend un ensemble de paramètres spécifiques à cette transformation (taille de début et taille de fin pour le changement de taille, angle de début et angle de fin pour la rotation, etc.), ainsi qu'un ensemble de paramètres communs (par exemple, heure de début et durée). Pour que plusieurs transformations se produisent simultanément, attribuez-leur la même heure de début. Pour les rendre séquentielles, calculez l'heure de début plus la durée de la transformation précédente.

Le fichier XML d'animation se trouve dans le répertoire res/anim/ de votre projet Android. Le fichier doit comporter un seul élément racine : il s'agit d'un seul <alpha>, <scale>, <translate>, <rotate>, d'un élément d'interpolateur ou d'un élément <set> contenant des groupes de ces éléments (qui peuvent inclure un autre <set>). Par défaut, toutes les instructions d'animation sont appliquées simultanément. Pour qu'elles se produisent de manière séquentielle, vous devez spécifier l'attribut startOffset, comme indiqué dans l'exemple ci-dessous.

Le code XML suivant, issu de l'une des ApiDemos, est utilisé pour étirer, puis faire pivoter et tourner simultanément un objet View.

<set 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/decelerate_interpolator">
        <scale
           android:fromXScale="1.4"
           android:toXScale="0.0"
           android:fromYScale="0.6"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400"
           android:fillBefore="false" />
        <rotate
           android:fromDegrees="0"
           android:toDegrees="-45"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400" />
    </set>
</set>

Les coordonnées d'écran (non utilisées dans cet exemple) sont (0,0) en haut à gauche et augmentent lorsque vous descendez et allez vers la droite.

Certaines valeurs, telles que pivotX, peuvent être spécifiées par rapport à l'objet lui-même ou par rapport au parent. Veillez à utiliser le format approprié pour ce que vous souhaitez ("50" pour 50% par rapport au parent, ou "50%" pour 50% par rapport à lui-même).

Vous pouvez déterminer comment une transformation est appliquée au fil du temps en attribuant un Interpolator. Android inclut plusieurs sous-classes d'interpolateur qui spécifient différentes courbes de vitesse : par exemple, AccelerateInterpolator indique à une transformation de commencer lentement et d'accélérer. Chacune possède une valeur d'attribut qui peut être appliquée dans le code XML.

Une fois ce code XML enregistré sous le nom hyperspace_jump.xml dans le répertoire res/anim/ du projet, le code suivant le référence et l'applique à un objet ImageView de la mise en page.

Kotlin

AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump).also { hyperspaceJumpAnimation ->
    findViewById<ImageView>(R.id.spaceshipImage).startAnimation(hyperspaceJumpAnimation)
}

Java

ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
spaceshipImage.startAnimation(hyperspaceJumpAnimation);

Au lieu de startAnimation(), vous pouvez définir une heure de début pour l'animation avec Animation.setStartTime(), puis attribuer l'animation à la vue avec View.setAnimation().

Pour en savoir plus sur la syntaxe XML, les balises et les attributs disponibles, consultez Ressources d'animation.

Remarque : Quelle que soit la façon dont votre animation se déplace ou est redimensionnée, les limites de la vue qui la contient ne s'ajustent pas automatiquement pour l'adapter. Toutefois, l'animation sera toujours dessinée au-delà des limites de sa vue et ne sera pas rognée. Cependant, le rognage se produira si l'animation dépasse les limites de la vue parente.