Présentation des animations

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

Les animations peuvent ajouter des repères visuels qui informent les utilisateurs de ce qui se passe dans votre application. Ils sont particulièrement utiles lorsque l'interface utilisateur change d'état, par exemple lorsque de nouveaux contenus se chargent ou que de nouvelles actions deviennent disponibles. Les animations ajoutent également une apparence soignée à votre application, ce qui lui donne une apparence et une convivialité de meilleure qualité.

Android inclut différentes API d'animation en fonction du type d'animation souhaité. Cette documentation présente les différentes façons d'ajouter du mouvement à votre interface utilisateur.

Pour mieux comprendre quand utiliser des animations, consultez également le guide Material Design sur les mouvements.

Animer des bitmaps

Figure 1 : Drawable animé.

Pour animer un graphique bitmap tel qu'une icône ou une illustration, utilisez les API d'animation drawable. Généralement, ces animations sont définies de manière statique avec une ressource drawable, mais vous pouvez également définir le comportement de l'animation au moment de l'exécution.

Par exemple, un bon moyen de signaler à l'utilisateur que deux actions sont liées consiste à animer un bouton de lecture qui se transforme en bouton de pause lorsque l'utilisateur appuie dessus.

Pour en savoir plus, consultez Animer des graphiques drawable.

Animer la visibilité et le mouvement de l'UI

Figure 2. Une animation subtile qui apparaît lorsqu'une boîte de dialogue apparaît et disparaît, ce qui rend le changement d'interface utilisateur moins gênant.

Lorsque vous devez modifier la visibilité ou la position des vues dans votre mise en page, il est préférable d'inclure des animations subtiles pour aider l'utilisateur à comprendre les modifications apportées à l'interface utilisateur.

Pour déplacer, afficher ou masquer des vues dans la mise en page actuelle, vous pouvez utiliser le système d'animation des propriétés fourni par le package android.animation, disponible sur Android 3.0 (niveau d'API 11) ou version ultérieure. Ces API mettent à jour les propriétés de vos objets View sur une période donnée, en redessinant continuellement la vue à mesure que les propriétés changent. Par exemple, lorsque vous modifiez les propriétés de position, la vue se déplace sur l'écran. Lorsque vous modifiez la propriété alpha, la vue apparaît ou disparaît en fondu.

Pour créer ces animations le plus simplement possible, activez-les dans votre mise en page. Ainsi, lorsque vous modifiez la visibilité d'une vue, une animation s'appliquera automatiquement. Pour en savoir plus, consultez Animer automatiquement les mises à jour de mise en page.

Pour savoir comment créer des animations à l'aide du système d'animation des propriétés, consultez la présentation des animations de propriétés. Vous pouvez également consulter les pages suivantes pour créer des animations courantes:

Mouvement basé sur la physique

Figure 3. Animation créée avec ObjectAnimator.

Figure 4. Animation créée avec des API basées sur la physique.

Dans la mesure du possible, appliquez la physique du monde réel à vos animations pour qu'elles soient naturelles. Par exemple, elles doivent maintenir une dynamique lorsque leur cible change et effectuer des transitions fluides lors de toute modification.

Pour fournir ces comportements, la bibliothèque Android Support inclut des API d'animation basées sur la physique, qui s'appuient sur les lois de la physique pour contrôler le déroulement de vos animations.

Voici deux animations basées sur la physique courantes:

Les animations qui ne sont pas basées sur la physique, telles que celles créées avec les API ObjectAnimator, sont assez statiques et ont une durée fixe. Si la valeur cible change, vous devez annuler l'animation au moment du changement de la valeur cible, reconfigurer l'animation avec une nouvelle valeur en tant que nouvelle valeur de départ, puis ajouter la nouvelle valeur cible. Visuellement, ce processus crée un arrêt brutal dans l'animation, puis un mouvement incohérent, comme illustré dans la figure 3.

Les animations créées par des API d'animation basées sur la physique, telles que DynamicAnimation, sont déclenchées par la force. La modification de la valeur cible entraîne un changement de force. La nouvelle force s'applique à la vitesse existante, ce qui effectue une transition continue vers la nouvelle cible. Ce processus permet d'obtenir une animation plus naturelle, comme illustré dans la figure 4.

Animer les modifications de mise en page

Figure 5 : Vous pouvez créer une animation pour afficher plus de détails en modifiant la mise en page ou en démarrant une nouvelle activité.

Sur Android 4.4 (niveau d'API 19) ou version ultérieure, vous pouvez utiliser le framework de transition pour créer des animations lorsque vous permutez la mise en page dans l'activité ou le fragment actuels. Il vous suffit de spécifier les mises en page de début et de fin, ainsi que le type d'animation que vous souhaitez utiliser. Ensuite, le système détermine et exécute une animation entre les deux mises en page. Vous pouvez l'utiliser pour permuter l'intégralité de l'UI, ou pour déplacer ou remplacer uniquement certaines vues.

Par exemple, lorsque l'utilisateur appuie sur un élément pour afficher plus d'informations, vous pouvez remplacer la mise en page par les détails de l'élément, en appliquant une transition comme celle illustrée dans la figure 5.

Les mises en page de début et de fin sont chacune stockées dans un élément Scene, bien que la scène de départ soit généralement déterminée automatiquement à partir de la mise en page actuelle. Vous créez un Transition pour indiquer au système le type d'animation souhaité, puis vous appelez TransitionManager.go() et le système exécute l'animation pour échanger les mises en page.

Pour en savoir plus, consultez Animer les modifications de mise en page à l'aide d'une transition. Pour obtenir un exemple de code, consultez BasicTransition.

Créer des animations entre deux activités

Sur Android 5.0 (niveau d'API 21) ou version ultérieure, vous pouvez également créer des animations qui passent d'une activité à une autre. Cette approche est basée sur le même framework de transition que celui décrit dans la section précédente, mais vous permet de créer des animations entre les mises en page dans des activités distinctes.

Vous pouvez appliquer des animations simples, comme faire glisser la nouvelle activité sur le côté ou la faire apparaître en fondu, mais vous pouvez également créer des animations qui passent d'une vue partagée à l'autre dans chaque activité. Par exemple, lorsque l'utilisateur appuie sur un élément pour afficher plus d'informations, vous pouvez passer à une nouvelle activité avec une animation qui agrandit naturellement cet élément pour remplir l'écran, comme l'animation de la figure 5.

Comme d'habitude, vous appelez startActivity(), mais vous lui transmettez un ensemble d'options fournies par ActivityOptions.makeSceneTransitionAnimation(). Ce groupe d'options peut inclure les vues partagées entre les activités afin que le framework de transition puisse les connecter pendant l'animation.

Pour accéder à des ressources supplémentaires, consultez les pages suivantes: