Как анимировать текст в SwiftUI: разбор TextRenderer

TextRenderer в SwiftUI — протокол, который позволяет рисовать текст вручную: получать строки, фрагменты и отдельные глифы и применять к ним трансформации. Это не просто смена шрифта, а доступ к внутренней структуре текста.

Зачем это нужно

Обычные анимации в SwiftUI работают с текстом как с единым блоком: можно изменить прозрачность, масштаб, цвет. TextRenderer позволяет зайти глубже — анимировать появление по буквам, выделять отдельные слова, добавлять эффекты на уровне глифов. На конференции SwiftLeeds 2026 Eli Perkins из Particle показал, как с помощью TextRenderer сделать текст живым: например, каждая буква появляется со сдвигом и затуханием.

Как устроен TextRenderer

Чтобы использовать рендерер, добавьте к Text модификатор .textRenderer и передайте в него экземпляр структуры, которая соответствует протоколу TextRenderer. Минимальная реализация выглядит так: в методе draw(layout:in:) вы получаете layout, перебираете строки и рисуете каждую в контекст.

struct Passthrough: TextRenderer { func draw(layout: Text.Layout, in context: inout GraphicsContext) { for line in layout { context.draw(line) } } }

SwiftUI разбивает текст на строки, строки — на фрагменты (runs), а фрагменты — на глифы. Фрагмент — это кусок строки с одинаковым стилем: жирное слово, встроенная иконка. Глиф — отдельная буква, пробел или знак препинания. К любому уровню можно применить операции: прозрачность, цвет, трансформации, группировку.

Анимация по глифам

Каждый TextRenderer также соответствует протоколу Animatable. Если добавить свойство animatableData и анимировать его, можно управлять отрисовкой. В примере с конференции рендерер AppearRenderer получает progress от 0 до 1. Внутри draw он собирает все глифы в плоский массив, вычисляет для каждого момент начала и рисует копию контекста с нужной прозрачностью и сдвигом вверх.

Ключевая формула: let start = Double(index) / count * 0.7; let amount = min(max((progress - start) / 0.3, 0), 1). Здесь 0.7 — доля общего прогресса, за которую глифы успевают начать появляться, а 0.3 — длина анимации одного глифа. Меняя эти числа, можно получить волну или каскад.

Готовые рендереры есть в коллекции Prismic от Paul Hudson. С неё проще начать: можно посмотреть, как устроены разные эффекты, и адаптировать под свой проект.

Когда использовать, а когда нет

TextRenderer хорошо подходит для акцентных заголовков и онбординга. Анимация по буквам привлекает внимание и делает интерфейс запоминающимся. Но не стоит анимировать каждый текстовый блок на экране: это отвлекает и может замедлить восприятие. Для обычного появления текста хватит стандартных модификаторов.

Сравнение подходов:

Типичные ошибки

• Анимировать большие объёмы текста. По глифам — красиво, но на длинных абзацах это утомляет и может нагружать CPU/GPU.
• Использовать TextRenderer без необходимости. Если эффект не несёт смысла, он лишний.

На той же конференции Antoine van der Lee поднял вопрос, не теряем ли мы любовь к Swift, когда пишем меньше кода руками. TextRenderer — как раз пример того, где ручной контроль даёт ощутимый результат: вы разбираетесь, как устроен текст изнутри, вместо вызова готового модификатора. И это возвращает интерес к ремеслу.

Попробуйте начать с Passthrough, затем добавьте animatableData и простую прогрессивную анимацию. Дальше можно экспериментировать с цветом и группировкой глифов. Главное — не превращать эффект в самоцель.