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 desubstringText
est mise à jour.
Résultats
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:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=fr)
Texte à afficher
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=fr)