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
BreakIteratoritè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.BreakIteratorgarantit qu'ils sont traités comme un seul caractère, afin que l'animation ne soit pas interrompue.LaunchedEffectdé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
Textest rendu à nouveau chaque fois que la valeur desubstringTextest mise à jour.
Résultats
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 :
Texte à afficher