Puedes animar, carácter por carácter, la apariencia del texto, de modo que parezca un efecto de escritura en tiempo real, 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. Hace un seguimiento de un índice para controlar cuánta parte del texto se revela. El texto que se muestra se actualiza de forma dinámica para mostrar únicamente 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
BreakIterator
itera correctamente sobre los caracteres, independientemente de cómo se almacenen. Por ejemplo, los emojis animados constan de varios caracteres.BreakIterator
se asegura de que se manejen como un solo carácter para que la animación no se interrumpa.LaunchedEffect
inicia 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
Text
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 estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android: