# General Translation Knowledge Base: Как перевести анимации Lottie? URL: https://generaltranslation.com/ru/kb/translate-lottie-animations.mdx Docs index: https://generaltranslation.com/llms.txt Description: Переведите строки в текстовых слоях анимации — в Lottie JSON они хранятся по пути t.d.k[].s.t, — а затем убедитесь, что каждый перевод помещается в свой блок, шрифты поддерживают новую письменность и никакой текст не был экспортирован в виде фигур. Экспортируйте анимацию заново для каждого языка, подменяйте текст во время выполнения или обрабатывайте JSON скриптом; CLI от General Translation переводит файлы .lottie формата dotLottie 1.0 и заново подгоняет компоновку. Category: Перевод Last updated: 2026-10-28 Authors: General Translation Team Published: 2026-10-28 Анимация Lottie — это JSON, который обычно экспортируют из After Effects с помощью плагина Bodymovin. Её текст находится внутри текстовых слоёв, а не в отдельном файле строк. Чтобы перевести такую анимацию, нужно заменить этот текст для каждого языка, не сломав саму анимацию. Перевести слова несложно — основные трудности создают фиксированные размеры блоков, встроенные шрифты и глифы, а также письменности с направлением right-to-left. ## Где хранится текст в файле Lottie Тип слоя задаётся полем `ty`, текстовые слои имеют тип `5`. У каждого текстового слоя есть объект `t`, документ которого (`t.d`) хранит ключевые кадры в `k`; поле `s` каждого ключевого кадра — это текстовый документ, где `t` содержит саму строку, а переносы строк записываются как `\r`. В текстовом документе также указываются шрифт (`f`), размер (`s`), а для текста в рамке — размер рамки (`sz`) и её положение (`ps`). Если текст меняется по ходу анимации, каждому изменению соответствует отдельный ключевой кадр ([Документация Lottie: Text](https://lottiefiles.github.io/lottie-docs/text/), [Layers](https://lottiefiles.github.io/lottie-docs/layers/)): ```json title="animation.json (excerpt)" { "fonts": { "list": [ { "fName": "Inter-Bold", "fFamily": "Inter", "fStyle": "Bold", "origin": 0 } ] }, "layers": [ { "ty": 5, "nm": "Headline", "t": { "d": { "k": [ { "t": 0, "s": { "t": "Start your free trial", "f": "Inter-Bold", "s": 48, "sz": [600, 80], "ps": [-300, -40] } } ] } } } ] } ``` Важны ещё три места: * **Прекомпозиции.** Вложенные композиции хранят свои слои в `assets[].layers`, поэтому текстовые слои могут находиться и там, а не только в массиве `layers` верхнего уровня. * **Шрифты и глифы.** В `fonts.list` указано название каждого шрифта. Если дизайнер включил в Bodymovin настройку **Glyphs**, в файле есть ещё и массив `chars` с контурами всех используемых символов; если она выключена, плееру нужен сам файл шрифта ([Lottie: After Effects export settings](https://lottie.airbnb.tech/#/after-effects)). Глифы отображаются на Android и в вебе, но не на iOS — там нужны шрифты ([Lottie: Supported features](https://lottie.airbnb.tech/#/supported-features)). * **Текст, преобразованный в фигуры.** Текст, который дизайнер преобразовал в фигуры в After Effects, становится слоем-фигурой (`ty` 4), и строки для перевода в нём уже нет. Такой слой нужно снова превратить в текстовый в After Effects. Файл `.lottie` — это пакет dotLottie: ZIP-архив с `manifest.json` и одним или несколькими JSON-файлами анимаций, а также необязательными изображениями и шрифтами ([dotLottie 2.0 spec](https://dotlottie.io/spec/2.0/)). Текст в JSON каждой анимации находится в тех же местах. ## Что идёт не так при переводе анимации * **Увеличение длины текста.** Длина перевода редко совпадает с длиной источника. На [сайте General Translation](https://generaltranslation.com) надпись «Save changes» на немецком на 63% шире, чем на английском. У текстового слоя с рамкой фиксированный `sz`, поэтому более длинный текст переносится на лишние строки, не предусмотренные дизайном, а точечный текст (без рамки) может выйти за пределы кадра. * **Отсутствующие символы.** В шрифте, поддерживающем только латиницу, нет японских, китайских или арабских символов. Если глифы экспортированы, файл содержит контуры только тех символов, которые встречались в английском тексте; мейнтейнеры lottie-web отмечают, что все глифы для нового текста «должны быть экспортированы из AE» ([вики lottie-web](https://github.com/airbnb/lottie-web/wiki/TextLayer.updateDocumentData)). * **Текст right-to-left.** Плееры поддерживают его по-разному. В lottie-android есть открытые задачи, связанные с текстом right-to-left ([#1145](https://github.com/airbnb/lottie-android/issues/1145)) и с арабскими буквами, которые отображаются без соединений ([#2279](https://github.com/airbnb/lottie-android/issues/2279)). (О странице, на которой размещена анимация, см. [Как поддержать языки RTL (right-to-left) в CSS?](/kb/right-to-left-css).) * **Текст, управляемый выражениями.** Выражения After Effects — это код на JavaScript, хранящийся в файле (свойство `x`). Если содержимое текстового слоя задаётся выражением, оно вычисляется во время воспроизведения анимации, поэтому фиксированной строки для перевода просто нет. Перед переводом протестируйте исходную анимацию на более длинном тексте с диакритическими знаками. (См. [Что такое псевдолокализация?](/kb/pseudo-localization).) ## Способы перевести анимацию Lottie | Подход | Где меняется текст | Подгонка размеров и шрифты | Можно повторять при каждом релизе | Что остаётся на вас | | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | Повторный экспорт из After Effects для каждого языка | Дизайнер дублирует композицию, правит каждый текстовый слой и экспортирует по файлу на каждый язык | Дизайнер подгоняет каждую версию на глаз | Нет; любую правку текста приходится повторять для каждого языка | Отдельный файл на каждый язык и время дизайнера на каждый из них | | Замена текста во время выполнения | Плеер подставляет строки во время рендеринга анимации | Частично; lottie-web умеет уменьшать текст в рамке, чтобы он поместился, но шрифт, глифы и соседние слои остаются как есть | Да; строки берутся из переводов вашего приложения | Подгонка размеров, поддержка шрифтов и глифов для каждого языка, а также стабильные ключи (исходный текст или имена слоёв) | | Правка JSON скриптом | Скрипт заменяет каждое значение `s.t`, часто с помощью машинного перевода или LLM | Нет | Да | Переносы строк, подгонка размеров, шрифты, глифы и повторная упаковка файлов `.lottie` | | General Translation CLI | [`gt stage`](/docs/cli/reference/commands/stage) и [`gt download`](/docs/cli/reference/commands/download) создают переведённый файл `.lottie` для каждого языка | Обработка компоновки заново подгоняет текст и соседние слои по загруженным вами шрифтам | Да | Проверка каждой анимации, удаление выражений и расход обработки компоновки | Замена во время выполнения встроена в плееры. В lottie-android `TextDelegate` сопоставляет исходный текст с заменяющим, а `LottieProperty.TEXT` задаёт его через динамические свойства ([Lottie for Android](https://lottie.airbnb.tech/#/android)): ```kotlin // Заменяем английский текст анимации локализованным строковым ресурсом. val textDelegate = TextDelegate(animationView) textDelegate.setText("Start your free trial", getString(R.string.trial_cta)) animationView.setTextDelegate(textDelegate) ``` В lottie-ios присвойте `animationView.textProvider` объект `DictionaryTextProvider`, ключами которого служат keypath текстовых слоёв ([исходный код lottie-ios](https://github.com/airbnb/lottie-ios/blob/master/Sources/Public/TextProvider/AnimationTextProvider.swift)). В lottie-web вызовите `updateDocumentData` для элемента текстового слоя. Метод `setTextSlot` веб-плеера dotLottie заменяет текст, который дизайнер вынес в слот ([слоты dotLottie](https://docs.lottiefiles.com/en/runtimes/distributions/js/v0.x/core-concepts/slots)). Кроме того, lottie-web умеет уменьшать текст в рамке, чтобы он помещался в рамку: [`canResizeFont(true)`](https://github.com/airbnb/lottie-web/wiki/TextLayer.canResizeFont) уменьшает размер шрифта текстового слоя, пока строка не поместится в рамку, но не ниже порога, заданного через [`setMinimumFontSize`](https://github.com/airbnb/lottie-web/wiki/TextLayer.setMinimumFontSize). Ни один из этих API не перемещает и не меняет размер слоёв вокруг текста — например, фигуры кнопки под подписью. Экспортируйте анимацию из After Effects заново, если она выходит на одном-двух языках и дизайнер хочет вручную настроить каждый кадр. Заменяйте текст во время выполнения, если он приходит из вашего приложения (например, имя пользователя), а в рамке хватает места для самого длинного перевода. Выбирайте General Translation, если анимации выходят на многих языках, меняются от релиза к релизу и требуют подгонки компоновки под каждый язык. Обрабатывайте JSON собственными скриптами, только если готовы сами отвечать за проверку размещения текста и шрифтов. ## Как переводить файлы Lottie с помощью General Translation CLI General Translation — `gt` — переводит файлы dotLottie через файловый ключ `lottie` (требуется `gt` версии 2.16.0 или новее). Добавьте запись `lottie` и укажите в пути плейсхолдер `[locale]`: ```json title="gt.config.json" { "defaultLocale": "en", "locales": ["es", "ja"], "files": { "lottie": { "include": ["animations/[locale]/**/*.lottie"] } }, "fonts": { "include": ["assets/fonts/**/*.{ttf,otf}"] } } ``` Исходные анимации берутся из `animations/en/`, а переводы сохраняются в `animations/es/` и `animations/ja/`. Перевод Lottie выполняется асинхронно, поэтому отправьте файлы командой [`npx gt stage`](/docs/cli/reference/commands/stage), а затем запускайте [`npx gt download`](/docs/cli/reference/commands/download), пока не будут готовы все локали; локали, которые ещё обрабатываются, пропускаются и загружаются при одном из следующих запусков. [`gt translate`](/docs/cli/reference/commands/translate) не может завершить неподготовленную задачу Lottie за один запуск и предложит сначала выполнить `stage`. Загружаются готовые файлы `.lottie`; в CDN они не публикуются. General Translation считывает JSON анимации из папки `animations/` пакета — это структура dotLottie 1.0. В пакетах dotLottie 2.0 он хранится в `a/`, а обычная анимация `.json` вообще не является пакетом. Оба варианта можно преобразовать с помощью [`@dotlottie/dotlottie-js`](https://github.com/dotlottie/dotlottie-js): `toDotLottieV1` и `DotLottieV1` создают структуру 1.0. После перевода обработка компоновки сохраняет размеры шрифтов анимации, переносит текст и сдвигает соседние слои, чтобы уместить каждую надпись. Если надпись всё равно не помещается, её можно сократить или перефразировать на языке перевода с сохранением смысла, а многоточие — лишь крайняя мера; моноширинные фрагменты кода никогда не сокращаются. Если изменения компоновки не удаётся отрендерить и проверить, вы получите обычную переведённую анимацию без них. Просматривайте каждый загруженный файл перед публикацией. (См. [справочник по Lottie](/docs/cli/reference/formats/lottie-files).) Параметр верхнего уровня [`fonts`](/docs/cli/reference/config#fonts) загружает ваши файлы `.ttf` и `.otf`, чтобы при обработке компоновки использовались настоящие шрифты анимации; если в анимацию встроены глифы, General Translation добавляет контуры символов, нужных каждому переводу, и берёт их из загруженных шрифтов, если те содержат эти символы. Шрифты являются ресурсами Организации, поэтому для загрузки нужен сохранённый вход в систему или ключ API Организации с правом `org:assets:write`; ключ API проекта загружать их не может — в этом случае перевод продолжается с резервными шрифтами и выводит предупреждение. Файлы с выражениями After Effects отклоняются, поскольку выражения — это исполняемый код; экспортируйте файл заново, удалив выражения или запекая их в ключевые кадры. ### Что изменила обработка компоновки в тесте Мы создали анимацию кнопки-«таблетки» размером 480 × 160: иконка 18px, затем надпись «Download invoice» шрифтом Arial Bold 22px с внутренними отступами от 16 до 18px. Мы перевели её на немецкий, французский и японский с помощью `gt` 2.26.11 и ключа API проекта, поэтому шрифты не загружались, и при обработке компоновки использовались резервные шрифты. Каждую надпись мы измеряли в SVG-рендерере lottie-web 5.13 со шрифтами браузера. Строки с полным переводом — это переводы надписей, выполненные General Translation как обычные строки вне анимации и для сравнения помещённые в исходную кнопку: | Версия | Текст надписи | Ширина надписи | Ширина кнопки | Результат | | -------------------------------- | ---------------------- | -------------- | ------------- | ---------------------------------------------------------------------------------- | | Английский источник | Download invoice | 187px | 251px | Помещается, 11px от иконки | | Немецкий, полный перевод | Rechnung herunterladen | 260px | 251px | Перекрывает иконку на 25px и выходит за край на 18px | | Немецкий, General Translation | Rechnung laden | 171px | 251px | Помещается | | Французский, полный перевод | Télécharger la facture | 229px | 251px | Перекрывает иконку на 9px и выходит за край на 2px | | Французский, General Translation | Télécharger facture | 204px | 273px | Помещается; кнопка расширилась вправо на 22px, а надпись оказалась в 3px от иконки | | Японский, полный перевод | 請求書をダウンロード | 220px | 251px | Перекрывает иконку на 5px | | Японский, General Translation | 請求書取得 | 111px | 251px | Помещается | Все надписи сохранили размер 22px и поместились. Для немецкого и японского вместо расширения кнопки были выбраны более короткие формулировки: *Rechnung laden* («загрузить счёт») и 請求書取得 («получить счёт») лаконичнее привычных вариантов. Во французском глагол остался, артикль исчез, а кнопка стала шире, но надпись оказалась ближе к иконке, чем в оригинале. Приемлемы ли более короткая формулировка или меньший зазор — решать проверяющему; кроме того, результаты разных запусков могут отличаться. Во второй анимации того же теста была кнопка «Save changes» шириной 180px. Её перевели как *Speichern*, *Enregistrer* и 保存 — стандартные короткие надписи, которые поместились без изменения компоновки. В том же запуске заголовок «Your changes are ready» был переведён на японский как 変更内容を保存できます («Вы можете сохранить изменения») — такое искажение смысла заметит только человек, который прочитает результат. За перевод Lottie взимается дополнительная плата за обработку компоновки (обработка компоновки): она начисляется отдельно от самого перевода и зависит от количества анимируемых свойств в анимации ([учёт использования](/docs/platform/dashboard/guides/managing-billing#usage-metering), [цены](https://generaltranslation.com/pricing)). Термины Glossary и пользовательские промпты из вашей [контекстной группы](/docs/platform/dashboard/guides/defining-context-for-translations) применяются и к тексту анимаций, поэтому название функции в онбординговой анимации будет совпадать с названием в вашем приложении и [JSON-файлах локалей](/kb/translate-json-files). ## Часто задаваемые вопросы ### Почему в переведённой анимации вместо букв пустые квадраты или часть букв пропадает? В шрифте или встроенных глифах нет новых символов. Используйте шрифт, который поддерживает нужную письменность. При экспорте глифов файл должен содержать контуры всех символов, встречающихся в переводе, поэтому заново экспортируйте этот язык из After Effects, предварительно вставив переведённый текст. ### Нужен ли отдельный файл для каждого языка? При замене во время выполнения — нет: один файл подходит для всех языков. При повторном экспорте и при использовании General Translation CLI создаётся по одному файлу на каждый язык, и вы загружаете нужный в зависимости от локали. ### Можно ли перевести текст, преобразованный в фигуры? Нет. В фигурах нет строки для замены, поэтому создайте текстовый слой в After Effects заново и повторите экспорт. ## Основные выводы * Текст Lottie хранится в текстовых слоях (`ty` 5) по пути `t.d.k[].s.t`, в том числе в текстовых слоях внутри прекомпозиций в `assets`. * Экспортированные глифы содержат контуры только для символов исходного текста, а iOS не выполняет рендеринг глифов, поэтому проверяйте наличие шрифтов для каждой добавляемой письменности. * API среды выполнения (`TextDelegate`, `DictionaryTextProvider`, `updateDocumentData`, `setTextSlot`) заменяют строки; параметр `canResizeFont` в lottie-web умеет уменьшать текст, чтобы он уместился в блоке, но ни один из этих API не сдвигает окружающие слои. * CLI General Translation переводит файлы dotLottie 1.0 `.lottie` с помощью [`gt stage`](/docs/cli/reference/commands/stage) и [`gt download`](/docs/cli/reference/commands/download), подгоняет компоновку под загруженные вами шрифты и отклоняет файлы с выражениями. * В нашем тесте обработка компоновки сохранила размеры шрифтов и уместила все надписи — где-то за счёт расширения кнопки, где-то за счёт более короткой формулировки. Проверяйте каждый скачанный результат: формулировки и отступы. * Обработка компоновки для Lottie оплачивается отдельно; стоимость зависит от количества анимируемых свойств в анимации. ## Related questions - [Как перевести JSON-файлы i18n?](https://generaltranslation.com/ru/kb/translate-json-files.mdx): Переводите только строковые значения в JSON-файле локали. Ключи, не связанные с множественным числом, заполнители вроде {{name}} и теги оставляйте без изменений, но учтите, что ключи для форм множественного числа зависят от языка: например, для польского нужны inbox_few и inbox_many. Используйте инструмент или API с поддержкой формата, а затем разберите и проверьте результат перед вычиткой. - [Как поддержать RTL-языки (right-to-left) в CSS?](https://generaltranslation.com/ru/kb/right-to-left-css.mdx): Укажите dir="rtl" и lang на элементе html — сам по себе lang не меняет направление письма, — а затем замените физические CSS-свойства вроде margin-left логическими, например margin-inline-start. Flex-строки, grid-столбцы и выравнивание текста по умолчанию зеркалятся автоматически, а translateX(), left и right — нет. - [Что такое псевдолокализация?](https://generaltranslation.com/ru/kb/pseudo-localization.mdx): Псевдолокализация — это тест, при котором исходный текст заменяется изменённой версией с диакритикой, удлинённой примерно на 40% и заключённой в скобки. Так жёстко закодированные строки, усечение, проблемы со шрифтами и склеенные из фрагментов предложения выявляются ещё до появления перевода. В Android для этого предусмотрены псевдолокали en-XA и ar-XB. - [Как перевести Google Slides?](https://generaltranslation.com/ru/kb/translate-google-slides.mdx): Создайте копию презентации для каждого языка, замените текст во всех текстовых полях, ячейках таблиц и заметках докладчика, а затем уменьшите текст, который не помещается. Интеграция General Translation с Google Drive сохраняет каждый язык в отдельную копию рядом с исходной презентацией и выполняет дополнительное форматирование, чтобы новый текст поместился на каждом слайде. - [Как перевести субтитры SRT, не нарушив тайминг?](https://generaltranslation.com/ru/kb/translate-srt-subtitles.mdx): Переводите в файле SRT только текст реплик, а номера реплик, таймкоды, пустые строки-разделители и теги форматирования оставляйте такими же, как в источнике. Затем проверьте длину строк и скорость чтения на соответствие требованиям целевой платформы: например, англоязычное руководство Netflix допускает 42 символа в строке и 20 символов в секунду для программ для взрослой аудитории. ## Previous and next questions - Previous question: [Как перевести SEO-заголовки и метаописания?](https://generaltranslation.com/ru/kb/translate-seo-metadata.mdx) - Next question: [Как перевести приложение на Flask или FastAPI?](https://generaltranslation.com/ru/kb/translate-python-app.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/ru/kb/sitemap.md) for every article.