Premiers pas avec Lottie.js –

Il y a environ 10 ans, l’animation Web était en grande difficulté. Adobe Flash était en train de mourir mais il n’y avait toujours pas de remplacement évident. Nous avions besoin d’un format rapide, facile à créer et adapté au Web, capable de mettre en scène des démos animées, des dessins animés et des bannières à plus grande échelle.

Heureusement, en 2014, AirBnB nous a proposé sa solution – Lottie.

Qu’est-ce que Lottie ?

Lottie.js est un format d’animation vectoriel open-source créé par AirBnB Concepteur d’expérience et de mouvement, Salih Abdul-Karim. Le moteur Lottie a été conçu pour restituer des animations vectorielles rapides, nettes et à faible bande passante de manière identique sur Web, iOS, Android, Windows et React Native.

En bref, si vous aimez utiliser SVG pour vos images, Lottie est un excellent moyen d’animer ces graphiques vectoriels. Si vous cherchez à remplacer les animations GIF, MPEG ou CSS par quelque chose de plus léger, plus rapide et plus évolutif, Lottie pourrait bien être votre meilleure réponse.

Comme le montre le bel exemple de Bashir Ahmed, Lottie peut produire un mouvement riche en caractères, souple et fluide à partir de fichiers minuscules – cette animation est générée à partir d’un fichier de 54 Ko.

Dans leur forme la plus élémentaire, les animations Lottie comme celles de Bashir ne nécessitent que deux fichiers.

1. Le lecteur d’animation Lottie (Lottie.js)
2. Le fichier d’instructions d’animation JSON

Pourquoi devrais-je choisir Lottie?

Il existe de nombreuses façons d’animer des vecteurs Web – des animations CSS aux SMIL de SVG à GreenSock, AnimeJSet d’autres bibliothèques JavaScript.

Cependant, Lottie a un tueur ‘one-two punch’ de:

• un écosystème croissant d’outils d’animation visuelle de haute qualité
• la possibilité d’exporter des animations fluides, rapides, efficaces et scriptables

Malgré tous ses problèmes bien documentés, le long succès d’Adobe Flash reposait sur la combinaison d’un bon outil de création avec un déploiement multiplateforme facile. Je pense que Lottie partage certains des avantages de Flash.

Comment créer une animation Lottie ?

Comme les fichiers Lottie ne sont rien de plus que JSON fichiers texte, techniquement vous pourrait codez simplement votre animation directement dans n’importe quel IDE. En réalité, vous voudrez sélectionner un outil d’animation compatible avec Lottie. Voici mes réflexions sur la poignée que j’ai essayée et testée.

Tour d’horizon des outils Lottie

Il y a deux facteurs principaux à considérer lors de la sélection d’un animateur Lottie.

1. Est-ce un bon outil d’animation ?
2. Est-il facile de déployer votre code Lottie ?

Je couvrirai ces deux domaines séparément pour chaque outil.

Ok, c’est sans doute une prise controversée, étant donné que le format Lottie a été construit pour After Effects, mais je ne crois pas qu’AE soit la meilleure plate-forme de création Lottie pour la plupart des gens.

Tout d’abord, ce n’est pas bon marché. Si vous payez déjà un abonnement Creative Cloud, le coût n’est pas un problème. Mais si vous n’êtes PAS abonné à CC, vous toucherez un nouveau minimum continu de 21 $US/mois.

Deuxièmement, Lottie a été conçu comme un moyen astucieux de « pirater » After Effects. Bien qu’After Effects soit un outil incroyablement puissant, il est conçu pour tout produire, des effets spéciaux hollywoodiens aux séquences de titres de films, en passant par les scènes de jeux 3D et les TVC à gros budget. Il y a une cargaison de choses dont vous n’aurez tout simplement pas besoin ou que vous ne voudrez pas.

Tu peux indubitablement obtenez des résultats brillants, et si vous êtes déjà une « rock star d’After Effects », n’hésitez pas à tirer parti de vos talents durement acquis.

De même, si vous êtes un utilisateur Windows ou Linux, After Effects peut toujours être votre option la plus viable.

Cependant, si vous êtes actuellement un utilisateur Mac avec une expérience AE limitée, il y a un argument selon lequel utiliser After Effects pour créer des animations Lottie est comme faire du ski nautique depuis un porte-avions.

Bien sûr, vous le faites, mais il existe des moyens plus simples.

Au moment où j’écris ceci (2022), Animateur de haïku semble être une victime tragique d’être le produit parfait au mauvais moment.

Outils d’animation

Lancé en 2018, Haiku a été conçu à partir de zéro comme un mélange idéal de design et de code. Les outils d’animation étaient riches et puissants et l’interface utilisateur était rapide et sensible.

Options d’exportation

Cependant, pour moi, ce sont les outils d’exportation de Haiku qui le distinguent vraiment de tout le reste, offrant un code prêt à l’emploi pour React, React Native, iOS, Android, Vue et Angular, ainsi que des GIF et des vidéos traditionnels.

Malheureusement, le développement sur Haiku a commencé à s’essouffler en 2020 alors que l’équipe s’est tournée vers un autre produit. Ils ont officiellement open-source de la base de code Haiku fin 2021. Apparemment, cela fonctionne toujours si vous suivez le processus d’installation, mais les perspectives de développement et de support futurs semblent fragiles.

En résumé…

Je ne mentionne Haiku ici que dans le mince espoir qu’il ait été relancé au moment où vous lirez ceci. C’était excellent et nous a beaucoup manqué.

Couler – (la ‘Pourquoi pas?‘ prendre)

Couler est sans doute l’héritier logique de l’héritage de Haiku – un animateur joliment présenté qui fournit un code Lottie soigné et prêt pour la production pour une gamme de plates-formes Web et mobiles populaires.

Incidemment, il pèse 88 Mo bien rangés installés sur mon MacBook, ce qui est pratique pour tous ceux qui ont des limitations d’espace (c’est moi). Contrairement à Haiku, aucune option Windows ou Linux n’est actuellement proposée.

Outils d’animation

Bien que Flow s’adresse fortement aux utilisateurs de Sketch, Flow fonctionnera avec pratiquement tous les fichiers SVG que vous fournissez. J’ai pu importer et synchroniser mes fichiers Figma, et Flow a même fait un travail très honorable en ‘auto-animant intelligemment’ les états d’interpolation entre deux images SVG statiques que je lui ai données. Ce n’était pas une importation parfaite de ce que j’avais, mais c’était assez compétent pour être utile.

Flow n’offre pas beaucoup d’outils de dessin/forme/texte intégrés. En fin de compte, ce n’est pas un gros problème, car la synchronisation entre Flow et Figma/Sketch fonctionne très bien, ce qui permet de garder l’interface utilisateur d’animation de Flow nette et épurée.

Exportation de codes

Flow offre d’excellentes facilités d’exportation Lottie, mais vous devrez sélectionner l’un des deux plans haut de gamme pour y accéder :

1. Libre: La plupart des outils d’animation
2. Médias: 99 $/an – Ajouter des options d’exportation vidéo (MP4, PNG, GIF, etc.)
3. Code+: 199 $/an – La plupart des options d’exportation de code (Lottie pour le Web, SVG animé, HTML, etc.)
4. Pro: 299 $/an – Toutes les options d’exportation de vidéo et de code

La ‘Code+’ Le niveau vous permet d’exporter Lottie pour le Web, bien que, légèrement décevant, vous devrez passer au plan utilisateur Pro de niveau supérieur pour avoir accès à Lottie pour iOS et Android. Cela peut être important ou non pour vous.

En résumé…

Flow n’est pas l’option la moins chère – dans le stade d’After Effects – mais ce n’est pas cher si vous animez régulièrement. C’est un outil attrayant et parfaitement conçu pour créer et déployer des animations Lottie à un prix raisonnable.

Application Keyshape est un excellent produit avec seulement deux problèmes.

1. Il n’est disponible que sur macOS.
2. Il a un site Web très simple, peu impressionnant, presque naïf.

J’avoue que j’avais peu d’attentes lorsque j’ai téléchargé Keyshape. Le site Web crie ‘jouet d’animation pour les amateurs‘, plutôt que ‘outil d’animation professionnel sérieux‘. Le prix modeste (29 $) soutient cette idée. Ça ne peut pas être bon à ce prix, non ?

À ma grande surprise, Keyshape s’est avéré être BEAUCOUP mieux que ce à quoi je m’attendais. C’est effectivement TRES bon !

Outils d’animation

L’installation de l’application Keyshape est un peu moins de 100 Mo sur mon Mac. Le panneau d’outils de gauche contient environ une douzaine d’outils d’édition vectorielle de base – lignes, rectangles, cercles, texte, etc. Bien que je soupçonne que la plupart d’entre nous utiliseraient Illustrator, Figma ou Sketch pour créer nos illustrations vectorielles, il est toujours utile de pouvoir effectuer des modifications simples dans votre animateur.

Keyshape vous permet de créer des « symboles » de base, puis de manipuler autant d’instances que vous le souhaitez.

La chronologie de l’animation s’étend le long du panneau inférieur. Auto-Keyframing créera de nouvelles images clés chaque fois que vous transformerez votre illustration dans la vue canevas. Cliquer sur une section « tween » vous donne accès à différentes fonctions d’accélération, y compris des cubes-béziers personnalisables.

Le panneau de droite vous donne un contrôle précis sur tout objet de canevas que vous sélectionnez. Comme vous pouvez vous y attendre, cela inclut l’échelle, l’inclinaison, la rotation, la position XY et les modes de fusion, mais vous permet également de contrôler les filtres SVG tels que le flou, l’ombre portée, le contraste et la teinte.

Outils d’exportation

Keyshape offre une gamme d’options d’exportation, notamment MPEG, GIF, animation SVG, CSS, feuilles de sprite, JS personnalisé et même des séquences d’images PNG.

Gardez à l’esprit que Lottie N’EST PAS une option d’exportation par défaut dans Keyshape. Vous devrez installer le greffon Lottie gratuit pour Keyshape pour accéder à cette nouvelle superpuissance.

Keyshape manque-t-il quelque chose?

Keyshape n’offre aucune fonctionnalité d’exportation de composants pour React, Node, Vue ou l’une des autres plates-formes de développement populaires, vous devrez donc peut-être résoudre cette partie vous-même.

Il n’essaie pas de « générer automatiquement automatiquement » les états d’interpolation entre les images clés SVG importées comme le fait Flow.

Mais en général, il n’y avait rien d’autre d’évident que j’ai raté lors de l’utilisation de l’application Keyshape.

En résumé…

J’aime l’animation en général et Lottie en particulier, mais la vérité est que ce n’est pas là que je passe la plupart de mes heures de travail. J’aimerais en faire plus, mais des mois passent sans que je touche à un projet d’animation. Est-ce que je veux vraiment un autre abonnement mensuel ? Probablement pas.

Pour moi, Keyshape semble être une aubaine incroyable pour la puissance qu’il délivre – même s’il le cache bien.

Détails de l’application Keyshape

Essayer de mettre une seule étiquette sur Lottiefiles.com n’est pas une tâche facile car ils offrent beaucoup. Cela comprend une communauté Lottie active, un marché d’actifs Lottie, des didacticiels Lottie et des applications de présentation, de prévisualisation et d’hébergement Lottie. Il est juste de dire qu’ils se sont penchés sur l’avenir de Lottie.

LottieFiles propose également une poignée d’utilitaires d’édition Lottie simples. Ceux-ci inclus:

1. Outil SVG vers Lottie: Cela vous permet de glisser-déposer des animations prédéfinies sur votre SVG téléchargé.
2. Éditeur Lottie: Un éditeur simple qui vous permet d’ajuster les délais et les tailles sur n’importe quel fichier Lottie préexistant.
3. Un lecteur Web personnalisable: Ajustez n’importe quelle animation Lottie avant de l’intégrer sur votre site.

Soyons francs : il serait difficile de créer un travail complexe à partir de zéro en utilisant les outils LottieFiles, mais il y a plus qu’assez de ressources utiles pour que cela en vaille la peine.

Mentions notables que je n’ai pas testées

• Cavalerie: Je ne vais pas prétendre avoir testé Cavalry – parce que ce n’est pas le cas – mais la fonctionnalité semble très bonne. Il y a un plan gratuit (je pense que c’est nouveau) donc il n’y a aucune raison de ne pas l’essayer.
• Synfig: Synfig est un animateur 2d open-source. Il a un excellent ensemble de fonctionnalités, mais l’interface utilisateur semble un peu vieille et moisie à côté des applications modernes comme Flow et Cavalry. Mais si votre budget est serré, il est difficile de se libérer.
• Lottielab: Lottielab sera une application basée sur un navigateur qui semble se présenter comme « l’animateur Figma de Lottie ». L’interface utilisateur semble bonne. Ils ont mentionné un prix d’abonnement mensuel de 15 $ à 25 $. Malheureusement, je ne peux pas évaluer Lottielab car il est resté en bêta privée strictement limitée pendant au moins 12 mois. J’ai personnellement rejoint la liste d’attente bêta début septembre 2021 (il y a 10 mois) et je n’ai toujours accès qu’au canal Lottielab Discord. Nous verrons à un moment donné dans le futur.

TLDR

Si la création d’animations vectorielles légères prend beaucoup de temps, Flow est peut-être l’outil de développement Lottie le plus ciblé et le plus complet disponible. Il a un flux de travail net et les options d’exportation sont aussi bonnes ou meilleures que la plupart des concurrents.

Si vous connaissez et aimez déjà Adobe After Effects, utilisez ce que vous savez.

Dans mon cas, j’aime l’animation, mais ce n’est pas là que je passe la plupart de mes heures de travail. Des mois peuvent passer sans que je touche à un projet d’animation. Est-ce que je veux vraiment un autre abonnement mensuel ? Probablement pas.

Pour moi, Keyshape (à 29 $) semble être une aubaine incroyable pour la puissance qu’il offre – même s’ils l’obscurcissent bien.