Afficher l'animation

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

Vous pouvez utiliser le système d'animation des vues pour effectuer une animation interpolée sur les vues. L'animation d'interpolation calcule l'animation à l'aide d'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 d'interpolation 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. Si elle comporte une image de fond, celle-ci sera transformée avec le texte. animation package fournit toutes les classes utilisées dans une animation d'interpolation.

Une séquence d'instructions d'animation définit l'animation d'interpolation, définie par XML ou par code Android. Comme pour la définition d'une mise en page, nous vous recommandons d'utiliser un fichier XML, 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 classe AnimationSet et les autres sous-classes Animation.)

Les instructions d'animation définissent les transformations que vous souhaitez effectuer, le moment où elles doivent se produire et la durée de leur application. 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 vous pouvez faire en sorte que le texte se déplace et pivote simultanément. Chaque transformation utilise 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épart et angle de fin pour la rotation, etc.), ainsi qu'un ensemble de paramètres communs (par exemple, l'heure de début et la 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 : un élément <alpha>, <scale>, <translate>, <rotate>, un élément interpolator ou un élément <set> qui contient 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'ils 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, extrait de l'un des exemples ApiDemos, permet d'étirer, puis de faire pivoter et de faire pivoter 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 de l'écran (non utilisées dans cet exemple) sont (0,0) dans l'angle supérieur gauche et augmentent à mesure que vous descendez et 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 à l'élément 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 lui attribuant un Interpolator. Android inclut plusieurs sous-classes Interpolator qui spécifient différentes courbes de vitesse : par exemple, AccelerateInterpolator indique à une transformation de commencer lentement et de s'accélérer. Chacune d'elles possède une valeur d'attribut pouvant être appliquée dans le fichier XML.

Une fois ce fichier XML enregistré en tant que hyperspace_jump.xml dans le répertoire res/anim/ du projet, le code suivant le référencera et l'appliquera à 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, ainsi que sur les balises et les attributs disponibles, consultez la section Ressources d'animation.

Remarque : Quelle que soit la façon dont votre animation peut se déplacer ou se redimensionner, les limites de la vue qui contient votre animation ne s'ajusteront pas automatiquement pour l'accueillir. Néanmoins, l'animation reste dessinée au-delà des limites de sa vue et n'est pas rognée. Toutefois, le découpage se produit si l'animation dépasse les limites de la vue parente.