Anima el aspecto del texto carácter por carácter

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

Figura 1: Texto y emoji animados carácter por carácter.

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

  • BreakIterator itera correctamente sobre los caracteres, independientemente de cómo se almacenen. Por ejemplo, los emojis animados se componen de varios caracteres. BreakIterator garantiza que se controlen como un solo carácter, de modo 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 de substringText.

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:

El texto es una pieza central de cualquier IU. Descubre las diferentes formas en que puedes presentar texto en tu app para proporcionar una experiencia del usuario agradable.
En esta serie de videos, se presentan varias APIs de Compose, se muestra rápidamente lo que está disponible y cómo usarlas.

¿Tienes preguntas o comentarios?

Ve a nuestra página de preguntas frecuentes y obtén información sobre las guías rápidas, o bien comunícate con nosotros y comparte tus opiniones.