# General Translation Knowledge Base: Comment traduire des animations Lottie ? URL: https://generaltranslation.com/fr/kb/translate-lottie-animations.mdx Docs index: https://generaltranslation.com/llms.txt Description: Traduisez les chaînes des calques de texte de l’animation, stockées dans le JSON Lottie à l’emplacement t.d.k[].s.t, puis vérifiez que chaque traduction tient dans son cadre, que les polices prennent en charge le nouveau système d’écriture et qu’aucun texte n’a été exporté sous forme de formes. Réexportez l’animation pour chaque langue, remplacez le texte à l’exécution ou modifiez le JSON par script ; la CLI de General Translation traduit les fichiers .lottie au format dotLottie 1.0 et réajuste la mise en page. Category: Traduction Last updated: 2026-10-28 Authors: General Translation Team Published: 2026-10-28 Une animation Lottie est un fichier JSON, généralement exporté depuis After Effects avec le plugin Bodymovin, et son texte se trouve dans des calques de texte plutôt que dans un fichier de chaînes distinct. La traduire revient à remplacer ce texte pour chaque langue sans casser l’animation. Traduire les mots est la partie facile ; la difficulté tient à tout ce qui les entoure : les cadres de taille fixe, les polices et glyphes intégrés, et les systèmes d’écriture right-to-left. ## Où se trouve le texte dans un fichier Lottie Le type d'un calque est indiqué par `ty`, et les calques de texte sont de type `5`. Chaque calque de texte possède un objet `t` dont le document, `t.d`, contient des images clés dans `k` ; le `s` de chaque image clé est un document texte dont le `t` correspond à la chaîne de caractères elle-même, les sauts de ligne étant notés `\r`. Un document texte précise également sa police (`f`), sa taille (`s`) et, pour le texte d’une zone, la taille de la boîte (`sz`) et sa position (`ps`). Un texte qui change en cours d'animation comporte une image clé par changement ([Documentation 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] } } ] } } } ] } ``` Trois autres emplacements sont à prendre en compte : * **Précompositions.** Les compositions imbriquées stockent leurs calques dans `assets[].layers` : des calques de texte peuvent donc aussi s'y trouver, et pas uniquement dans le tableau `layers` de premier niveau. * **Polices et glyphes.** `fonts.list` indique le nom de chaque police. Si le designer a activé le paramètre **Glyphs** de Bodymovin, le fichier contient également un tableau `chars` comportant le contour de chaque caractère utilisé ; si ce paramètre est désactivé, le lecteur a besoin du fichier de police lui-même ([Lottie : paramètres d'exportation After Effects](https://lottie.airbnb.tech/#/after-effects)). Les glyphes s'affichent sur Android et sur le web, mais pas sur iOS, qui requiert les polices ([Lottie : fonctionnalités prises en charge](https://lottie.airbnb.tech/#/supported-features)). * **Texte converti en formes.** Un texte converti en formes par un designer dans After Effects devient un calque de forme (`ty` 4) et ne contient plus aucune chaîne de caractères à traduire. Il faut le reconvertir en calque de texte dans After Effects. Un fichier `.lottie` est un paquet dotLottie : une archive ZIP contenant un `manifest.json` et un ou plusieurs fichiers JSON d'animation, ainsi que, facultativement, des images et des polices ([spécification dotLottie 2.0](https://dotlottie.io/spec/2.0/)). Le texte se trouve au même endroit dans chaque JSON d'animation. ## Les problèmes qui surviennent lors de la traduction d’une animation * **Foisonnement du texte.** Les traductions ont rarement la même longueur que la source. Sur [le site de General Translation](https://generaltranslation.com), « Save changes » est 63 % plus large en allemand qu’en anglais. Un calque de texte d’une zone a une taille `sz` fixe : un texte plus long se répartit donc sur des lignes supplémentaires que le design n’avait pas prévues, et un texte de point (sans cadre) peut déborder de la composition. * **Caractères manquants.** Une police limitée à l’alphabet latin ne contient aucun caractère japonais, chinois ou arabe. Lorsque les glyphes sont exportés, le fichier ne contient que les contours des caractères utilisés par le texte anglais ; les mainteneurs de lottie-web précisent que tous les glyphes d’un nouveau texte « must have been exported from AE » ([wiki lottie-web](https://github.com/airbnb/lottie-web/wiki/TextLayer.updateDocumentData)). * **Texte right-to-left.** La prise en charge varie selon les lecteurs. lottie-android a des tickets ouverts concernant le texte right-to-left ([#1145](https://github.com/airbnb/lottie-android/issues/1145)) et les lettres arabes affichées sans liaison ([#2279](https://github.com/airbnb/lottie-android/issues/2279)). (Pour la page qui entoure l’animation, consultez [Comment prendre en charge les langues RTL (right-to-left) en CSS ?](/kb/right-to-left-css).) * **Texte piloté par des expressions.** Les expressions After Effects sont du JavaScript stocké dans le fichier (la propriété `x`). Un calque de texte dont le contenu provient d’une expression est calculé pendant la lecture de l’animation : il n’existe donc aucune chaîne de caractères fixe à traduire. Avant de traduire l’animation source, testez-la avec un texte plus long et accentué. (Consultez [Qu’est-ce que la pseudo-localisation ?](/kb/pseudo-localization).) ## Méthodes pour traduire une animation Lottie | Approche | Où le texte est modifié | Gère l’ajustement et les polices | Reproductible à chaque livraison | Ce qui reste à votre charge | | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | Réexporter chaque langue depuis After Effects | Un designer duplique la composition, modifie chaque calque de texte et exporte un fichier par langue | Un designer ajuste chaque version à l’œil | Non ; chaque modification du texte est à refaire pour chaque langue | Un fichier par langue, et du temps de designer pour chacun | | Remplacer le texte à l’exécution | Le lecteur remplace les chaînes pendant le rendu de l’animation | En partie ; lottie-web peut réduire le texte d’une zone pour qu’il tienne, mais la police, les glyphes et les calques environnants restent inchangés | Oui ; les chaînes proviennent des traductions de votre application | L’ajustement, la couverture des polices et les glyphes dans chaque langue, ainsi que des clés stables (texte source ou noms de calques) | | Modifier le JSON par script | Un script remplace chaque valeur `s.t`, souvent par traduction automatique ou à l’aide d’un LLM | Non | Oui | Les retours à la ligne, l’ajustement, les polices, les glyphes et la recompression des fichiers `.lottie` | | CLI de General Translation | [`gt stage`](/docs/cli/reference/commands/stage) et [`gt download`](/docs/cli/reference/commands/download) produisent un fichier `.lottie` traduit par langue | Le traitement de mise en page réajuste le texte et les calques voisins à l’aide des polices que vous téléversez | Oui | La relecture de chaque animation, la suppression des expressions et la consommation de Layout Processing | Le remplacement à l’exécution est intégré aux lecteurs. Dans lottie-android, un `TextDelegate` associe le texte source au texte de remplacement, et `LottieProperty.TEXT` l’applique via les propriétés dynamiques ([Lottie for Android](https://lottie.airbnb.tech/#/android)) : ```kotlin // Remplacer le texte anglais de l'animation par la ressource de chaîne de caractères localisée. val textDelegate = TextDelegate(animationView) textDelegate.setText("Start your free trial", getString(R.string.trial_cta)) animationView.setTextDelegate(textDelegate) ``` Dans lottie-ios, affectez à `animationView.textProvider` un `DictionaryTextProvider` dont les clés sont les keypaths des calques de texte ([source de lottie-ios](https://github.com/airbnb/lottie-ios/blob/master/Sources/Public/TextProvider/AnimationTextProvider.swift)). Dans lottie-web, appelez `updateDocumentData` sur l’élément du calque de texte. La méthode `setTextSlot` du lecteur web dotLottie remplace le texte que le designer a exposé sous forme de slot ([slots dotLottie](https://docs.lottiefiles.com/en/runtimes/distributions/js/v0.x/core-concepts/slots)). lottie-web peut également réduire le texte d’une zone pour qu’il y tienne : [`canResizeFont(true)`](https://github.com/airbnb/lottie-web/wiki/TextLayer.canResizeFont) diminue la taille de police d’un calque de texte jusqu’à ce que la chaîne de caractères tienne dans sa zone, sans descendre sous un seuil défini avec [`setMinimumFontSize`](https://github.com/airbnb/lottie-web/wiki/TextLayer.setMinimumFontSize). Aucune de ces API ne déplace ni ne redimensionne les calques autour du texte, comme la forme d’un bouton derrière un libellé. Réexportez depuis After Effects lorsqu’une animation n’est livrée qu’en une ou deux langues et qu’un designer souhaite peaufiner chaque image. Remplacez le texte à l’exécution lorsque les mots proviennent de votre application, comme le nom d’un utilisateur, et que la zone est assez grande pour accueillir la traduction la plus longue. Optez pour General Translation lorsque les animations sont livrées dans de nombreuses langues, évoluent d’une livraison à l’autre et nécessitent une mise en page réajustée pour chaque langue. Ne modifiez le JSON par script vous-même que si vous êtes prêt à prendre en charge les vérifications d’ajustement et de polices. ## Comment traduire des fichiers Lottie avec General Translation La CLI de General Translation, `gt`, traduit les fichiers dotLottie à l'aide de la clé de fichier `lottie` (`gt` 2.16.0 ou version ultérieure). Ajoutez une entrée `lottie` dont le chemin contient l'espace réservé `[locale]` : ```json title="gt.config.json" { "defaultLocale": "en", "locales": ["es", "ja"], "files": { "lottie": { "include": ["animations/[locale]/**/*.lottie"] } }, "fonts": { "include": ["assets/fonts/**/*.{ttf,otf}"] } } ``` Les animations sources proviennent de `animations/en/`, et les traductions sont enregistrées dans `animations/es/` et `animations/ja/`. La traduction Lottie s'exécute de manière asynchrone : soumettez-la avec [`npx gt stage`](/docs/cli/reference/commands/stage), puis exécutez [`npx gt download`](/docs/cli/reference/commands/download) jusqu'à ce que tous les paramètres régionaux soient terminés ; ceux encore en cours de traitement sont ignorés et récupérés lors d'une exécution ultérieure. [`gt translate`](/docs/cli/reference/commands/translate) ne peut pas mener à bien en une seule exécution une tâche Lottie non mise en attente et vous invite à la mettre en attente. Les fichiers téléchargés sont des fichiers `.lottie` complets ; ils ne sont pas publiés sur le CDN. General Translation lit le JSON de l'animation dans le dossier `animations/` du paquet, conformément à la structure dotLottie 1.0. Les paquets dotLottie 2.0 le placent dans `a/`, et une simple animation `.json` n'est pas un paquet. Dans les deux cas, convertissez-les avec [`@dotlottie/dotlottie-js`](https://github.com/dotlottie/dotlottie-js), dont `toDotLottieV1` et `DotLottieV1` produisent la structure 1.0. Après la traduction, le traitement de la mise en page conserve les tailles de police de l'animation, redistribue le texte et déplace les calques voisins pour que chaque libellé tienne. Si un libellé ne tient toujours pas, il peut être raccourci ou reformulé dans la langue cible sans en altérer le sens, les points de suspension n'intervenant qu'en dernier recours ; les jetons de code à chasse fixe ne sont jamais raccourcis. Si les modifications de mise en page ne peuvent pas être affichées et vérifiées, vous obtenez simplement l'animation traduite, sans ajustement. Visionnez chaque fichier téléchargé avant de le publier. (Consultez la [référence Lottie](/docs/cli/reference/formats/lottie-files).) Le paramètre de premier niveau [`fonts`](/docs/cli/reference/config#fonts) téléverse vos fichiers `.ttf` et `.otf` afin que le traitement de la mise en page puisse utiliser les polices réelles de l'animation ; lorsque l'animation intègre des glyphes, General Translation ajoute les contours des caractères requis par chaque traduction, à partir de vos polices téléversées lorsqu'elles les prennent en charge. Les polices sont des ressources de l'Organisation : leur téléversement nécessite donc une connexion enregistrée ou une Clé API d'Organisation disposant de `org:assets:write`. Une Clé API de projet ne permet pas de les téléverser ; la traduction se poursuit alors avec des polices de secours et un avertissement. Les fichiers contenant des expressions After Effects sont rejetés, car les expressions constituent du code exécutable ; réexportez-les après avoir supprimé les expressions ou les avoir converties en images clés. ### Ce que le traitement de la mise en page a changé lors d'un test Nous avons créé une animation de 480 × 160 représentant un bouton en forme de pilule : une icône de 18px, suivie du libellé « Download invoice » en Arial Bold 22px, avec 16 à 18px de marge intérieure. Nous l'avons traduite en allemand, en français et en japonais avec `gt` 2.26.11 et une clé API de projet : aucune police n'a donc été téléversée, et le traitement de la mise en page s'est appuyé sur ses polices de secours. Nous avons mesuré chaque libellé dans le moteur de rendu SVG de lottie-web 5.13 avec les polices du navigateur. Les lignes « traduction complète » correspondent aux traductions de chaque libellé par General Translation en tant que simple chaîne de caractères, hors de l'animation, insérées dans le bouton d'origine à des fins de comparaison : | Version | Texte du libellé | Largeur du libellé | Largeur du bouton | Résultat | | ----------------------------- | ---------------------- | ------------------ | ----------------- | ------------------------------------------------------------------------------------------------------- | | Source anglaise | Download invoice | 187px | 251px | Tient, à 11px de l'icône | | Allemand, traduction complète | Rechnung herunterladen | 260px | 251px | Empiète de 25px sur l'icône et dépasse le bord de 18px | | Allemand, General Translation | Rechnung laden | 171px | 251px | Tient | | Français, traduction complète | Télécharger la facture | 229px | 251px | Empiète de 9px sur l'icône et dépasse le bord de 2px | | Français, General Translation | Télécharger facture | 204px | 273px | Tient ; le bouton s'est élargi de 22px vers la droite, et le libellé se trouve à 3px de l'icône | | Japonais, traduction complète | 請求書をダウンロード | 220px | 251px | Empiète de 5px sur l'icône | | Japonais, General Translation | 請求書取得 | 111px | 251px | Tient | Chaque libellé a conservé sa taille de 22px et tient dans le bouton. Pour l'allemand et le japonais, on a obtenu des formulations plus courtes plutôt qu'un bouton plus large : *Rechnung laden* (« charger la facture ») et 請求書取得 (« obtenir la facture ») sont plus concis que les libellés habituels. Le français a gardé son verbe, perdu l'article et obtenu un bouton plus large, mais le libellé se retrouve plus près de l'icône que dans la source. C'est à la personne chargée de la relecture de juger si une formulation plus courte ou un espacement plus réduit est acceptable ; par ailleurs, les résultats peuvent varier d'une exécution à l'autre. Une seconde animation du même test comportait un bouton « Save changes » de 180px. Elle a été traduite par *Speichern*, *Enregistrer* et 保存, les libellés courts habituels, qui tiennent sans aucune modification de la mise en page. Lors de la même exécution, son titre, « Your changes are ready », a été traduit en japonais par 変更内容を保存できます (« Vous pouvez enregistrer vos modifications »), un glissement de sens que seule une relecture humaine permettrait de repérer. La traduction Lottie entraîne des frais de Layout Processing, facturés séparément de la traduction elle-même et calculés en fonction du nombre de propriétés animées de l'animation ([mesure de l'utilisation](/docs/platform/dashboard/guides/managing-billing#usage-metering), [tarifs](https://generaltranslation.com/pricing)). Les termes du glossaire et les instructions personnalisées de votre [groupe de contexte](/docs/platform/dashboard/guides/defining-context-for-translations) s'appliquent également au texte des animations : le nom d'une fonctionnalité dans une animation d'onboarding reste ainsi cohérent avec votre application et vos [fichiers de paramètres régionaux JSON](/kb/translate-json-files). ## Questions fréquentes ### Pourquoi mon animation traduite affiche-t-elle des cases vides ou des lettres manquantes ? La police ou les glyphes intégrés ne couvrent pas les nouveaux caractères. Fournissez une police qui prend en charge le système d’écriture concerné. Si vous exportez les glyphes, le fichier doit contenir un contour pour chaque caractère utilisé dans la traduction : réexportez donc cette langue depuis After Effects une fois le texte traduit intégré. ### Faut-il un fichier distinct pour chaque langue ? Avec le remplacement à l’exécution, non : un seul fichier couvre toutes les langues. La réexportation et la CLI de General Translation génèrent en revanche un fichier par langue, que vous chargez en fonction du paramètre régional. ### Puis-je traduire un texte converti en formes ? Non. Une forme ne contient aucune chaîne de caractères à remplacer : recréez le calque de texte dans After Effects, puis exportez de nouveau. ## Points clés * Dans Lottie, le texte se trouve dans les calques de texte (`ty` 5), à l’emplacement `t.d.k[].s.t`, y compris dans les calques de texte des précompositions situées sous `assets`. * Les exports de glyphes ne contiennent les contours que des caractères présents dans le texte source, et iOS n’affiche pas les glyphes : vérifiez les polices pour chaque système d’écriture que vous ajoutez. * Les API d’exécution (`TextDelegate`, `DictionaryTextProvider`, `updateDocumentData`, `setTextSlot`) remplacent les chaînes ; l’option `canResizeFont` de lottie-web peut réduire le texte d’une zone pour qu’il y tienne, mais aucune de ces API ne déplace les calques environnants. * La CLI de General Translation traduit les fichiers `.lottie` au format dotLottie 1.0 via [`gt stage`](/docs/cli/reference/commands/stage) et [`gt download`](/docs/cli/reference/commands/download), réajuste les mises en page à l’aide des polices que vous avez téléversées et rejette les fichiers contenant des expressions. * Lors de notre test, le Layout Processing a conservé les tailles de police et fait tenir chaque libellé, soit en élargissant un bouton, soit en raccourcissant la formulation ; relisez chaque téléchargement pour vérifier la formulation et l’espacement. * Le Layout Processing pour Lottie est facturé séparément, en fonction des propriétés animées de l’animation. ## Related questions - [Comment traduire des fichiers JSON i18n ?](https://generaltranslation.com/fr/kb/translate-json-files.mdx): Traduisez uniquement les valeurs de type chaîne de caractères d’un fichier JSON de paramètres régionaux. Conservez telles quelles les clés non plurielles, les espaces réservés comme {{name}} et les balises, mais attendez-vous à ce que les clés de pluriel varient selon la langue : le polonais exige inbox_few et inbox_many. Utilisez un outil ou une API qui prend en charge le format, puis analysez et validez le résultat avant la relecture. - [Comment prendre en charge les langues RTL (right-to-left) en CSS ?](https://generaltranslation.com/fr/kb/right-to-left-css.mdx): Placez dir="rtl" et lang sur l’élément html, car lang seul ne modifie pas le sens d’écriture, puis remplacez les propriétés CSS physiques comme margin-left par des propriétés logiques comme margin-inline-start. Les lignes flex, les colonnes de grille et l’alignement du texte par défaut s’inversent automatiquement ; ce n’est pas le cas de translateX(), left et right. - [Qu’est-ce que la pseudo-localisation ?](https://generaltranslation.com/fr/kb/pseudo-localization.mdx): La pseudo-localisation est un test qui remplace votre texte source par une version modifiée, accentuée, allongée d’environ 40 % et encadrée de crochets, afin de faire apparaître les chaînes codées en dur, les troncatures, les polices défaillantes et les phrases concaténées avant même qu’une traduction n’existe. Android propose à cet effet les pseudo-paramètres régionaux en-XA et ar-XB. - [Comment traduire Google Slides ?](https://generaltranslation.com/fr/kb/translate-google-slides.mdx): Copiez la présentation une fois par langue, remplacez le texte de chaque zone de texte, cellule de tableau et note du présentateur, puis redimensionnez le texte qui déborde. L’intégration Google Drive de General Translation enregistre chaque langue dans sa propre copie, à côté de la source, et effectue une passe de formatage pour ajuster le nouveau texte à chaque diapositive. - [Comment traduire des sous-titres SRT sans casser la synchronisation ?](https://generaltranslation.com/fr/kb/translate-srt-subtitles.mdx): Ne traduisez que le texte des sous-titres d’un fichier SRT ; conservez les numéros de sous-titre, les codes temporels, les lignes vides de séparation et les balises de formatage tels qu’ils figurent dans la source. Vérifiez ensuite la longueur des lignes et la vitesse de lecture au regard des exigences de votre plateforme de destination : le guide de Netflix pour l’anglais, par exemple, autorise 42 caractères par ligne et 20 caractères par seconde pour les programmes destinés aux adultes. ## Previous and next questions - Previous question: [Comment localiser une application Android avec strings.xml ?](https://generaltranslation.com/fr/kb/localize-android-app.mdx) - Next question: [Comment traduire des fichiers de paramètres régionaux YAML ?](https://generaltranslation.com/fr/kb/translate-yaml-files.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/fr/kb/sitemap.md) for every article.