Puedes animar la apariencia del texto carácter por carácter para que parezca un efecto de escritura continua, similar al que produciría una máquina de escribir.
Compatibilidad de versiones
Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.
Dependencias
Anima el texto carácter por carácter
Este código anima el texto carácter por carácter. Realiza un seguimiento de un índice para controlar cuánto texto se revela. El texto que se muestra se actualiza de forma dinámica para mostrar solo los caracteres hasta el índice actual. Por último, la variable ejecuta la animación cuando cambia.
@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)
Puntos clave sobre el código
BreakIteratoritera correctamente sobre los caracteres, independientemente de cómo se almacenen. Por ejemplo, los emojis animados se componen de varios caracteres.BreakIteratorgarantiza que se controlen como un solo carácter para que no se interrumpa la animación.LaunchedEffectinicia una corrutina para introducir la demora entre los caracteres. Puedes reemplazar el bloque de código por un objeto de escucha de clics (o cualquier otro evento) para activar la animación.- El elemento
Textcomponible se vuelve a renderizar cada vez que se actualiza el valor desubstringText.
Resultados
Colecciones que contienen esta guía
Esta guía forma parte de las colecciones seleccionadas de Guías rápidas que abarcan objetivos más amplios de desarrollo para Android:
Texto visible