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

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

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

Animer le texte caractère par caractère

Ce code anime le texte caractère par caractère. Il suit un indice 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 emoji animés sont composés de plusieurs caractères. BreakIterator s'assure 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 à nouveau affiché 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 de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:

Le texte est un élément central de n'importe quelle interface utilisateur. Découvrez les 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, vous montrant rapidement ce qui est disponible et comment les utiliser.

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.