Exportieren von Effekten Animationen an HTML5

Animation im Web ist hier, um zu bleiben. Es ist in allem von den subtilen Bewegungen, die unsere Hilfe bringen Ui-Design Zum Leben, um vollständig animierte Leinwanderfahrungen und Webgl-Experimente, die herausfordern, was wir einst nachgedacht haben, in dem Browser möglich war.

Während die Kreativität von Entwicklungen und die Fähigkeiten von Browsern zunehmen, ist die Animation im Internet seit langem ein schlechter Bezug auf Video - etwas, das die Bewegungsgrafikgemeinschaft seit Jahren mit Vorsicht angesprochen hat. Denken Sie daran, dass Sie, wenn Sie eine komplexe Site haben, um zu warten, Ihre Web-Hosting Dienst muss auf dem Punkt sein.

• Der Vorsprung zum UI-Design

Entwickler haben sich auf Bibliotheken wie GreenSock und Snap.svg verlassen, um das schwere Anheben bei der Wiedergabe von Animationen durch JavaScript durchzuführen. Während diese Werkzeuge viel Flexibilität erhalten haben, können sie nicht mit der Präzision und der Feindseligkeit der Animation vergleichen, die mit verwendet werden kann After Effects CC. Eigene Timeline und Erleichterungsdiagramme. Aus einer Web-Perspektive eignen sich nach Effekte sehr gut für den Optimieren und Ausprobieren einer Bewegung, bevor Sie sie an den Code begehen.

Eingeben Bodymovin Eine bahnbrechende Erweiterung für Adobe nach Effekten, die die Animation direkt aus After-Effekten exportiert, um in dem Browser in JavaScript zu zeigen und zu manipulieren. Erstellt von Hernan Torrisi. BodyMovin beseitigt viele Barrieren zwischen Animator und Entwickler. Auf seiner Basisstufe fungiert das Plugin als magisches 'Render für Web' Feature Adobe vergessen. Am fortschrittlichsten eröffnet es neue Möglichkeiten für interaktive Animationen.

BodyMovin ist ein Link in der Kette von Werkzeugen, Plugins und Systemen, die einigen dieser neuen Möglichkeiten erfüllen. Airbnbs Lottie. und Facebooks Keyframes. Beide erstellen auf diesen Fundamenten - und sie bringen endlich das leistungsstärkste Animationswerkzeug in das Web.

Warum BodyMovin verwenden?

SVG hat das Internet übernommen und damit die Erwartung mitgebracht, dass alles hochwertig, leicht und skalierbar sein sollte. Bodymovin macht alles in Ihrer Komposition, um wunderschön knusprig, svg, der seine Vektorqualität auf jeder Größe hält. Nicht mehr Kompromisse, um das GIF aufzuhellen oder Ihre Benutzer zu zwingen, aufgeblähte Videodateien zu laden.

Das BodyMovin eröffnet den Entwicklern, um den Exportieren Ihrer Animationen zu vereinfachen und mit neuen interaktiven Erfahrungen kreativ zu machen. Überprüfen Sie den Codepen für einige der fantastischen Möglichkeiten, wie die Erweiterung verwendet wurde - von interaktiven IK-Rigs zum interaktiven Text von Animate-as-you-Typ.

Um Ihren Web Dev-Prozess weiter zu vereinfachen, probieren Sie a Webseitenersteller .

Die exportierte Animation kann im Browser wie jedes andere Element manipuliert werden, mit dem wir an Animation als interaktives und experimentelles Werkzeug innerhalb des Webdesigns denken können. Und jetzt wegen des BodyMovin war es noch nie einfacher, Ihre Animationen in das Web zu bringen. In diesem Tutorial erfahren Sie, wie Sie eine Animation von After Effects exportieren und eine einfache Schleifenanimation erstellen, die auf den Klick des Benutzers antwortet.

So bereiten Sie Ihre After Effects-Dateien vor

Die Unterstützung für After Effects-Funktionen hat sich stark verbessert, und Sie können erwarten, dass Sie ziemlich gute Ergebnisse erzielen können. Das heißt, Ihre fantastischen Fliegen 3D-Schichten spielen nicht nett, also seien Sie sich der Grenzwerte bewusst, bevor Sie losfahren. Bevor Sie ein Projekt beginnen, laden Sie immer die neueste Version von BodyMovin herunter und überprüfen Sie die Github-Seite, um zu sehen, welche Funktionen derzeit unterstützt werden.

Sei nicht zu eilig, um auf den lustigen Teil zu ziehen ... ordentliche Dateien machen einen ordentlichen Geist. In diesem Fall helfen sie auch, einige der zusätzlichen Arbeiten vom Browser wegzunehmen, und geben Ihnen seidige reibungslose Wiedergabe. Erstens möchten Sie sicherstellen, dass sich Ihre Inhalte in After Effects-Form-Schichten für eine vollständige Vektorleistung befinden. Um jede Illustrator-Datei in Form von Ebenen zu konvertieren, können Sie einfach mit der rechten Maustaste klicken und auswählen Wählen Sie Formen aus der Vektorschicht erstellen. Jede Schicht, die in dieser Phase nicht geformt sind, werden dann in Bilder umgewandelt und sie werden nicht als Vektoren geleistet.

Als nächstes haben Sie eine Überprüfung Ihrer Schichten und Unterschichten. Es gibt eine gute Chance, dass Sie den Inhalt der Form vereinfachen können, ohne etwas zu opfern. Versuchen Sie, die Anzahl der Gruppen, Wege zu reduzieren, und füllt nur das nackte Wesentliche.

Kümmere dich um Masken

Masken sind eine einfache Möglichkeit, in dieser Phase aufrutschen. Seien Sie sich bewusst, dass Alpha-Masken mit dem SVG-Renderer zusammenarbeiten, aber nicht angezeigt werden, wenn Sie sich entscheiden, auf Leinwand wechseln. Masken können in der Leistung teuer sein, also verwenden Sie sie effizient.

Rendering

BodyMovin arbeitet in zwei Teilen - eine After Effects-Erweiterung, die Animationsdaten in eine JSON-Datei und einen BodyMovin.js-Player umwandelt, um in Ihre Webseite aufzunehmen, die diese Datei interpretieren und in dem Browser rendern kann.

Denken Sie, Ihre Dateien sind gut zu gehen? Öffnen Sie die BodyMovin-Erweiterung durch Window & GT; Erweiterungen und dann Bodymovin.

Sobald Sie aktualisiert haben, sehen Sie eine Liste aller Kompositionen in diesem After Effects-Projekt. Wählen Sie Ihren ausgewählten Comp aus und wählen Sie einen Zielordner in Ihrem Webprojekt aus. Wenn Sie glücklich sind, klicken Sie einfach auf Rendern und beobachten Sie die Magie. Wenn es fertig ist, erhalten Sie eine "fertige" Nachricht. Herzliche Glückwünsche! Sie haben gerade eine JSON-Datei mit allen Informationen exportiert, die der Spieler die Animation neu erstellen muss.

Um Ihre neu exportierte Animation zu testen, klicken Sie auf Vorschau und GT; Current renders und denken Sie daran, die Timeline zu scheuern, da Sie möglicherweise etwas finden, das etwas anders aussieht, was Sie erwarten würden. Wenn Sie Probleme erkennen, springen Sie zurück und überprüfen Sie Ihre Ebenen - es könnte ein nicht unterstütztes Merkmal oder ein Ausdruck sein, der in After Effects verwendet wird.

Einige After Effects-Plugins wie Rubber unterstützen jetzt BodyMovin. Rubberhose nutzt Führungsschichten und versteckte Schichten. Klicken Sie zum Aktivieren, um diese zu aktivieren, einfach auf das Einstellungs-CG neben Ihrer gewählten Komposition klicken und die erforderlichen Funktionen ankreuzen.

Wenn alles gut aussieht, gibt es nur noch nie mehr, was Sie tun müssen, bevor Sie nach Effekten zurücklassen. In dieser Phase sollten Sie eine frische Data.json-Datei haben, die Ihre Animation beschreibt, jedoch keinen BodyMovin-Player, um es zu interpretieren. Klicken Sie in der Erweiterung auf die Schaltfläche "Die Player" oben rechts abrufen "oben rechts und speichern Sie sie mit Ihrer JSON-Datei.

Laden Sie die Animation

Jetzt haben Sie alles, was Sie brauchen, lassen Sie uns direkt in den Code springen und legen Sie die Grundlagen auf, um Ihre Animation auf der Seite anzuzeigen.

Machen Sie zuerst einen neuen Container #anim_container. um Ihre Animation zu halten. Sie müssen auch die bodymovin.js. Datei vor dem Schließkörper-Tag. Nehmen Sie an der nächsten Bodymovin alles an Ihrer Animation und laden Sie es in den neuen Container.

Lassen Sie uns Schritt für Schritt durch den Setup gehen:

 VAR-Container = document.getelementbyId ('anim_container');
// Richten Sie unsere Animation ein

var animdata = {
Container: Container,
Renderer: 'svg',
autoplay: wahr,
Schleife: wahr,
Pfad: 'data.json'
};
var anim = bodymovin.loadanimation (animdata); 

Sie müssen alle Parameter für die Animation definieren. Sagen Sie BodyMovin den Container, den Sie möchten, dass die Animation eingeladen werden soll, und teilen Sie ihm darauf hinzu, dass Sie die Animation als SVG-Elemente rendern. Nehmen Sie anschließend die Animation an, um zu spielen, sobald es geladen ist, und Sie möchten, dass sie auf den Start zurückkehren möchten, wenn es fertig ist.

Die Eigenschaftspfade erzählt dem BodyMovin-Player, in dem die JSON-Datendatei für die Animation gefunden wird. Aufgrund der Cross-Origin-Ressourcenfreigabepolitik (CORS), die Technik, die Sie für den Zugriff auf die JSON-Datei verwenden, funktioniert nur, wenn Sie sich auf einem Server oder auf einem lokalen Server befinden. Um lokal zu arbeiten, können Sie diese Data.JSON in eine JavaScript-Datei erstellen, die dem Objekt einer Variablen zugewiesen wird. In diesem Fall könnte Ihr Setup so aussehen:

& lt; script src = "js / data.js" & gt; & lt; / script & gt;
& lt; script & gt;
VAR-Container = document.getelementbyId ('anim_container');
// Richten Sie unsere Animation ein
var animdata = {
Container: Container,
Renderer: 'svg',
autoplay: wahr,
Schleife: wahr,
AnimationData: Daten.
};
var anim = bodymovin.loadanimation (animdata);
& lt; / script & gt; 

Aktualisieren Sie die Seite und Ihre Animation sollte im Container spielen. Wählen Sie mit Ihren Dev-Tools aus und Sie werden sehen, dass jetzt jedes Element in der Animation jetzt in enthalten ist & lt; g & gt; Tags und wird in Echtzeit umgewandelt.

Sieht unglaublich aus, oder? Sie sollten jetzt eine schöne, knackige Animation in dem Browser haben (ohne ein elendes Video-Tag in Sichtweite ...). Die Animation wird immer skaliert, um ihren Behälter anzupassen, also gehen Sie weiter und blasen Sie ihn an!

BodyMovin hat eine Reihe leistungsstarker Methoden zur Steuerung der Animation, nachdem sie geladen ist. Anruf einer Methode wie anim.pause () oder anim.setdirection () Sie können die Wiedergabe auf verschiedene Arten manipulieren. Schauen wir uns einige Beispiele an:

• Anim.SetDirection (-1) spielt die Animation in der Rückseite
• anim.pause () und anim.play () beginnt und stoppt die Animation
• Anim.SetSeed (0.5) Wird die Animation um halbe Geschwindigkeit spielen

Interaktion hinzufügen

In diesem nächsten Schritt werden Sie einige der verschiedenen Möglichkeiten untersuchen, die Interaktion mit Ihren Animationen durch JavaScript hinzufügen. In diesem Beispiel exportieren wir eine After Effects-Animation mit zwei Abschnitten: Abschnitt A und Abschnitt B. Abschnitt A verwendete Rahmen von eins bis 20 (Dreieck hält seinen Pogo-Stick) Abschnitt B verwendet Frames von 20 bis 40 (Dreieck springt auf und ab auf einem Pogo-Stick).

Jetzt möchten Sie Abschnitt A auf einer Schleife abspielen (erst nach dem Benutzer klicken) Wiedergabe- und Schleifenabschnitt B. Sie können die Playsegment-Eigenschaft verwenden, um Animationen auf diese Weise aufzuteilen. Diese Methode dauert zwei Argumente - ein Array mit Start- und Endwerte und einem zweiten Boolean - ISFrame. Wenn Sie diese auf TRUE einstellen, informieren Sie die Animation, um die Start- und Endwerte als Frames zu lesen, während FALSE ermittelt, dass diese Werte mit der Zeit gelesen werden.

 anim.pause ();
Anim.PlaySegments ([0,20], wahr); 

Hinzufügen dieser Tätigkeiten, dass BodyMovin am ersten Frame angehalten wird und nur die Animation von 0 bis 20 Frames spielt. Wie Sie Ihre Animation mit einem einrichten Schleife: true. Eigenschaft Hier wird der Abschnitt ACT immer wieder abspielen.

Lassen Sie uns das gesamte Beispiel einrichten. Sie verwenden zwei Segmente einer Animation für dieses Beispiel, sodass Sie zwei Funktionen erstellen:

 VAR-Container = document.getelementbyId ('anim_container');
// Richten Sie unsere Animation ein
var animdata = {
Container: Container,
Renderer: 'svg',
autoplay: false,
Schleife: wahr,
Pfad: 'data.json'
};
var anim = bodymovin.loadanimation (animdata);
// Wenn die Animation geladen ist, führen Sie unsere FirstLoop-Funktion aus
anim.addeventListener ('domlobed', erstklassig);
// Erstellen Sie unsere Wiedergabefunktionen
Funktion erstklassig () {
Anim.PlaySegments ([0,20], wahr);
};
Funktion secondloop () {
Anim.PlaySegments ([20,40], wahr);
};
// Anhören für ein Klickereignis
container.addeventListener ('click', Funktion (Ereignis) {
anim.addeventListener ('LoopComplete', secondloop);
}); 

Weg zu gehen! Jetzt wird Ihre Animation wiederholt, bis der Benutzer auf ihn klickt, dann startet die zweite Schleife. Das einzige Problem ist jetzt, dass ein solcher Sprung sehr abrupt ist und die Glätte der Animation ruinieren kann.

Eine ideale Situation besteht darin, einen dritten Abschnitt in die Animation aufzunehmen, der sich übergibt, den Pogo-Stick zu halten, um darauf zu springen. Jetzt wird Ihre Struktur so etwas aussehen:

• ersterloop - Rahmen 0 bis 20
• Überleitung - Rahmen 20 bis 30
• secondloop - Rahmen 30 bis 50

Wir möchten, dass Ihre Animation in der ersten Schleife bleibt, bis sie geklickt wurde. An diesem Punkt möchten Sie auf das Ende der Schleife warten, in der Sie sich gerade befinden und auf den Übergang wechseln. Nachdem der Übergang erfolgt, wechseln Sie in Ihre zweite Schleife. Das klingt kompliziert, aber bleib bei mir! Hier ist Ihr Code vollständig:

VAR-Container = document.getelementbyId ('anim_container');
// Richten Sie unsere Animation ein
var animdata = {
Container: Container,
Renderer: 'svg',
autoplay: false,
Schleife: wahr,
Pfad: 'data.json'
};
var anim = bodymovin.loadanimation (animdata);
// Wenn die Animation geladen ist, führen Sie unsere FirstLoop-Funktion aus
anim.addeventListener ('domlobed', erstklassig);
// Erstellen Sie unsere Wiedergabefunktionen
Funktion erstklassig () {
Anim.PlaySegments ([0,20], wahr);
};
Funktionsübergang () {
Anim.PlaySegments ([20,30], wahr);
anim.removeeventlistener ('LoopComplete');
anim.addeventListener ('LoopComplete', secondloop);
};
Funktion secondloop () {
Anim.PlaySegments ([30.100], wahr);
anim.removeeventlistener ('LoopComplete');
};
// Anhören für ein Klickereignis
container.addeventListener ('click', Funktion (Ereignis) {
anim.addeventListener ('LoopComplete', Übergang);
}); 

Klicken Sie auf Klick, Sie verwenden a LoopComplete. Hörer wartet, bis Sie den letzten Rahmen der Schleife erreichen, dann führen Sie Ihre Überleitung() Funktion. Hier entfernen Sie den letzten Hörer, spielen Sie den nächsten Satz von Frames und tun Sie das gleiche wieder. Nachdem der Übergang beendet ist, ruft er an secondloop () .

Das ist es!

Sie haben heute mit ein paar der Funktionen von Bodymovin gearbeitet, aber wenn Sie daran interessiert sind, mehr über das Plugin zu erfahren, können Sie eine Ladung von Informationen finden Bodymovin Github. Seite. Weitere Beispiele finden Sie in der ewig beeindruckenden BodyMovin Codepen-Kollektion.

Hoffentlich hat dieses Tutorial Ihnen eine Vorstellung von den verschiedenen Arten von Möglichkeiten gegeben, die Sie die Verwendung von After Effects und Bodymovin kombinieren können, um eine Supercool-Animation für das Web herzustellen!

Sie können jetzt animierende Animationen einrichten, die für das Web exportiert werden sollen, Ihre exportierten Dateien in den Browser mitbringen und Ihre Animation ansprechen, klicken Sie auf. Denken Sie über die MP4-Dateien über, die Sie zuvor mit BodyMovin verwenden, um in der Zukunft viel reichere Weberlebnisse zu erstellen.

In der Lage zu sein, Animatoren eng in den Entwicklungsprozess einzugehen, wird immer wichtiger, und das Feld der Webanimation bewegt sich unglaublich schnell. Mit einer ständig wachsenden Sammlung neuer Erweiterungen, Plugins und Frameworks, Animatoren und Entwickler können dieser Prozess erwarten, dass dieser Prozess im Laufe der Zeit einfacher und besser wird. Ich kann es kaum erwarten, zu sehen, was die Zukunft hält.

Erhalten Sie viele Dateien, um sich zu unterstützen? Schauen Sie sich unsere an Cloud-Speicherung. Picks

Dieser Artikel erschien ursprünglich in Netzmagazin. 2017. Abonnieren Sie hier .

Weiterlesen:

• Erstellen und animieren Sie SVG-Polygone
• 14 Erstaunliche Adobe After Effects-Plugins.
• Erstellen Sie Storyboards für Web-Animationen