Mit Lottie animieren

Webanimation ist nicht nur sehr interessant, sondern verbessert auch die Beteiligung der Benutzer und konvertiert Besucher in Kunden. Denken Sie an Twitters "Like" -Button: Wenn Sie klicken, um zu mögen, diffundieren farbenfrohe Blasen um die herzförmige Taste, und die Schaltfläche wird nach und nach zum Kreis und schließlich der rote Füllstatus nach dem Like. Wenn Sie einfach den Herzform -Umriss füllen, wird der Effekt viel schlechter sein. Dieses Gefühl der Aufregung und Zufriedenheit zeigt perfekt, wie die Animation die Benutzererfahrung verbessern kann.

In diesem Artikel wird vorgestellt, wie Sie Lottie verwenden, um Adobe After Effects -Animationen auf Webseiten zu rendern, um komplexe Animationseffekte wie Twitter -ähnliche Schaltflächen zu erzielen.

BodyMovin ist ein Plug-In für Adobe After Effects, der Animationen in das JSON-Format exportiert. Lottie ist eine Bibliothek, die diese JSON -Animationen auf mobilen und Webseiten nativ rendern kann. Es wurde von Hernan Torrisi geschaffen. Wenn Sie denken: "Ich benutze keine After -Effekte, dieser Beitrag ist möglicherweise nicht für mich", warten Sie bitte einen Moment. Ich benutze auch keine After Effects, aber ich habe Lottie in meinem Projekt verwendet.

Natürlich müssen Sie Lottie nicht verwenden, um Animationen auf Webseiten zu erstellen. Ein weiterer Ansatz besteht darin, Animationen von Grund auf neu zu gestalten, aber dies kann sehr zeitaufwändig sein, insbesondere für komplexe Animationstypen, mit denen Lottie gut zu tun hat. Eine weitere Option ist die Verwendung von GIF -Animationen, die unbegrenzte Animationstypen haben. Ihre Dateigröße ist jedoch normalerweise doppelt so groß wie die von BodyMovin generierte JSON -Datei.

Beginnen wir zu verstehen, wie es funktioniert.

Holen Sie sich JSON -Datei

Um Lottie zu verwenden, benötigen wir eine JSON -Datei, die die After Effects -Animation enthält. Glücklicherweise bietet Icons8 viele kostenlose animierte Symbole, die in den Formaten JSON, GIF und After Effects erhältlich sind.

Fügen Sie HTML Skript hinzu

Wir müssen auch die JavaScript -Bibliothek des BodyMovin -Players in HTML vorstellen und die Methode loadAnimation() aufrufen. Die grundlegende Methode lautet wie folgt:

<div id="icon-container"></div>
<script>
  var animation = bodymovin.loadAnimation({
    container: document.getElementById('icon-container'), // 必需
    path: 'data.json', // 必需
    renderer: 'svg', // 必需
    loop: true, // 可选
    autoplay: true, // 可选
    name: "Demo Animation", // 可选
  });
</script>

Aktivierungsanimation

Nachdem die Animation in den Container geladen wurde, können wir den Ereignishörer verwenden, um die Aktivierungsmethode zu konfigurieren und die Aktion der Animation auszulösen. Im Folgenden finden Sie die verfügbaren Eigenschaften:

• container : Laden Sie das DOM -Element der Animation
• path : Der relative Pfad zur JSON -Datei, die die Animation enthält
• renderer : Animationsformat, einschließlich SVG, Canvas und HTML
• loop : Booleaner Wert, Geben Sie an, ob die Animation Schleife gespielt wird
• autoplay : Booleaner Wert, geben Sie an, ob die Animation nach dem Laden automatisch abgespielt wird
• name : Animationsname, verwendet für zukünftige Referenzen

Beachten Sie, dass animationData -Eigenschaft im vorherigen Beispiel kommentiert wurde. Es schließt sich gegenseitig für path Pfadattribut aus und ist ein Objekt, das die exportierten Animationsdaten enthält.

Probieren Sie ein Beispiel aus

Ich möchte demonstrieren, wie Lottie mit diesem Animationsspiel-/Pause -Steuerungssymbol von Icons8 verwendet wird:

Die BodyMovin Player -Bibliothek wird hier statisch gehostet und kann direkt in HTML platziert werden, kann aber auch als Paket verwendet werden:

 NPM Installieren Sie Lottie-Web ### oder Garn Fügen Sie Lottie-Web hinzu

Fügen Sie dann in Ihrer HTML -Datei die Skripte aus dem DIST -Ordner des installierten Pakets hinzu. Sie können die Bibliothek auch als Modul aus Skypack importieren:

 Importieren Sie LotTieweb aus "https://cdn.skypack.dev/lottie-web";

Derzeit befindet sich unsere Pause -Taste in der Loop -Wiedergabe und spielt automatisch ab:

Lassen Sie es uns so ändern, dass die Animation durch die Aktion ausgelöst wird.

Animation auslösen

Wenn Autoplay ausgeschaltet ist, erhalten wir ein statisches Pause -Symbol, da es so aus After Effects exportiert.

Aber mach dir keine Sorgen! Lottie bietet einige Methoden, die auf Animationsinstanzen angewendet werden können. Das heißt, die Dokumentation des NPM -Pakets ist umfassender.

Wir müssen ein paar Dinge tun:

• Anfangs als "Play" -Status angezeigt.
• Setzen Sie seine Animation auf "Pause", wenn Sie klicken
• Wechseln Sie dann die Animation zwischen den beiden, wenn Sie klicken.

goToAndStop(value, isFrame) ist hier sehr geeignet. Wenn die Animation in den Container geladen wird, setzt diese Methode die Animation für den bereitgestellten Wert und stoppt dann dort. In diesem Fall müssen wir den Wert der Animation finden, wenn sie gespielt wird, und sie festlegen. Der zweite Parameter gibt an, ob der angegebene Wert auf Zeit oder Frame basiert. Es handelt sich um einen Booleschen Typ mit einem Standardwert von False (d. H. Ein zeitbasierter Wert). Da wir die Animation so festlegen wollen, dass wir den Frame abgespielt haben, setzen wir sie auf wahr.

Legt die Animation basierend auf dem Wert auf einen bestimmten Punkt auf der Timeline basierend auf der Zeitleiste fest. Beispielsweise beträgt der Zeitwert zu Beginn der Animation (bei Pause) 1. Die Animation wird jedoch auf einen bestimmten Rahmenwert eingestellt, der auf dem Wert des Frame basiert. Laut Techterms ist ein Frame ein einzelnes Bild in einer Bildsequenz. Wenn ich also den Frame -Wert der Animation auf 5 festlegt, wird die Animation in die Animation zum fünften Bild (in diesem Fall "Bildsequenz").

Nachdem ich unterschiedliche Werte ausprobiert hatte, stellte ich fest, dass die Animation von den Rahmenwerten 11 bis 16 abgespielt wird. Also habe ich mich für 14 entschieden, um sicher zu sein.

Jetzt müssen wir animieren, dass es sich ändert, wenn der Benutzer darauf klickt und spielt, wenn der Benutzer erneut darauf klickt. Als nächstes brauchen wir playSegments(segments, forceFlag) . segments ist ein Array -Typ, der zwei Zahlen enthält. Die ersten und zweiten Zahlen repräsentieren die ersten und letzten Frames, die die Methode lesen sollte. forceFlag ist ein boolescher Wert, der angibt, ob die Methode sofort ausgelöst werden soll. Wenn es auf False festgelegt wird, wartet es, bis die Animation den als ersten Frame im segments -Array angegebenen Wert abspielt. Wenn wahr, wird der Clip sofort gespielt.

Hier habe ich eine Flagge erstellt, um anzuzeigen, wann der Clip von Play to Pause und den Clip von Pause zum Spielen gespielt werden soll. Ich habe auch forceFlag -Boolean eingestellt, weil ich möchte, dass die Konvertierung sofort durchgeführt wird.

Das war's! Wir rendern Animationen von After Effects in den Browser! Danke Lottie!

Leinwand?

Ich bevorzuge SVG als Renderer, weil es die Skalierung unterstützt, was meiner Meinung nach die klarste Animation machen kann. Das Rendering von Leinwand ist nicht sehr gut und unterstützt die Skalierung nicht. Wenn Sie jedoch Animationen mit einer vorhandenen Leinwand rendern möchten, müssen Sie einige zusätzliche Vorgänge ausführen.

Weitere Operationen

Es gibt auch einige Ereignisse in Animationsinstanzen, mit denen auch das Verhalten von Animationen konfiguriert werden können.

In der folgenden Stift habe ich beispielsweise zwei Ereignishörer in die Animation hinzugefügt und einen Text festgelegt, der angezeigt wird, wenn das Ereignis ausgelöst wird.

Alle Ereignisse finden Sie in der Dokumentation für das NPM -Paket. Lassen Sie mich bei all dem etwas anderes sagen. Lassen Sie uns einige erstaunliche Animationen machen!

Das obige ist der detaillierte Inhalt vonMit Lottie animieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!