Посимвольная анимация внешнего вида текста

Вы можете анимировать посимвольно внешний вид текста, чтобы он выглядел как эффект потокового набора текста, аналогичный тому, который производит пишущая машинка.

Совместимость версий

Для этой реализации требуется, чтобы в minSDK вашего проекта был установлен уровень API 21 или выше.

Зависимости

Анимация текста посимвольно

Этот код анимирует текст посимвольно. Он отслеживает индекс, чтобы контролировать, какая часть текста отображается. Отображаемый текст обновляется динамически, отображая только символы до текущего индекса. Наконец, переменная запускает анимацию при ее изменении.

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

Ключевые моменты о коде

  • BreakIterator корректно перебирает символы независимо от того, как они хранятся. Например, анимированные смайлы состоят из нескольких символов; BreakIterator гарантирует, что они обрабатываются как один символ, чтобы анимация не прерывалась.
  • LaunchedEffect запускает сопрограмму, чтобы ввести задержку между символами. Вы можете заменить блок кода прослушивателем кликов или любым другим событием, чтобы вызвать анимацию.
  • Компонуемый Text перерисовывается каждый раз, когда значение substringText обновляется.

Результаты

Рисунок 1. Текст и смайлы, анимированные посимвольно.

Коллекции, содержащие это руководство

Это руководство является частью тщательно подобранной коллекции быстрых руководств, охватывающих более широкие цели разработки Android:

Текст — центральная часть любого пользовательского интерфейса. Узнайте, как можно представить текст в своем приложении, чтобы обеспечить приятный пользовательский опыт.
В этой серии видеороликов представлены различные API Compose, быстро показано, что доступно и как их использовать.

Есть вопросы или отзывы

Перейдите на нашу страницу часто задаваемых вопросов и узнайте о кратких руководствах или свяжитесь с нами и сообщите нам свои мысли.