animować wygląd tekstu znak po znaku;

Możesz animować pojawianie się tekstu znak po znaku, aby wyglądał jak efekt pisania strumieniowego, podobnie jak w przypadku maszyny do pisania.

Zgodność wersji

Ta implementacja wymaga, aby minimalny pakiet SDK projektu był ustawiony na poziom API 21 lub wyższy.

Zależności

Animowanie tekstu znak po znaku

Ten kod animuje tekst znak po znaku. Śledzi indeks, aby kontrolować, ile tekstu jest widoczne. Wyświetlany tekst jest dynamicznie aktualizowany, aby pokazywać tylko znaki do bieżącego indeksu. Gdy zmienna się zmieni, uruchomi animację.

@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)

Najważniejsze informacje o kodzie

  • BreakIterator prawidłowo iteruje po znakach niezależnie od sposobu ich przechowywania. Na przykład animowane emoji składają się z wielu znaków. Atrybut BreakIterator zapewnia, że są one traktowane jako jeden znak, dzięki czemu animacja nie jest przerywana.
  • LaunchedEffect uruchamia korutynę, aby wprowadzić opóźnienie między znakami. Blok kodu możesz zastąpić modułem nasłuchiwania kliknięć lub dowolnym innym zdarzeniem, aby aktywować animację.
  • Funkcja kompozycyjna Text jest ponownie renderowana za każdym razem, gdy wartość substringText jest aktualizowana.

Wyniki

Rysunek 1. Tekst i emotikony animowane znak po znaku.

Kolekcje, które zawierają ten przewodnik

Ten przewodnik jest częścią wyselekcjonowanych kolekcji przewodników, które obejmują szersze cele związane z programowaniem na Androida:

Tekst jest kluczowym elementem każdego interfejsu. Poznaj różne sposoby wyświetlania tekstu w aplikacji, aby zapewnić użytkownikom jak najlepsze wrażenia.
Ta seria filmów przedstawia różne interfejsy API Compose, szybko pokazując, co jest dostępne i jak z nich korzystać.

Masz pytania lub chcesz podzielić się opinią?

Odwiedź stronę z najczęstszymi pytaniami, aby zapoznać się z przewodnikami, lub skontaktuj się z nami i podziel się swoimi przemyśleniami.