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

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 de substringText.

Resultados

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

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:

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 encantadora.
En esta serie de videos, se presentan varias APIs de Compose y se muestra rápidamente lo que está disponible y cómo usarlo.

Tienes preguntas o comentarios

Ve a nuestra página de preguntas frecuentes para obtener información sobre las guías rápidas o comunícate con nosotros para contarnos tu opinión.