Afficher une image animée

Vous pouvez créer une expérience utilisateur plus interactive et attrayante dans votre application en chargeant un fichier drawable pour afficher des images animées. Les images animées sont utiles pour créer des indicateurs de chargement, des indicateurs de réussite ou d'erreur, faciliter le développement de jeux et diverses autres fonctions d'interface utilisateur.

Compatibilité des versions

Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.

Dépendances

Afficher une image animée

Le code suivant affiche un vecteur animé qui bascule automatiquement entre deux états:

@Composable
fun AnimatedVectorDrawable() {
    val image = AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated)
    var atEnd by remember { mutableStateOf(false) }
    Image(
        painter = rememberAnimatedVectorPainter(image, atEnd),
        contentDescription = "Timer",
        modifier = Modifier.clickable {
            atEnd = !atEnd
        },
        contentScale = ContentScale.Crop
    )
}
AnimationSnippets.kt

Points clés concernant le code

  • Charge une ressource vectorielle, en animant les attributs de dessin au fil du temps.
  • Instance Image qui utilise une instance Painter pour effectuer l'animation, créée à partir de l'état AnimatedImageVector et boolean par la fonction rememberAnimatedVectorPainter().
  • Lorsque atEnd est true, l'animation de l'instance Painter s'arrête.

Résultats

Sablier qui anime son contenu et tourne
Figure 1. Drawable vectoriel animé dans Compose.

Collections contenant ce guide

Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:

Découvrez des techniques pour utiliser des visuels lumineux et attrayants afin de donner à votre application Android une belle apparence.
Collection de guides rapides

Vous avez des questions ou des commentaires ?

Consultez notre page des questions fréquentes et découvrez les guides rapides, ou contactez-nous pour nous faire part de vos commentaires.
Accéder aux questions fréquentes Envoyer des commentaires