Animer l'apparence du texte caractère par caractère

Vous pouvez animer l'apparence du texte caractère par caractère, de sorte qu'il ressemble à un effet de saisie en continu, semblable à celui d'une machine à écrire.

Compatibilité des versions

Cette implémentation nécessite que le minSDK de votre projet soit défini sur le niveau d'API 21 ou supérieur.

Dépendances

Animer le texte caractère par caractère

Ce code anime le texte caractère par caractère. Il suit un index pour contrôler la quantité de texte révélée. Le texte affiché est mis à jour de manière dynamique pour n'afficher que les caractères jusqu'à l'index actuel. Enfin, la variable exécute l'animation lorsqu'elle change.

@Composable
private fun AnimatedText() {
    val text = "This text animates as though it is being typed \uD83E\uDDDE\u200D♀\uFE0F \uD83D\uDD10  \uD83D\uDC69\u200D❤\uFE0F\u200D\uD83D\uDC68 \uD83D\uDC74\uD83C\uDFFD"

    // Use BreakIterator as it correctly iterates over characters regardless of how they are
    // stored, for example, some emojis are made up of multiple characters.
    // You don't want to break up an emoji as it animates, so using BreakIterator will ensure
    // this is correctly handled!
    val breakIterator = remember(text) { BreakIterator.getCharacterInstance() }

    // Define how many milliseconds between each character should pause for. This will create the
    // illusion of an animation, as we delay the job after each character is iterated on.
    val typingDelayInMs = 50L

    var substringText by remember {
        mutableStateOf("")
    }
    LaunchedEffect(text) {
        // Initial start delay of the typing animation
        delay(1000)
        breakIterator.text = StringCharacterIterator(text)

        var nextIndex = breakIterator.next()
        // Iterate over the string, by index boundary
        while (nextIndex != BreakIterator.DONE) {
            substringText = text.subSequence(0, nextIndex).toString()
            // Go to the next logical character boundary
            nextIndex = breakIterator.next()
            delay(typingDelayInMs)
        }
    }
    Text(substringText)

Points clés concernant le code

  • BreakIterator itère correctement sur les caractères, quelle que soit la façon dont ils sont stockés. Par exemple, les emojis animés sont composés de plusieurs caractères. BreakIterator garantit qu'ils sont traités comme un seul caractère, afin que l'animation ne soit pas interrompue.
  • LaunchedEffect démarre une coroutine pour introduire le délai entre les caractères. Vous pouvez remplacer le bloc de code par un écouteur de clic (ou tout autre événement) pour déclencher l'animation.
  • Le composable Text est rendu à nouveau chaque fois que la valeur de substringText est mise à jour.

Résultats

Figure 1 : Texte et emoji animés caractère par caractère.

Collections contenant ce guide

Ce guide fait partie des collections de guides de démarrage rapide organisées qui couvrent des objectifs de développement Android plus larges :

Le texte est un élément central de n'importe quelle UI. Découvrez différentes façons de présenter du texte dans votre application pour offrir une expérience utilisateur agréable.
Cette série de vidéos présente différentes API Compose, en vous montrant rapidement ce qui est disponible et comment les utiliser.

Poser des questions ou envoyer des commentaires

Consultez notre page de questions fréquentes et découvrez nos guides rapides. Vous pouvez également nous contacter pour nous faire part de vos commentaires.