Créer une animation en lottie sur After Effect

Adobe After Effect

Dans ce tutoriel, nous allons découvrir comment exporter une animation au format JSON en utilisant Lottie, ce qui permettra de rendre les animations extrêmement légères et fluides !

> Petite précision par apport au lottie : son utilisation est basée sur les fonctionnalités "essentielles" du logiciel, ce qui signifie que certaines fonctionnalités ne sont pas prises en charge. Pour connaître les caractéristiques supportées, [cliquez ici](https://lottiefiles.com/supported-features) pour accéder au tableau récapitulatif.

### 1. Installation du plugin `LottieFiles` sur After Effects

Rendez toi sur la page [lottiefiles.com/plugins/after-effects](https://lottiefiles.com/plugins/after-effects) et télécharge le plugin en choisissant l'option qui te convient le mieux : tu peux le télécharger via `Adobe Exchange` ou en téléchargeant le fichier `.zxp`.

> Si tu optes pour le fichier `.zxp`, vous aurez besoin de l'application `ZXP Installer`, que vous pouvez trouver sur [aescripts.com/learn/zxp-installer](https://aescripts.com/learn/zxp-installer).

### 2. Exportation d'une animation en Lottie

Prenons l'exemple d'une animation simple que j'ai réalisée : 

![Animation Exemple](https://i.imgur.com/sdtqYdS.gif)

1. Ouvre le plugin `LottieFiles` en allant dans `Fenêtre > Extensions > LottieFiles`.
   ![Ouvrir LottieFiles](https://i.imgur.com/A68EHUf.png)

2. Ensuite, choisis la composition que tu veux exporter.
   ![Choisir la composition](https://i.imgur.com/mfxI22m.png)

3. Sauvegarde ta composition dans ton projet Lottie.
   ![Sauvegarder la composition](https://i.imgur.com/wyvV9BW.png)

4. Tu pourras ensuite télécharger ton animation dans deux formats : en `JSON` et en dotLottie (`.lottie`).
   ![Télécharger l'animation](https://i.imgur.com/99L0izQ.png)

<data>NE PAS SUPPRIMER CETTE LIGNE!</data>

#### Voici le fichier JSON de l'animation, prêt à être utilisé notamment pour le web :
``` Json
{"v":"4.8.0","meta":{"g":"LottieFiles AE 3.4.4","a":"","k":"","d":"","tc":""},"fr":23.9759979248047,"ip":0,"op":18.9999983554925,"w":2000,"h":2000,"nm":"HEART ANIMATION IN","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"HEART/Heart For .lottie Silhouettes","cl":"lottie","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1000,1000,0],"ix":2},"a":{"a":0,"k":[500,500,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.394,0.394,0.667],"y":[1,1,1]},"o":{"x":[0.633,0.633,0.333],"y":[0,0,0]},"t":1.5,"s":[0,0,100]},{"i":{"x":[0.386,0.386,0.667],"y":[1,1,1]},"o":{"x":[0.593,0.593,0.333],"y":[0,0,0]},"t":9,"s":[116.5,116.5,100]},{"t":11.9999989613637,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[70.433,0],[25.891,-28.061],[43.042,0],[0,-66.52],[-132.759,-71.397],[0,109.562]],"o":[[-43.042,0],[-25.892,-28.061],[-70.434,0],[0,109.562],[132.758,-71.397],[0,-66.52]],"v":[[97.823,-191.734],[0,-148.691],[-97.823,-191.734],[-215.212,-70.432],[0,191.734],[215.212,-70.432]],"c":true},"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.929000016755,0.258999992819,0.270999983245,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[500,507.926],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":95.9999916909097,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"HEART/Heart For .lottie Silhouettes 3","cl":"lottie","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1000,1000,0],"ix":2},"a":{"a":0,"k":[500,500,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.386,0.386,0.667],"y":[1,1,1]},"o":{"x":[0.633,0.633,0.333],"y":[0,0,0]},"t":0,"s":[0,0,100]},{"t":5.99999948068185,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[70.433,0],[25.891,-28.061],[43.042,0],[0,-66.52],[-132.759,-71.397],[0,109.562]],"o":[[-43.042,0],[-25.892,-28.061],[-70.434,0],[0,109.562],[132.758,-71.397],[0,-66.52]],"v":[[97.823,-191.734],[0,-148.691],[-97.823,-191.734],[-215.212,-70.432],[0,191.734],[215.212,-70.432]],"c":true},"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.952941176471,0.956862745098,0.964705882353,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[500,507.926],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":95.9999916909097,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"HEART/Heart For .lottie Silhouettes 2","cl":"lottie","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1000,1000,0],"ix":2},"a":{"a":0,"k":[500,500,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[70.433,0],[25.891,-28.061],[43.042,0],[0,-66.52],[-132.759,-71.397],[0,109.562]],"o":[[-43.042,0],[-25.892,-28.061],[-70.434,0],[0,109.562],[132.758,-71.397],[0,-66.52]],"v":[[97.823,-191.734],[0,-148.691],[-97.823,-191.734],[-215.212,-70.432],[0,191.734],[215.212,-70.432]],"c":true},"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.611764705882,0.639215686275,0.686274509804,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[500,507.926],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":95.9999916909097,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"POINT/Heart For .lottie Silhouettes","cl":"lottie","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1001.359,1000,0],"ix":2},"a":{"a":0,"k":[500,500,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-22.55],[22.55,0],[0,22.549],[-22.55,0]],"o":[[0,22.549],[-22.55,0],[0,-22.55],[22.55,0]],"v":[[40.829,0],[0,40.829],[-40.829,0],[0,-40.829]],"c":true},"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.952999997606,0.905999995213,0.536999990426,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.137,"y":1},"o":{"x":0.881,"y":0},"t":0,"s":[499.189,493.525],"to":[66,38.667],"ti":[-66,-38.667]},{"t":5.99999948068185,"s":[895.189,725.525]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.137,0.137],"y":[1,1]},"o":{"x":[0.881,0.881],"y":[0,0]},"t":0,"s":[0,0]},{"i":{"x":[0.833,0.833],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0,0]},"t":6,"s":[100,100]},{"t":15.9999986151516,"s":[151,151]}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":5,"s":[100]},{"t":15.9999986151516,"s":[0]}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-11.861,0],[0,-11.861],[11.861,0],[0,11.861]],"o":[[11.861,0],[0,11.861],[-11.861,0],[0,-11.861]],"v":[[0,-21.477],[21.477,0],[0,21.477],[-21.478,0]],"c":true},"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.913999968884,0.74900004069,0.902000038297,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.137,"y":1},"o":{"x":0.881,"y":0},"t":3,"s":[497.446,498.128],"to":[1.333,-71],"ti":[-1.333,71]},{"t":8.99999922102278,"s":[505.446,72.128]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.137,0.137],"y":[1,1]},"o":{"x":[0.881,0.881],"y":[0,0]},"t":3,"s":[0,0]},{"i":{"x":[0.833,0.833],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0,0]},"t":9,"s":[100,100]},{"t":18.9999983554925,"s":[151,151]}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8,"s":[100]},{"t":18.9999983554925,"s":[0]}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-11.861,0],[0,-11.862],[11.861,0],[0,11.861]],"o":[[11.861,0],[0,11.861],[-11.861,0],[0,-11.862]],"v":[[0,-21.477],[21.477,0.001],[0,21.477],[-21.478,0.001]],"c":true},"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.913999968884,0.74900004069,0.902000038297,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.137,"y":1},"o":{"x":0.881,"y":0},"t":0,"s":[497.446,493.872],"to":[1.333,72.333],"ti":[-1.333,-72.333]},{"t":5.99999948068185,"s":[505.446,927.872]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.137,0.137],"y":[1,1]},"o":{"x":[0.881,0.881],"y":[0,0]},"t":0,"s":[0,0]},{"i":{"x":[0.833,0.833],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0,0]},"t":6,"s":[100,100]},{"t":15.9999986151516,"s":[151,151]}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":5,"s":[100]},{"t":15.9999986151516,"s":[0]}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-17.559],[17.558,0],[0,17.559],[-17.559,0]],"o":[[0,17.559],[-17.559,0],[0,-17.559],[17.558,0]],"v":[[31.792,0],[0,31.792],[-31.792,0],[0,-31.792]],"c":true},"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.705999995213,0.929000016755,0.902000038297,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.137,"y":1},"o":{"x":0.881,"y":0},"t":3,"s":[497.768,493.942],"to":[-65.667,38],"ti":[65.667,-38]},{"t":8.99999922102278,"s":[103.768,721.942]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.137,0.137],"y":[1,1]},"o":{"x":[0.881,0.881],"y":[0,0]},"t":3,"s":[0,0]},{"i":{"x":[0.833,0.833],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0,0]},"t":9,"s":[100,100]},{"t":18.9999983554925,"s":[151,151]}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8,"s":[100]},{"t":18.9999983554925,"s":[1]}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 4","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-17.558],[17.559,0],[0,17.559],[-17.558,0]],"o":[[0,17.559],[-17.558,0],[0,-17.558],[17.559,0]],"v":[[31.792,0],[-0.001,31.792],[-31.793,0],[-0.001,-31.792]],"c":true},"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.705999995213,0.929000016755,0.902000038297,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.137,"y":1},"o":{"x":0.881,"y":0},"t":2,"s":[501.507,495.418],"to":[66.667,-38],"ti":[-66.667,38]},{"t":7.9999993075758,"s":[901.507,267.418]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.137,0.137],"y":[1,1]},"o":{"x":[0.881,0.881],"y":[0,0]},"t":2,"s":[0,0]},{"i":{"x":[0.833,0.833],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0,0]},"t":8,"s":[100,100]},{"t":17.9999984420456,"s":[151,151]}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":7,"s":[100]},{"t":17.9999984420456,"s":[0]}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 5","np":2,"cix":2,"bm":0,"ix":5,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-21.973],[21.973,0],[0,21.973],[-21.973,0]],"o":[[0,21.973],[-21.973,0],[0,-21.973],[21.973,0]],"v":[[39.786,0],[0.001,39.785],[-39.786,0],[0.001,-39.785]],"c":true},"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.952999997606,0.905999995213,0.536999990426,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.137,"y":1},"o":{"x":0.881,"y":0},"t":1,"s":[491.767,496.5],"to":[-64.667,-38.333],"ti":[64.667,38.333]},{"t":6.99999939412883,"s":[103.767,266.5]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.137,0.137],"y":[1,1]},"o":{"x":[0.881,0.881],"y":[0,0]},"t":1,"s":[0,0]},{"i":{"x":[0.833,0.833],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0,0]},"t":7,"s":[100,100]},{"t":16.9999985285986,"s":[151,151]}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":6,"s":[100]},{"t":16.9999985285986,"s":[0]}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 6","np":2,"cix":2,"bm":0,"ix":6,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":95.9999916909097,"st":0,"bm":0}],"markers":[]}
```

### 3. Astuces 

Avec la version gratuite de `LottieFiles`, tu as le droit à seulement 10 projets dans tes fichiers, mais tu ne peux pas les supprimer depuis le plugin After Effects.

Pour supprimer des projets, il te suffit d'aller sur [app.lottiefiles.com](https://app.lottiefiles.com) et te connecter.
![](https://i.imgur.com/T5RL8N7.png)

<data>NE PAS SUPPRIMER CETTE LIGNE!</data>

Découvres comment exporter des animations en Lottie avec After Effects  !