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

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

Результаты

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

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

Для данной реализации требуется, чтобы в вашем проекте был установлен уровень 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 .

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

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

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

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

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