Ich glaube, Animationen im Web machen nicht nur Spaß, sondern sind auch so fesselnd, dass sie Website-Besucher zu Kunden gemacht haben. Denken Sie an den „Gefällt mir“-Button auf Twitter. Wenn Sie einen Tweet „liken“, verteilen sich winzige bunte Blasen um den Herz-Button, während er sich zu einem Kreis um den Button zu verwandeln scheint, bevor er in den endgültigen „gelikten“ Zustand übergeht, eine rote Füllung. Es wäre viel weniger aufregend, wenn das Herz einfach von einem Umriss zu einer Füllung wechseln würde. Diese Aufregung und Zufriedenheit ist ein perfektes Beispiel dafür, wie Animationen zur Verbesserung des Benutzererlebnisses eingesetzt werden können.
Dieser Artikel stellt das Konzept vor, Adobe After Effects-Animationen mit Lottie im Web darzustellen, was fortgeschrittene Animationen – wie diesen Twitter-Button – erreichbar machen kann.
Bodymovin ist ein Plugin für Adobe After Effects, das Animationen als JSON exportiert, und Lottie ist die Bibliothek, die sie nativ auf Mobilgeräten und im Web wiedergibt. Sie wurde von Hernan Torrisi entwickelt. Wenn Sie denken: „Oh, ich benutze kein After Effects, dieser Artikel ist wahrscheinlich nichts für mich“, dann warten Sie einen Moment. Ich benutze auch kein After Effects, aber ich habe Lottie in einem Projekt verwendet.
Sie müssen natürlich nicht Lottie verwenden, um Animationen im Web zu erstellen. Eine Alternative ist, Animationen von Grund auf neu zu gestalten. Das kann jedoch zeitaufwändig sein, insbesondere für die komplexen Animationstypen, für die Lottie gut geeignet ist. Eine weitere Alternative sind GIF-Animationen, die bei der Art der Animationen, die sie anzeigen können, unbegrenzt sind, aber typischerweise doppelt so groß sind wie die JSON-Dateien, die Bodymovin erstellt.
Lassen Sie uns also loslegen und sehen, wie es funktioniert.
Das JSON erhalten
Um Lottie zu verwenden, benötigen wir eine JSON-Datei, die die Animation aus After Effects enthält. Glücklicherweise hat Icons8 viele kostenlose animierte Icons hier in den Formaten JSON, GIF und After Effects.
Das Skript zu HTML hinzufügen
Wir müssen auch die JavaScript-Bibliothek des Bodymovin-Players in unser HTML aufnehmen und ihre loadAnimation()-Methode aufrufen. Die Grundlagen werden hier demonstriert.
<div id="icon-container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js">
<script>
var animation = bodymovin.loadAnimation({
// animationData: { /* ... */ },
container: document.getElementById('icon-container'), // required
path: 'data.json', // required
renderer: 'svg', // required
loop: true, // optional
autoplay: true, // optional
name: "Demo Animation", // optional
});
</script>Die Animation aktivieren
Nachdem die Animation im Container geladen wurde, können wir sie so konfigurieren, wie wir sie aktiviert haben möchten und welche Aktion sie auslösen soll, mit Event-Listenern. Hier sind die Eigenschaften, mit denen wir arbeiten können.
container: das DOM-Element, in das die Animation geladen wird.path: der relative Pfad der JSON-Datei, die die Animation enthält.renderer: das Format der Animation, einschließlich SVG, Canvas und HTML.loop: Boolean, um anzugeben, ob die Animation wiederholt werden soll oder nicht.autoplay: Boolean, um anzugeben, ob die Animation sofort nach dem Laden abgespielt werden soll.name: Animationsname für zukünftige Referenzierung.
Beachten Sie im früheren Beispiel, dass die Eigenschaft animationData auskommentiert ist. Sie ist mit der Eigenschaft path wechselseitig exklusiv und ein Objekt, das die exportierten Animationsdaten enthält.
Probieren wir ein Beispiel aus
Ich möchte demonstrieren, wie Lottie mit diesem animierten Play/Pause-Steuerungs-Icon von Icons8 verwendet wird.
Die Bodymovin-Player-Bibliothek wird hier statisch gehostet und kann auf diese Weise in das HTML eingebunden werden, aber sie ist auch als Paket verfügbar.
npm install lottie-web ### or yarn add lottie-webUnd dann, in Ihrer HTML-Datei, fügen Sie das Skript aus dem dist-Ordner des installierten Pakets ein. Sie könnten die Bibliothek auch als Modul von Skypack importieren.
import lottieWeb from "https://cdn.skypack.dev/lottie-web";Vorerst ist unser Pausen-Button in einer Schleife und spielt auch automatisch.
Ändern wir das, sodass die Animation durch eine Aktion ausgelöst wird.
Animation bei einem Trigger
Wenn wir autoplay ausschalten, erhalten wir ein statisches Pause-Symbol, da es so aus After Effects exportiert wurde.
Aber keine Sorge! Lottie bietet einige Methoden, die auf Animationsinstanzen angewendet werden können. Dazu ist tdie Dokumentation des npm-Pakets umfassender.
Wir müssen hier ein paar Dinge tun.
- Dass es anfänglich als „Play“-Zustand angezeigt wird.
- Auf Klick in den „Pause“-Zustand animieren.
- Zwischen beiden bei nachfolgenden Klicks animieren.
Die Methode goToAndStop(value, isFrame) ist hierfür geeignet. Wenn die Animation im Container geladen wurde, setzt diese Methode die Animation auf den angegebenen Wert und stoppt dort. In dieser Situation müssten wir den Animationswert finden, wenn er sich im Play-Zustand befindet, und ihn einstellen. Der zweite Parameter gibt an, ob der angegebene Wert zeit- oder bildbasiert ist. Es ist ein Boolean-Typ und der Standard ist false (d. h. zeitbasierter Wert). Da wir die Animation auf den Play-Frame setzen wollen, setzen wir ihn auf true.
Ein zeitbasierter Wert setzt die Animation auf einen bestimmten Punkt in der Zeitleiste. Zum Beispiel ist der Zeitwert am Anfang der Animation, wenn sie pausiert, 1. Ein bildbasierter Wert setzt die Animation jedoch auf einen bestimmten Bildwert. Ein Frame ist laut TechTerms ein einzelnes Bild in einer Bildsequenz. Wenn ich also den Frame-Wert der Animation auf 5 setze, springt die Animation zum fünften Frame der Animation (der „Bildsequenz“ in diesem Fall).
Nachdem ich verschiedene Werte ausprobiert habe, habe ich festgestellt, dass die Animation von den Frame-Werten 11 bis 16 spielt. Daher habe ich 14 gewählt, um auf der sicheren Seite zu sein.
Nun müssen wir die Animation so einstellen, dass sie beim Klicken des Benutzers auf Pause wechselt und beim erneuten Klicken des Benutzers auf Play. Als Nächstes benötigen wir die Methode playSegments(segments, forceFlag). Der Parameter segments ist ein Array mit zwei Zahlen. Die erste und zweite Zahl geben den ersten und letzten Frame an, den die Methode lesen soll. forceFlag ist ein Boolean, der angibt, ob die Methode sofort ausgeführt werden soll oder nicht. Wenn er auf false gesetzt ist, wartet er, bis die Animation zu dem Wert abgespielt wurde, der als erster Frame im segments-Array angegeben ist, bevor er ausgelöst wird. Wenn er auf true gesetzt ist, werden die Segmente sofort abgespielt.
Hier habe ich ein Flag erstellt, das anzeigt, wann die Segmente von Play zu Pause und von Pause zu Play abgespielt werden sollen. Ich habe auch den forceFlag-Boolean auf true gesetzt, da ich einen sofortigen Übergang wünsche.
Da haben wir es! Wir haben eine Animation von After Effects im Browser gerendert! Danke Lottie!
Canvas?
Ich bevorzuge SVG als Renderer, da es Skalierung unterstützt und meiner Meinung nach die schärfsten Animationen rendert. Canvas rendert nicht ganz so gut und unterstützt auch keine Skalierung. Wenn Sie jedoch ein vorhandenes Canvas verwenden möchten, um eine Animation zu rendern, müssen Sie einige zusätzliche Dinge tun.
Mehr tun
Animationsinstanzen haben auch Ereignisse, die ebenfalls verwendet werden können, um zu konfigurieren, wie die Animation reagieren soll.
Zum Beispiel habe ich im folgenden Pen zwei Event-Listener zur Animation hinzugefügt und Text eingefügt, der angezeigt werden soll, wenn die Events ausgelöst werden.
Alle Events sind in den Docs des npm-Pakets verfügbar. Damit sage ich: Gehen Sie hinaus und rendern Sie einige erstaunliche Animationen!
Ich hatte Lottie in einem Projekt gesehen, an dem ich mit einem Team gearbeitet habe, aber es nie ausprobiert.
Das ist ein Lebensretter.
Danke für das Teilen.
Gern geschehen.
Hallo! Ich verstehe nicht, was der Zweck dieses Code-Schnipsels ist, da es keinen Unterschied zwischen count === 1 und count >== 1 zu geben scheint, abgesehen vom Pluralwort time/s.
if(count !== 1) {document.body.lastChild.textContent = text;
} else document.body.appendChild(p);
Okay, also wenn die Animation geladen wurde, wird ein
<p>-Element dem<body>-Element angehängt (d. h. vor dem schließenden</body>-Tag) über das DOMLoaded-Ereignis.Wenn die Animation nun einmal abgespielt wird, möchten wir anzeigen: „Sie haben die Animation 1 Mal abgespielt…“.
Wenn sie erneut abgespielt wird, möchten wir die Anzahl der Wiedergaben der Animation aktualisieren (d. h. „Sie haben die Animation 2 Mal abgespielt…“).
Der bedingte Block prüft also, ob das
<p>-Element, das die Animationsanzahl anzeigt, vorhanden ist. Wenn ja, wird der Inhalt des Elements aktualisiert. Wenn nicht, wird ein<p>-Element an das<body>-Element angehängt.Wenn dieser Block nicht vorhanden wäre, gäbe es verschiedene
<p>-Elemente für die verschiedenen Male, die die Animation abgespielt wurde.Ich hoffe, das ist klar.
Danke für den hervorragenden Artikel, Idorenyin!
Ich versuche, eine Lottie-Animation für einen „Gefällt mir“-Button anzuzeigen, basierend auf einer CSS-Klasse, die er hat. Zum Beispiel, beim Laden der Seite, wenn er die Klasse „liked“ hat, sollte die Lottie-Animation den letzten Frame anzeigen (ein ausgefülltes rotes Herz), und wenn er die Klasse „liked“ nicht hat, sollte er den anfänglichen Frame anzeigen (nur den Umriss des Herzens). Und beim Klicken sollte die Animation abgespielt werden.
Haben Sie eine Idee, ob das möglich ist?
Danke!
Hallo Drew,
Ich würde vorschlagen, den Click-Event-Handler des Buttons und den Load-Event-Handler des Fensters zu verwenden. Innerhalb des Load-Event-Handlers können Sie, wenn der Button die Klasse ‚liked‘ hat, den gelikten Frame mit der
goToAndStop()-Methode von Lottie anzeigen. Und wenn sie nicht vorhanden ist, den anfänglichen Umriss-Frame anzeigen, wie im Folgenden:const button = document.querySelector('#like-button');window.addEventListener('load', () => {
if(button.classList.contains('liked')) {
previouslyLoadedAnimation.goToAndStop(15, true); //angenommen, der 15. Frame ist der gelikte Frame
} else {
previouslyLoadedAnimation.goToAndStop(0, true);
}
});
Und dann, im Click-Event-Handler des Buttons, prüfen Sie, ob die Klasse vorhanden ist. Und dann spielen Sie die erwartete Animation mit der
playSegments()-Methode von Lottie ab. Hier ist ein Beispiel:button.addEventListener('click', () => {if(button.classList.contains('liked')) {
previouslyLoadedAnimation.playSegments([15, 30], true);
button.classList.remove('liked');
} else {
previouslyLoadedAnimation.playSegments([0, 15], true);
button.classList.add('liked');
}
});
Ich hoffe, das hilft Ihnen, und ich freue mich, dass Ihnen der Artikel gefällt.
Danke, Idorenyin! Ich habe das zum Laufen gebracht. Das einzige Problem scheint mit dem Lottie-„Container“-Parameter zu sein. Es scheint Lottie nur beim ersten gefundenen Element zu laden (ich habe etwas wie gemacht
`var button = document.querySelector(“.bodymovinanim”);
var buttonAnim = bodymovin.loadAnimation({
container: button,
renderer: “svg”,
loop: false,
autoplay: false,
path: “data.json”
});`
Ich bin mir nicht sicher, warum es nicht auf allen anderen Buttons auf derselben Seite geladen wird. Jeder Button verwendet dieselbe Klasse, hat aber ein anderes Data-Attribut.
Hallo Drew,
Die Methode
querySelector()gibt das erste übereinstimmende Element zurück. Was Sie verwenden möchten, ist die MethodequerySelectorAll(). Dann müssen Sie die Animation in allen Elementen laden, die in dieser Sammlung zurückgegeben werden. Darauf beziehe ich mich.const buttons = document.querySelectorAll('.bodymovinanim');buttons.forEach((element) => {
const animation = bodymovin.loadAnimation({
container: element,
renderer: 'svg',
// der Rest...
});
});
Ich hoffe, das hilft.
Brillant! Danke!
Werden diese Animationen die Seitenrendern oder die Leistung verlangsamen?
Es kann zu einer Verzögerung beim Laden der Animation kommen, da die erforderliche JSON-Datei abgerufen wird. Dies ist jedoch der Fall, wenn sich die JSON-Datei auf einem anderen Ursprung als der Webseite befindet.
Wenn Sie Skypack anstelle von npm verwenden, wird die Leistungsverzögerung durch eine weitere Abhängigkeit vermieden.
Ich hoffe, das hilft!
css-tricks ist wirklich ein Lebensretter! Ich habe diese onClick-Animationsänderung für Lottie-Animationen nirgendwo gefunden! Vielen Dank :)
Gern geschehen!
Wie stellt man die Frame-Position der Lottie-Animation aus dem Wert ein, den wir von einem Bereichsschieberegler erhalten?
Zum Beispiel hat eine Animation 400 Frames und ein Bereichsschieberegler hat min:1 max:400, ich möchte den Wert vom Schieberegler erhalten.
und dann den entsprechenden Frame anzeigen.
Dafür ist die geeignete Lottie-Methode die Methode
goToAndStop(value, isFrame).Der Parameter
valueist der Wert vom Bereichsschieberegler, während der ParameterisFrameauf true gesetzt wird, da es der Frame ist, zu dem die Animation springen soll.Ich hoffe, das hilft!
Hallo, ich versuche, Ihren Code aus dem letzten Abschnitt „Mehr tun“ in einer Standard-ASP.NET-Default.aspx-Seite zu verwenden und erhalte einen Fehler.
Uncaught SyntaxError: Cannot use import statement outside a module
in dieser Codezeile.
import lottieWeb from ‘https://cdn.skypack.dev/lottie-web’;
Irgendwelche Vorschläge?
Auf der HTML-Datei, in der sich das Skriptelement befindet, fügen Sie dem Skript-Öffnungs-Tag das Attribut
type=„module“hinzu.Hallo,
Ich habe versucht, eine Animation abzuspielen, dann zu einer bestimmten Zeit anzuhalten und dann die Animation abzuschließen, wenn sich eine Variable von false auf true ändert.
Ich habe isMarkerVisited auf false gesetzt und dann
if (isMarkerVisited === true) {animation.playSegements([37, 141], true)}aber wenn ich versuche, die Variable in der Konsole auf true zu ändern, passiert nichts.