Eines Tages kam unser UI-Designer zu mir und sagte, ich solle die Animationen, die ich im Programm geschrieben habe, durch die JSON-Animationen ersetzen, die sie mir gegeben haben. Der Grund dafür ist, dass einige Animationen sehr kompliziert sind und nicht ihre erwarteten Effekte erzielen können, wenn ich sie selbst schreibe ( Als ich dies schrieb, kam mir plötzlich eine Frage: Warum verwenden Sie nicht GIF für eine so komplizierte Animation? Der Android-Entwickler, der mir gegenüber saß, antwortete, dass die Qualität von GIF beim Abspielen möglicherweise nicht hoch sei. Okay, ich glaube es.
ICH:? ? ? ? Der Client kann JSON-Animationen hinzufügen. Ich habe noch nie davon gehört, dass H5-Seiten JSON-Animationen lesen können.
Der Designer war sich sicher und meinte ja, es gibt eine Webversion.
Während ich dies schreibe, möchte ich unsere Designer-Mädels wirklich loben. Unter ihrem Druck wurden fast viele gute Lösungen gefunden (oh, sie können auch H5-Seiten schreiben ... sie möchten, dass ich die Serie nutze).
Hier stellt sich also die Frage: Wie verwendet man eine JSON-Animation auf einer H5-Seite?
So verwenden Sie eine JSON-Animation auf einer H5-SeiteZu diesem Zeitpunkt schickte mir der Designer einen Link. Ich habe darauf geklickt, um mehr darüber zu erfahren. Es handelt sich um eine Open-Source-Animationsbibliothek von Airbnb. Diese Bibliothek kann viele coole Animationen vervollständigen Der Designer muss lediglich die JSON-Datei über eine von AE erstellte Animation exportieren Software, und dann verwendet das Front-End Lottie, um die JSON-Datei direkt zu laden, um Animationen zu generieren. Es ist nicht erforderlich, dass der Designer viele GIFs ausschneidet, noch muss das Front-End komplexe Zeichnungen ausführen. Es tötet zwei Fliegen mit einem Stone und Lottie sind auf allen Plattformen verfügbar, einschließlich iOS, Android, Web und React. Native kann verwendet werden, benötigt weniger Speicher und lädt reibungslos. (Warum entdecke ich so etwas Magisches erst jetzt?
Nachdem ich so viel gesagt habe, wie verwendet man es auf H5-Seiten?
Es ist ganz einfach. Der vom Designer generierte Ordner wird an Sie gesendet (der Designer muss nur ein Lottie-Plugin in AE hinzufügen und exportieren). Öffnen Sie demo.html und Sie werden es sehen Ich weiß, wie es funktioniert (ich schreibe hier also immer noch technische Artikel).
Spaß beiseite, ich bin bei der Verwendung tatsächlich auf viele Fallstricke gestoßen. Hier sind ein paar Dinge, auf die man bei der Verwendung achten sollte.
1. In demo.html gibt es viele Inline-Dinge, die bei der Verwendung unansehnlich sind.Schauen Sie genauer hin. Tatsächlich fügt demo.html sowohl js als auch json ein. Für js können wir die auf der CDN angegebene Adresse verwenden.
<script type=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script>
Die für die Animation erforderlichen JSON-Daten werden in der Datei data.json abgelegt, das Datenformat in der angegebenen JSON-Datei ist jedoch wie folgt (sie ist zu lang und kann nicht abgeschnitten werden).
Wenn Sie ein Skript verwenden möchten, um eine JSON-Datei in einen separaten HTML-Code einzufügen, wird ein Fehler gemeldet. Sie müssen daher die JSON-Datei ändern, Variablen voranstellen und Werte zuweisen. Wie unten gezeigt:
Auf diese Weise können Sie die JSON auf die gleiche Weise importieren wie die JS-Datei.
<script type=text/javascript src=./data.json></script>
Auf diese Weise wird die verfügbare demo.html auf Folgendes reduziert
<html xmlns=http://www.w3.org/1999/xhtml><meta charset=UTF-8><head> <style> body{ background-color:black; height: 100%; : versteckt; } #lottie{ background-color:#fff; width:100%; translator3d(0,0,0); text-align: center; opacity: 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 = { Container: document.getElementById('lottie'), Renderer: 'svg', Schleife: true, Autoplay: true, AnimationData: AnimationData }; anim; anim = lottie.loadAnimation(params);</script></body></html>Wenn Sie die modulare js-Programmierung verwenden, können Sie diese natürlich wie folgt direkt importieren, ohne data.json zu ändern:
Animationsdaten aus „./data.json“ importieren2. Animationen an mobile Geräte anpassen
Der Grund, warum ich das für eine Falle halte, liegt darin, dass die Animation, die mir die Designerin gegeben hat, im Vollbildmodus und nicht transparent war und sie mich dann gebeten hat, die Animation mit einer Breite von 100 % und einem vertikal zentrierten Abfang zu positionieren Im Browser beträgt die Breite unter dem 360 * 640-Bildschirm 100 %, der Ausdruck lautet wie folgt (es sieht so aus, als ob die Höhe 100 % beträgt, die Breite an die Mitte angepasst wird und die schwarze Hintergrundfarbe auf beiden ausläuft Seiten, siehe den blau umrahmten Teil im Bild unten)
Wechseln Sie zum Bildschirm des iPhone
Dieses Layout ist so vertraut. Es verhält sich genauso, als ob das Objektanpassungsattribut von img auf „enthalten“ eingestellt wäre (Objektanpassung ist ebenfalls ein Schatz. Interessierte Schüler können es studieren, es ist sehr einfach zu verwenden).
Um die Anforderungen des Designers hier zu erfüllen, füge ich hauptsächlich den folgenden Code hinzu:
js-Teil: setTimeout(function() { document.getElementsByTagName('svg')[0].style.height = 'auto';}, 50); CSS-Teil: (Flex-Layout zu Lottie hinzufügen) #lottie { width:100 %; height:100%; transform: translator3d(0,0,0); links: 0; z-index: 3; flex-direction: row;}Endeffekt:
ZusammenfassenDie obigen Screenshots sind alle statisch, aber ich weiß nicht, wie man Animationen hinzufügt, also habe ich es nicht getan. Wenn Sie interessiert sind, können Sie es versuchen.
Anwendungsbereich: Ich bin der Meinung, dass diese Methode im Allgemeinen für Vollbild- oder teilweise komplexe Animationen geeignet ist. Sie ist flüssiger als GIF und weist eine gute Kompatibilität auf. Wenn ja, verwenden Sie diese Methode. Einfache Animationen lassen sich in der Regel mit einem eigenen Programm umsetzen und Fallstricke vermeiden.
Referenzlinks:
Offizielle Lottie-Website
Lottie-Web-Github-Adresse
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.