animować wygląd tekstu znak po znaku;

Możesz animować tekst, literę po literze, tak aby wyglądał jak strumień tekstu, podobny do tego, który wytwarza maszyna do pisania.

Zgodność wersji

Ta implementacja wymaga, aby minimalna wersja pakietu SDK projektu była ustawiona na poziom API 21 lub wyższy.

Zależności

Animowanie tekstu znak po znaku

Ten kod animuje tekst znak po znaku. Śledzenie indeksu pozwala kontrolować, ile tekstu jest widoczne. Wyświetlany tekst jest aktualizowany dynamicznie, aby wyświetlać tylko znaki do bieżącego indeksu. Na koniec zmienna uruchamia animację, gdy się zmieni.

@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 poprawnie iteruje po znakach niezależnie od tego, jak są przechowywane. Na przykład animowane emotikony składają się z wielu znaków. Opcja BreakIterator sprawia, że są one traktowane jako pojedynczy znak, dzięki czemu animacja nie jest przerywana.
  • LaunchedEffect uruchamia coroutine, aby wprowadzić opóźnienie między znakami. Aby wywołać animację, możesz zastąpić blok kodu listenerem kliknięcia lub dowolnym innym zdarzeniem.
  • Komponent Text jest ponownie renderowany za każdym razem, gdy wartość substringText ulegnie zmianie.

Wyniki

Rysunek 1. Tekst i emotikony animowane znak po znaku.

Kolekcje zawierające ten przewodnik

Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze zagadnienia związane z tworzeniem aplikacji na Androida:

Tekst jest centralnym elementem każdego interfejsu użytkownika. Dowiedz się, jak możesz wyświetlać tekst w aplikacji, aby zapewnić użytkownikom przyjemne wrażenia.
Ta seria filmów przedstawia różne interfejsy API usługi Compose, szybko pokazując, co jest dostępne i jak z nich korzystać.

Masz pytania lub chcesz przekazać opinię?

Otwórz stronę z najczęstszymi pytaniami i poznaj krótkie przewodniki lub skontaktuj się z nami i powiedz nam, co o tym myślisz.