Puedes animar, carácter por carácter, la apariencia del texto para que parezca un efecto de escritura de transmisión, similar a lo que produciría una máquina de escribir.
Resultados
Compatibilidad de versiones
Esta implementación requiere que tu proyecto minSDK se establezca en el nivel de API 21 o superior.
Dependencias
Cómo animar 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, de modo que la animación no se interrumpa.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 componible
Textse vuelve a renderizar cada vez que se actualiza el valor desubstringText.
Colecciones que contienen esta guía
Esta guía forma parte de estas colecciones seleccionadas de Guías rápidas que abarcan objetivos más amplios de desarrollo de Android:
Texto visible