Qu'est-ce qu'une Lottie?

Lottie est un format de fichier d'animation basé sur JSON qui vous permet d'expédier des animations sur n'importe quelle plateforme aussi facilement que des actifs statiques. Il s'agit de petits fichiers qui fonctionnent sur n'importe quel appareil et qui peuvent être agrandis ou réduits sans pixellisation. LottieFiles vous permet de créer, d'éditer, de tester, de collaborer et d'expédier une Lottie de la manière la plus simple possible.

Pourquoi Lottie ?

Voici quelques avantages de Lottie par rapport aux autres formats de fichiers d'animation existants.

Petite taille de fichier

Les animations Lottie sont beaucoup plus petites tout en conservant la même qualité par rapport à d'autres formats tels que GIF ou MP4.


Redimensionnable à l'infini

Les animations Lottie sont basées sur des vecteurs, ce qui signifie que vous pouvez les agrandir ou les réduire sans vous soucier de la résolution.

Support multiplateforme et bibliothèques

Pour tous les développeurs, les transferts de Lottie sont très faciles. Vous pouvez utiliser les animations Lottie sur iOS, Android, web et React Native sans modification.

Interactivité

Dans les animations Lottie, les éléments d'animation sont visibles afin que vous puissiez les manipuler pour qu'ils soient interactifs et réagissent à des interactions telles que le défilement, le clic et le survol. Pour en savoir plus, consultez le Guide de l'interactivité.

Le monde utilise Lottie

Plus de entreprises dans le monde entier utilisent Lottie qui est aussi intégré dans de nombreux outils dont vous vous servez au quotidien.

A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
Apple Landing Page with Lottie Animation
Apple Logo

Pages de renvoi

Pages de renvoi

Pages de renvoi

Duolingo with Lottie Animation
Duolingo Logo

Ajoutez de la joie aux expériences numériques

Ajoutez de la joie aux expériences numériques

Ajoutez de la joie aux expériences numériques

Telegram Stickers with Lottie Animation
Telegram Logo

Autocollants animés dans les messages.

Autocollants animés dans les messages.

Autocollants animés dans les messages.

Samsung Watch with Lottie Animation
Samsung Logo

System animations for smart watches, TV, and appliances

System animations for smart watches, TV, and appliances

System animations for smart watches, TV, and appliances

Interactive Infographics with Lottie Animation
The Guardian Logo

Infographies interactives

Infographies interactives

Infographies interactives

Product Walkthroughs with Lottie Animation
Google Logo

Présentation des produits

Présentation des produits

Présentation des produits

Le mouvement est l'avenir du design

…et LottieFiles facilite cette démarche.

Comment démarrer avec Lottie

Outils et ressources pour vous aider à commencer à utiliser Lottie.

ÉTAPE 1

Trouvez ou créez une Lottie

Trouvez une animation Lottie

Consultez notre bibliothèque d'animations gratuites et prêtes à l'emploi.

Personnalisez ensuite n'importe quelle Lottie en fonction de votre marque ou de vos couleurs préférées en utilisant l'outil Palette de couleurs ou l'éditeur de Lottie.

LottieFiles featured animations page
LottieFiles featured animations page
LottieFiles featured animations page

Ou créez une Lottie à partir de zéro

Si vous avez des talents d'animateur, créez une Lottie avec nos plugins Adobe. Sinon, il suffit de prendre un SVG et de lui appliquer quelques préréglages avec notre convertisseur SVG vers Lottie.

ÉTAPE 2

Utilisez votre Lottie

Utilisez Lotties dans vos outils de conception, de code et de productivité

Bibliothèques Lottie pour les développeurs

Lottie est également pris en charge nativement par de nombreux autres outils

Various company logos
Various company logos
Get started with LottieFiles
Get started with LottieFiles
Get started with LottieFiles
Get started with LottieFiles

Prêt à commencer avec LottieFiles ?

L'historique de Lottie

L'historique de Lottie

L'historique de Lottie

L'historique de Lottie

Stylized pixellated flower
Stylized pixellated flower

2010

Avant Lottie, les animateurs graphiques créaient leurs animations et les transmettaient aux développeurs de logiciels pour la mise en œuvre. Les options d'implémentation étaient limitées. Les développeurs exportaient les animations dans des formats de qualité inférieure ou essayaient de reconstruire l'animation en code à partir de zéro. Ce n'était pas efficace et aboutissait souvent à des animations qui étaient suboptimales et ne correspondaient pas à la vision des animateurs graphiques.

2015

2015

Hernan Torrisi a eu l'idée d'exporter la représentation d'une animation dans Adobe After Effects et de faire le rendu de l'animation en temps réel. Il a exploité les capacités de script d'After Effects pour énumérer un projet d'animation et a publié un plugin pour After Effects appelé Bodymovin qui exporte la description des animation au format JSON. Il a également publié le tout premier moteur de rendu pour le format avec un lecteur basé sur JavaScript pour les navigateurs.

JSON file
JSON file
Pencil with Lottie written out
Pencil with Lottie written out

2017

Les ingénieurs Brandon Withrow, Gabriel Peal et Leland Richardson d'Airbnb ont vu le potentiel des animations basées sur JSON et les problèmes qu'elles permettaient de résoudre. Ils se sont associés à l'animateur principal Salih Adbul-Karim d'Airbnb pour aider à créer des bibliothèques iOS et Android capables de rendre ces fichiers d'animation JSON, qu'ils ont appelés "Lottie".

Rocketship with LottieFiles logo
Rocketship with LottieFiles logo

Le lancement de LottieFiles !

LottieFiles a été lancé, offrant aux animateurs et aux développeurs un endroit où tester, partager et présenter instantanément leurs animations sur le web.

2018

2018

Microsoft et la Fondation .Net ont publié une bibliothèque pour le rendu de Lottie sous Windows.

Window with flowerpot
Window with flowerpot
Hamster wheel with a Qt file running on it
Hamster wheel with a Qt file running on it

2019

Qt a ajouté la prise en charge de Lottie en ajoutant une API QML pour le rendu de Lottie. Samsung a publié rLottie, un moteur de rendu basé sur C++ indépendant de la plateforme pour Lottie, et a ajouté la prise en charge de Lottie dans Tizen.

2020

2020

dotLottie a été créé. dotLottie est un format de fichier open source qui regroupe une ou plusieurs animations Lottie et leurs ressources associées dans un seul fichier. Ce sera la prochaine génération de Lottie pour l'avenir de l'animation.

Lottie illustration
Lottie illustration

FAQ

FAQ

Qu'est-ce qu'une animation Lottie ?

Lottie est un format de fichier d'animation basé sur JSON qui vous permet d'expédier des animations sur n'importe quelle plateforme aussi facilement que des actifs statiques. Il s'agit de petits fichiers qui fonctionnent sur n'importe quel appareil et qui peuvent être agrandis ou réduits sans pixellisation.

Lottie est-elle meilleure que SVG ?

Lottie est-elle meilleure que GIF ?

Comment utiliser Lottie ?

Comment crée-t-on un fichier Lottie?

Pourquoi utiliser Lottie ?

Qui peut utiliser LottieFiles ?

Où puis-je en savoir plus sur les animations Lottie ?

Comment puis-je modifier les animations Lottie ?

Le mouvement est l'avenir du design

Le mouvement est l'avenir du design

…et LottieFiles facilite cette démarche.

…et LottieFiles facilite cette démarche.

Pages de renvoi

Ajoutez de la joie aux expériences numériques

Autocollants animés dans les messages.

System animations for smart watches, TV, and appliances

Rencontrez d'autres créateurs, concepteurs et développeurs Lottie.

Présentation des produits

Créer. Collaborer. Expédier.

Laissez le mouvement faire partie de chaque design. Laissez libre cours à votre imagination et donnez vie à vos créations.

Créer. Collaborer. Expédier.

Laissez le mouvement faire partie de chaque design. Laissez libre cours à votre imagination et donnez vie à vos créations.

Créer. Collaborer. Expédier.

Laissez le mouvement faire partie de chaque design. Laissez libre cours à votre imagination et donnez vie à vos créations.

Créer. Collaborer. Expédier.

Laissez le mouvement faire partie de chaque design. Laissez libre cours à votre imagination et donnez vie à vos créations.