Share
Volle Timeline-Kontrolle, Import und Export von JSON, Inspektion von Animationen, intuitive Benutzeroberfläche, Live-Bearbeitung, leicht verständliche API, Geschwindigkeit und Echtzeit-Feedback: alles, was Sie sich bei der Erstellung und Verwaltung von Webanimationen in einer grafischen Benutzeroberfläche wünschen. In diesem Artikel werfen wir einen Blick auf das neueste für Webanimatoren verfügbare Tool namens Spirit von Patrick Brouwer. Wir erfahren, wie Sie die Art und Weise ändern können, in der Sie Animationen im Web erstellen. Lass uns animieren!
Geist ist ein dreiteiliges Rezept, das Folgendes erfordert:
Die Desktop-App ist eine grafische Benutzeroberfläche (GUI) zum Erstellen und Verwalten Ihrer Animationen, während die Browsererweiterung die Verbindung zwischen der entsprechenden Desktop-App und Ihrer Webseite herstellt.
Die App ist derzeit für Mac verfügbar, wird jedoch in naher Zukunft für Windows und Linux verfügbar sein. Die Browsererweiterung von Spirit ist derzeit ausschließlich Chrome, kompatible Erweiterungen für andere große Browser (Firefox, Opera und Safari) sind jedoch in der Entwicklung.
Wenn jede benötigte Komponente vorhanden ist, können Sie mit der Animationsentwicklung beginnen. Öffnen Sie die App, navigieren Sie mit Ihrem Browser zur gewünschten Webseiten-URL, aktivieren Sie die Erweiterung und starten Sie die Animation!
Wenn Sie eine Webseite aus Ihrem lokalen Dateisystem animieren möchten, aktivieren Sie das Kontrollkästchen Erlauben Sie den Zugriff auf Datei-URLs in Ihren Chrome-Erweiterungseinstellungen.
Es wird empfohlen, dass Sie eine hinzufügen data-spirit-id zu jedem Element, das Sie bei der lokalen Entwicklung animieren möchten.
…
Dies erleichtert die Verwendung der GUI zum Bearbeiten der Zeitleiste eines Elements und erleichtert es der Laufzeit, Ihre Ziele auszuwählen, ohne elementbasierte CSS-Selektoren (z. body> div> div> ul).
Spirit verwendet das, was als "Runtime (Player)" bezeichnet wird. Wenn die von Ihnen besuchte Webseite keine Spirit-Laufzeitumgebung hat, fügt die Browsererweiterung automatisch eine temporäre Laufzeit für Sie ein. Die Laufzeit ist nur eine JavaScript-Datei (~ 10kb). Wenn Sie also den Begriff "Laufzeit" hören, sagen Sie "JavaScript-Datei"..
Mit Runtime können Sie die Animationen direkt auf Ihrer Webseite abspielen und die Leistungsfähigkeit von GSAP für alle Animationswiedergaben nutzen. Das heißt, Sie können sowohl GSAP-spezifische Eigenschaften als auch Plugins verwenden drawSVG oder morphSVG, zusammen mit anderen Animationsstrategien (WAAPI).
Die Laufzeit steht über Open Source zur Verfügung, falls Sie Zeit für die Pflege oder Verbesserung Ihrer Zeit haben möchten. Wenn Sie den Runtime-Player lieber als NPM-Paket installieren möchten, geben Sie den Installationsbefehl ein npm install spiritjs --save von Ihrem Terminal aus, oder Sie können Yarn mit dem Installationsbefehl versuchen garn addieren spirituosen.
Sind Sie ein Web-Animator, der nach einer Zeitleiste sucht, die einfach zu steuern, zu navigieren und zu verwenden ist? Spirit hat den Rücken mit einer eleganten und intuitiven Benutzeroberfläche, die zahlreiche Optionen zur Feinabstimmung Ihrer Kreationen bietet. Die Timeline kann problemlos gesäubert und Keyframes hinzugefügt werden. Das Sortieren von Elementen ist jedoch ein Feature, das noch implementiert werden muss. Wenn Sie in Echtzeit entwickeln, können Elemente nach Bedarf hinzugefügt oder entfernt werden. Wenn Ihre Arbeit abgeschlossen ist, klicken Sie auf die Schaltfläche zurück Schaltfläche, exportieren Sie die JSON-Datei, die Ihren Fortschritt enthält, und laden Sie sie bei Bedarf mit der Spirit-Laufzeit-API.
Jeder Keyframe kann hinsichtlich Timing und Beschleunigung fein abgestimmt werden. Das Hinzufügen und Entfernen ist ebenfalls unkompliziert. Elemente werden im Zeitleisteninspektor vertikal aufgelistet, und jedes Element verfügt über eine eigene Zeitleiste.
Die Werte für die Animation jeder Eigenschaft können alle Werte sein, die die Laufzeitumgebung akzeptiert. Es ist sogar möglich, JavaScript-Code als übergebenen Wert zu verwenden, der mithilfe von Mausereignissen, Scrollen und Positionserkennung dynamische und flexible Elemente erzeugt, um nur einige zu nennen. Stellen Sie sicher, dass Ihre JavaScript-Logik für Eigenschaftswerte wie geschweifte geschweifte Klammern verwendet wird window.innerWidth - this.clientWidth.
Jedes Element kann über viele verschiedene Eigenschaften verfügen, die animiert werden können, einschließlich spezifischer SVG-Eigenschaften Schlaganfall, füllen, Farbe, Position und Größe. Sie können sogar auswählen Clippfade, Filter, Box Schatten und z-index zu animieren Benutzerdefinierte Eigenschaften können ebenfalls hinzugefügt werden, wenn die Standardeinstellungen nicht Ihren Anforderungen entsprechen. Stellen Sie sicher, dass die übergebenen benutzerdefinierten Eigenschaften mit den durch W3C-Spezifikationen dokumentierten CSS-Eigenschaftsnamen übereinstimmen.
Eine Animationsgruppe ist eine Sammlung von Objekten (HTML-Elementen), die Sie animieren möchten. Stellen Sie sich Gruppen als "Komponenten" vor, bei denen jede als JSON exportiert werden kann.
Sie können beliebig viele Gruppen erstellen und haben die Kontrolle über jede einzelne Gruppe. Erstellen Sie einfach neue Gruppen und fügen Sie neue Elemente hinzu, indem Sie sie direkt auf Ihrer Webseite oder über das Symbol auswählen Elemente Panel in Chrome Devtools. Wenn das erfasste Element kein hat data-spirit-id Das einzige Attribut, das es besitzt, ist ein XPath (relativ zum ausgewählten Stamm). Daher sollten Attributreferenzen erstellt werden, wenn Produktionsentwicklungsaufrufe erfolgen.
Accentsconagua
var tl = new TimelineMax () spirit.setup (). then (() => spirit.load ('./ my-animations.json'). dann (groups => // alle Gruppen erstellen groups.construct ( // Steuern der Zündsequenz jeder Gruppe mit GSAP tl.add (groups.get ('group-name'), 0) .add (groups.get ('group-anothergroupname'), '- = 0,25') .add (groups.get ('group-yetanothergroupname'), '+ = 0,125')));Eine Gruppe ist eigentlich nur eine Sammlung von Zeitplänen für GSAP. Wenn Sie bereits GreenSock-Benutzer sind, ist dies eine willkommene Ergänzung Ihres Workflows und Ihrer Tools. Gruppen können nicht sofort mit der Desktop-App (einer zukünftigen Funktionsanforderung) gesteuert werden. Das Problem kann jedoch mit der erweiterten API von Spirit behoben werden, da die Laufzeit die GSAP-API für Timeline-Instanzen nutzt, die im obigen Code enthalten sind. Sie können sich auch dieses von Spirit's Hersteller erstellte Demo ansehen und die Verwendung einer Master-Timeline-Sequenz mit UI-Steuerelementen und mehreren Gruppen zeigen:
Wie ich bereits in meinen vorherigen Erläuterungen zu Gruppen erörtert habe, verfügt Spirit über eine API für Entwickler, die eine tiefere Kontrolle benötigen. Es werden zwei APIs bereitgestellt. eine einfache API und eine erweiterte API.
spirit.loadAnimation (container: element, // dom-Element, das eine Animationsschleife enthält: true, yoyo: true, delay: 2)
Während die erweiterte API eine umfassende Kontrolle ermöglicht, kann die einfache API Aufgaben abdecken, z. B. die Wiedergabe über eine Reihe von Optionen steuern. Sie können sogar Werte zurückgeben, Gruppen laden und Interaktivität hinzufügen.
spirit.setup ()
Die erweiterte API eignet sich für alle Ihre zusätzlichen Anforderungen außerhalb der einfachen API. Bevor Sie die erweiterte API verwenden können, müssen Sie der Laufzeitumgebung mitteilen, wo sie die GSAP finden kann Tween und Zeitleiste Instanzen. Nach dem Aufruf der Setup-Methode von Spirit werden die Flutentore geöffnet, sodass Sie die Möglichkeit haben, Zeitleisten und Referenzierung, Interaktivität, Referenzierung von Keyframes und Eigenschaften und vieles mehr zu erstellen.
Es ist wichtig, die Dinge synchron zu halten, vor allem, damit Spirit effektiv läuft. Die Desktop-Anwendung von Spirit wird automatisch im Hintergrund aktualisiert. So haben Sie immer die neueste Version und die neuesten Funktionen zur Hand. Durch die automatische Aktualisierung der Spirit-App ist es einfacher, neue Funktionen zu durchlaufen und zu implementieren. Chrome-Erweiterungen werden auch im Hintergrund aktualisiert. Alle paar Stunden überprüft der Browser, ob installierte Erweiterungen oder Apps eine Aktualisierungs-URL enthalten. Für jede wird eine Anfrage an diese URL gestellt, die nach einer aktualisierten XML-Manifestdatei sucht.
Gehe zu Chrome: // Erweiterungen und kreuzen Sie an Entwicklermodus Aktivieren Sie das Kontrollkästchen oben rechts und drücken Sie dann die Erweiterungen jetzt aktualisieren Taste. Indem sichergestellt wird, dass dieses Setup vorhanden ist, kann Spirit ohne unerwartetes Verhalten arbeiten, da neue Funktionen und aktualisierte Daten hinzugefügt werden.
Wenn Sie die neuen Funktionen und den Fortschritt mit Spirit im Auge behalten möchten, können Sie sich hier für den Newsletter anmelden und den Fortschritt auf Twitter verfolgen. Spirit ist definitiv das Werkzeug, das die Art und Weise verändert, wie Sie Animationen für das Web erstellen.
