Animare l'aspetto del testo carattere per carattere

Puoi animare, carattere per carattere, l'aspetto del testo, in modo che assomigli a un effetto di digitazione in streaming, simile a quello prodotto da una macchina da scrivere.

Compatibilità delle versioni

Questa implementazione richiede che il valore minSDK del progetto sia impostato sul livello API 21 o superiore.

Dipendenze

Animare il testo carattere per carattere

Questo codice anima il testo carattere per carattere. Monitora un indice per controllare la quantità di testo visualizzata. Il testo visualizzato viene aggiornato dinamicamente in modo da mostrare solo i caratteri fino all'indice corrente. Infine, la variabile esegue l'animazione quando 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)

Punti chiave del codice

  • BreakIterator esegue correttamente l'iterazione sui caratteri indipendentemente da come sono memorizzati. Ad esempio, gli emoji animati sono composti da più caratteri.BreakIterator garantisce che vengano gestiti come un singolo carattere, in modo che l'animazione non venga interrotta.
  • LaunchedEffect avvia una coroutine per introdurre il ritardo tra i caratteri. Puoi sostituire il blocco di codice con un ascoltatore di clic o qualsiasi altro evento per attivare l'animazione.
  • Il composable Text viene visualizzato di nuovo ogni volta che il valore di substringText viene aggiornato.

Risultati

Figura 1. Testo ed emoji animati carattere per carattere.

Raccolte che contengono questa guida

Questa guida fa parte di queste raccolte di guide rapide selezionate che coprono obiettivi di sviluppo Android più ampi:

Il testo è un elemento centrale di qualsiasi interfaccia utente. Scopri diversi modi per presentare il testo nella tua app in modo da offrire un'esperienza utente piacevole.
Questa serie di video introduce varie API Compose, mostrando rapidamente cosa è disponibile e come utilizzarle.

Domande o feedback

Visita la nostra pagina delle domande frequenti e scopri le guide rapide o contattaci per farci sapere cosa ne pensi.