Commencer avec Lottie.js

La décennie de transformation de l'animation Web: de la chute du flash à la montée de Lottie

Il y a environ dix ans, l'animation Web a été confrontée à un énorme défi. Adobe Flash est progressivement en baisse, mais n'a pas une alternative appropriée. Nous avons besoin d'un format rapide et facile à créer et convivial qui peut créer des présentations d'animation à grande échelle, des dessins animés et des bannières publicitaires.

Heureusement, en 2014, Airbnb nous a fourni une solution - Lottie.js.

Points clés:

1. Lottie.js a émergé comme une alternative Flash: il y a environ dix ans, en raison du déclin d'Adobe Flash, le champ de l'animation Web était au milieu du changement, et il y avait un manque de clair Alternatives pour créer des animations conviviales. En 2014, Airbnb a introduit Lottie.js, un format d'animation basé sur un vecteur conçu pour créer des animations de bande passante rapides et basses qui s'exécutent de manière transparente sur plusieurs plates-formes, notamment Web, iOS, Android, Windows et React Native. Développé par Salih Abdul-Karim d'Airbnb, Lottie est conçu pour fournir des solutions évolutives et efficaces pour les animations graphiques vectorielles comme alternative aux animations GIF, MPEG ou CSS.
2. Les avantages et l'écosystème de Lottie.js: Parmi les nombreuses options d'animation Web, Lottie.js a un écosystème croissant d'outils d'animation visuelle de haute qualité et une capacité à animation en douceur, rapide et scriptable de l'animation se démarque. En tirant parti des fichiers JSON pour les instructions d'animation, Lottie fournit un flux de travail simplifié qui crée des animations de haute qualité et efficaces, rappelant la combinaison des avantages créatifs et de déploiement d'Adobe Flash.
3. Outils et cas d'utilisation pratiques pour créer des animations Lottie: Les animations Lottie peuvent être créées via divers outils d'animation "compatibles" Lottie, en tenant compte de la qualité des outils d'animation et de la difficulté de déployer le code Lottie . De Adobe After Effects à Keyshape et Lottigied, chaque outil offre des fonctionnalités uniques, des prix et un support de plate-forme pour répondre aux différents besoins et à l'expertise des animations. Avec ses prix uniques, KeyShape représente une solution rentable pour les utilisateurs qui ne sont pas souvent l'animation, et Flow fournit un package complet pour le travail qui fait souvent l'animation. Lottiefiles enrichit encore l'écosystème en fournissant une communauté, un marché et de simples utilitaires d'édition pour soutenir la création et le partage d'animations Lottie.

Qu'est-ce que Lottie?

Lottie.js est un format d'animation open source basé sur un vecteur créé par Airbnb Experience et le concepteur dynamique Salih Abdul-Karim. Le moteur Lottie est conçu pour rendre les animations vectorielles rapides, claires et basses de la même manière sur le Web, iOS, Android, Windows et React Native.

En bref, si vous aimez utiliser SVG pour créer des images, Lottie est un excellent moyen d'animer ces graphiques vectoriels. Si vous souhaitez remplacer l'animation GIF, MPEG ou CSS par quelque chose de plus léger, plus rapide et plus évolutif, Lottie est probablement votre meilleure réponse.

Comme le montre le bel exemple de Bashir Ahmed, Lottie génère des personnages riches, des mouvements légers et lisses à partir de fichiers minuscules - cette animation est générée à partir d'un fichier de 54 Ko.

Les animations de Lottie les plus fondamentales (comme Bashir) ne nécessitent que deux fichiers:

1. Lottie Animation Player (Lottie.js)
2. Fichier d'instructions d'animation JSON

Pourquoi devrais-je choisir Lottie?

Il existe de nombreuses façons d'animer les vecteurs Web - des animations CSS aux SMILS dans SVGS, à Greensock, AnimeJS et autres bibliothèques JavaScript.

Cependant, Lottie a l'avantage du tueur "Un plus un est supérieur à deux":

• L'écosystème croissant des outils d'animation visuelle de haute qualité
• Capacité d'exporter des animations lisses, rapides, efficaces et scriptables

Malgré de nombreuses lacunes bien connues d'Adobe Flash, son succès à long terme est basé sur la combinaison de bons outils créatifs avec un simple déploiement multiplateforme. Je pense que Lottie a certains des avantages de Flash.

Comment créer une animation Lottie?

Parce que le fichier Lottie n'est rien de plus que des fichiers texte JSON, vous pouvez techniquement écrire du code d'animation directement dans n'importe quel IDE. En fait, vous devez sélectionner un outil d'animation qui prend en charge Lottie. Voici mes réflexions sur plusieurs outils que j'ai essayés et testés.

Revue de l'outil Lottie

• Adobe After Effects
• haiku animateur
• Flow
• keyshape
• Lottiefiles

À mon avis, il y a deux facteurs à considérer lors du choix de l'outil d'animation Lottie:

1. Est-ce un bon outil d'animation?
2. est-il facile de déployer le code Lottie?

Je présenterai ces deux aspects pour chaque outil séparément.

... (Le contenu suivant a simplifié et réécrit la partie d'introduction de chaque outil dans le texte d'origine, conservant les informations de base et ajustant la structure pour la rendre plus douce et plus facile à lire. En raison des limitations de l'espace, certaines Les descriptions détaillées sont omises ici.

Résumé

Si vous avez souvent besoin de créer des animations vectorielles légères, le flux est probablement l'outil de développement Lottie le plus ciblé et le plus complet en ce moment. Il a un flux de travail clair et les options d'exportation sont aussi bonnes ou meilleures que la plupart des concurrents.

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

Dans mon cas, j'aime l'animation, mais ce n'est pas la partie principale de mes heures de travail. Plusieurs mois se sont écoulés et je ne suis peut-être pas exposé à des projets d'animation. Est-ce que je veux vraiment un autre abonnement mensuel? Peut-être ... non.

pour moi, Keyshape (29 $) semble être un outil de valeur de l'argent étonnant, même s'il est bien caché.

lottie.js faq

... (La partie FAQ d'origine a été rationalisée pour préserver les informations de base)

Qu'est-ce que Lottie.js?

Comment fonctionne Lottie.js? La bibliothèque Lottie.js analyse et rend ces fichiers JSON en temps réel, ce qui facilite l'intégration d'animations de haute qualité dans les applications Web et mobiles.

Quels sont les avantages de l'utilisation de Lottie.js? Il fournit des animations de haute qualité, évolutives et interactives qui peuvent être facilement contrôlées via JavaScript.

Dans quels environnements puis-je utiliser Lottie.js? Il prend en charge une variété de plates-formes et de cadres.

Y a-t-il des considérations de taille ou de performance lors de l'utilisation des animations Lottie.js? Cependant, l'animation After Effects doit être optimisée pour les exportations de Lottie pour des performances optimales.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!