Un jour, notre concepteur d'interface utilisateur est venu me voir et m'a dit que je devais remplacer les animations que j'avais écrites dans le programme par les animations json qu'ils m'avaient données. La raison en est que certaines animations sont très compliquées et ne peuvent pas obtenir les effets escomptés si je les écris moi-même ( Quand j'ai écrit ceci, j'ai soudainement pensé à une question : pourquoi n'utilisez-vous pas le gif pour une animation aussi compliquée ? Le développeur Android assis en face de moi a répondu que la qualité du gif n'était peut-être pas élevée lorsqu'il était joué, d'accord, je le crois)
JE:? ? ? ? Le client peut ajouter une animation json. Je n'ai jamais entendu parler de pages H5 capables de lire une animation json.
Le concepteur a semblé sûr et a dit oui, il existe une version Web.
Au moment où j'écris ceci, je tiens vraiment à féliciter nos créatrices. Presque beaucoup de bonnes solutions ont été trouvées sous leur pression (oh, elles peuvent aussi écrire des pages H5... elles veulent que je le fasse, à quoi ça sert la série).
Alors voici la question, comment utiliser l'animation json dans la page H5 ?
Comment utiliser l'animation JSON dans la page H5À ce moment-là, le concepteur m'a envoyé un lien, regardez ici lottie-web ; j'ai cliqué dessus pour en savoir plus. C'est une bibliothèque d'animation open source d'Airbnb. Cette bibliothèque peut compléter de nombreuses animations sympas et est très simple à utiliser. .Le concepteur n'a besoin que d'exporter le fichier JSON via une animation réalisée par AE. logiciel, puis le front-end utilise Lottie pour charger directement le fichier JSON afin de générer une animation. Cela ne nécessite pas que le concepteur coupe de nombreux gifs, ni que le front-end effectue un dessin complexe. Il tue deux oiseaux avec un seul. Stone et Lottie sont disponibles sur toutes les plateformes, y compris iOS, Android, Web et React. Native peut être utilisé, il prend moins de mémoire et se charge en douceur. (Pourquoi est-ce que je découvre une chose aussi magique seulement maintenant ?
Cela dit, comment l'utiliser dans les pages H5 ?
C'est très simple. Le dossier généré par le concepteur vous est envoyé (le concepteur n'a qu'à ajouter un plug-in lottie dans AE et à l'exporter). Après l'avoir ouvert, il devrait ressembler à ceci : Ouvrez demo.html. je sais comment ça marche. Je l'ai utilisé (donc j'écris toujours des articles techniques ici)
Blague à part, j’ai effectivement rencontré pas mal d’embûches lors de leur utilisation. Voici quelques points à prendre en compte lors de leur utilisation.
1. Il y a beaucoup d'éléments en ligne dans demo.html, qui sont inesthétiques lorsqu'ils sont utilisés.Regardez de plus près. En fait, demo.html y met à la fois js et json. Pour le moment, nous pouvons séparer js et json séparément. Pour js, nous pouvons utiliser l'adresse fournie sur le cdn.
<script type=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script>
Les données json requises pour l'animation sont placées dans le fichier data.json, mais le format des données dans le fichier json donné est le suivant (il est trop long et ne peut pas être coupé)
Si vous souhaitez utiliser un script pour introduire un fichier json dans un HTML séparé, une erreur sera signalée, vous devez donc modifier le fichier json, ajouter des variables devant et attribuer des valeurs. Comme indiqué ci-dessous :
De cette façon, vous pouvez importer le json de la même manière que le fichier js.
<script type=text/javascript src=./data.json></script>
De cette façon, le demo.html disponible est réduit au suivant
<html xmlns=http://www.w3.org/1999/xhtml><meta charset=UTF-8><head> <style> body{ background-color:black; margin: 0px height: 100%; : caché; } #lottie{ background-color:#fff; largeur:100%; display:block; traduire3d(0,0,0); text-align: center; opacité: 1; } </style></head><body><div id=lottie></div><script type=text/javascript src= https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script><script type=text/javascript src=./data.json></script><script> var params = { conteneur : document.getElementById('lottie'), moteur de rendu : 'svg', boucle : true, lecture automatique : true, animationData : animationData }; anim; anim = lottie.loadAnimation(params);</script></body></html>Bien sûr, si vous utilisez la programmation modulaire js, vous pouvez simplement l'importer directement sans modifier data.json, comme suit :
importer des données d'animation depuis './data.json'2. Adaptez les animations aux appareils mobiles
La raison pour laquelle je pense que c'est un écueil est que l'animation que la designer m'a donnée était en plein écran et non transparente, puis elle m'a demandé de positionner l'animation avec une largeur de 100 % et une interception centrée verticalement. dans le navigateur. , sous l'écran 360*640, la largeur est de 100 %, l'expression est la suivante (on dirait que la hauteur est de 100 %, la largeur est adaptée au centre et la couleur de fond noire s'échappe sur les deux côtés, voir la partie encadrée en bleu dans l'image ci-dessous)
Passer à l'écran de l'iPhone
Cette disposition est si familière. Elle se comporte de la même manière que lorsque l'attribut object-fit de img est défini pour contenir (object-fit est également un trésor. Les étudiants intéressés peuvent l'étudier, il est très facile à utiliser)
Pour répondre ici aux besoins du concepteur, j'ajoute principalement le code suivant :
partie js : setTimeout(function() { document.getElementsByTagName('svg')[0].style.height = 'auto';}, 50); partie css : (ajouter une disposition flexible à lottie) #lottie { width:100 % ; hauteur : 100 % ; transformation : traduire3d(0,0,0); alignement du texte : centre ; position : absolue ; gauche : 0 ; z-index : 3 ; affichage : flex ; flex-direction : row ;Effet final :
RésumerLes captures d'écran ci-dessus sont toutes statiques, mais elles ont en fait un effet dynamique. Je ne sais pas comment ajouter des animations, donc je ne l'ai pas fait. Si vous êtes intéressé, vous pouvez essayer.
Champ d'application : je pense que les animations généralement en plein écran ou partiellement complexes peuvent utiliser cette méthode. Elle est plus fluide que le GIF et a une bonne compatibilité. Certains produits Android utilisent cette méthode pour ouvrir l'écran de manière cool. Si c'est le cas, des animations simples peuvent généralement être implémentées par votre propre programme et vous pouvez éviter les pièges.
Liens de référence :
site officiel de Lottie
adresse github lottie-web
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.