Erweiterte Anleitung zum Erstellen von UI-Animationen | Lottiefiles

1. Einführung: Hallo, alle zusammen. Ich bin Bold Bt und willkommen im Advanced UI Guide zum Erstellen von UI-Animationen. Ich hoffe, dass Sie in diesem Kurs viele neue Dinge lernen werden. Und in diesem Kurs werden wir uns grundsätzlich mit mehreren neuen Aspekten befassen. Dies ist der Lotti-Kurs für Fortgeschrittene, genau dort weitermacht, wo der Fortgeschrittenenkurs aufhört dort weitermacht, wo der Fortgeschrittenenkurs aufhört Darin arbeitest du mit komplexen Plug-ins, lernst, wie du Export- und Renderfehler behebst , die Produktionsdateien tatsächlich beschädigen , und Masken szenenübergreifend sauber animieren Und ein Teil meines Werdegangs ist, dass ich mehrere Lotti Animations-Projekte erstellt habe. Abgesehen in meinem Latifis-Profil live sind und habe ich mehr als 100 Animationen erstellt, die die Sie sich ansehen Ich bin auch zertifizierter Latifitore Animative Winner Creator sowie Experte für Webflow, Framer Aftereffects, Framer Aftereffects, Latifitore Animative Winner Creator sowie Experte für Webflow, Framer Aftereffects, Figma und auch Latiflls Creator. freue mich darauf, gemeinsam etwas Fantastisches zu schaffen , und ich werde Ihnen einige wirklich hervorragende Arbeiten zeigen, die Ich freue mich darauf, gemeinsam etwas Fantastisches zu schaffen, und ich werde Ihnen einige wirklich hervorragende Arbeiten zeigen, die ich auch für Kunden geleistet habe. Dieser Kurs richtet sich an Animatoren, die bereits Grundlagen von Lotti Files vertraut sind oder den Fortgeschrittenenkurs abgeschlossen haben und in die Arbeit auf kundenfertiger Produktionsebene übergehen möchten in die Arbeit auf kundenfertiger Produktionsebene übergehen Ich wünsche Ihnen allen viel Glück und lassen Sie uns anfangen. 2. 01.Komplexe Plugins: Hey, willkommen zurück. Okay, also willkommen zur ersten Klasse dieses Kurses. Okay, also in diesem Kurs werden wir uns ansehen, welche Plug-ins wir in diesem Kurs verwenden werden . Und genau wie im vorherigen Kurs sollen diese Ihnen nur helfen, Zeit zu sparen. Sie können den gesamten Kurs abschließen ohne etwas davon zu kaufen. Okay, lass uns jetzt eintauchen. Okay, das erste Plug-In, das wir verwenden werden , ist GifGun Two Eines wird AEUX sein. Okay. Du musst auf diesen GitHub-Link klicken, darauf klicken oder du kannst einfach auf diesen klicken und einen herunterladen. Okay. Und von Anfang an können Sie sich einfach dieses Video ansehen und lernen, was es tut. Okay, aber das werden wir in der zukünftigen Klasse lernen . Also lass uns das einfach überspringen. Ähm, du kannst es einfach herunterladen. Okay. Und danach ist der Prozess zur Installation hier, okay? Dieses Plugin ist im Grunde für zwei Programme, okay. Und eine davon ist eine Skizze und die andere ist After Effects. Und der dritte ist Figma. Okay. Und wir werden eine Verbindung zwischen Figma und After Effects herstellen. Warum machen wir das? Es gibt einige Probleme , auf die Sie bei der Arbeit in Illustrator stoßen könnten bei der Arbeit in , oder vielleicht können Sie sich Illustrator nicht leisten, sagen wir einfach, und Sie haben nur Zugriff auf After Effects, dann können Sie stattdessen einfach Figma verwenden Okay, und auch dieses Plugin ist kostenlos. Sie müssen dies verwenden, um Ihren Arbeitsablauf zu beschleunigen und einige Fehler zu vermeiden , auf die wir noch eingehen werden. Okay, weitermachen, und bevor ich weitermache, schauen Sie sich bitte dieses Tutorial an, und Sie müssen nur daran denken, dass Sie sicherstellen, dass Sie dieses Plugin sowohl in After Effects als auch in FicMA installieren sowohl in After Effects als auch in FicMA , damit es einwandfrei funktioniert denn dann wird es eine Brücke zwischen zwei Softwares schaffen , und dann können wir Dateien importieren. Okay, mach weiter, nachdem du das mit dieser Methode installiert hast, und dann kannst du einfach weitermachen und auch dieses kaufen. Das wird leicht zu kopieren sein, und das wird Ihnen auch sehr helfen. Das ist wirklich billig, und es wird dir eine Menge Zeit sparen, und es ist nicht nur gut für viele Animationen. Es wird Ihnen bei jedem After Effects-Projekt helfen. Das garantiere ich dir. Okay. Und ein weiteres Plug-In, das wir verwenden werden, wird ein Plugin in Figma sein, nämlich Get Waves Wenn du das ausprobieren willst, musst du nur Wave in den Plugin-Bereich eingeben und schon bekommst du es, um Waves zu bekommen Okay. Und Sie können das einfach verwenden, um Wellenanimationen zu erstellen. Und wie kommen wir ins Detail? Darauf werden wir auch in der kommenden Klasse sehr bald näher eingehen . Okay, also wir werden dieses Plugin verwenden. Laden Sie dieses Plugin einfach auf Ihren PC herunter und schon können wir loslegen. Ich danke dir vielmals. 3. 02.Fehlerbehebung: Okay, wir sind also wieder da. Kommen wir zu den After Effects und fangen wir einfach an zu arbeiten. Okay. In diesem Kurs werden wir also über die grundlegenden Probleme sprechen , nämlich die Überlastung des Steckers. Okay? Und es war ein Pay-Plug-In, wie Sie vielleicht wissen. Es waren also 55$, richtig. Und es kann manchmal zu Problemen führen. Lassen Sie uns einfach weitermachen und lassen Sie mich Ihnen zeigen welche Art von Problemen dies verursachen kann. Okay, wir sind also bei After Effects drin. Lassen Sie uns jetzt einfach unser Design überprüfen. Okay. Und lass es uns einfach in Illustrator öffnen Okay. Also das ist eine SVG-Datei, die mir vom Kunden zur Verfügung gestellt wurde, okay? Und sie brauchten das animiert. Lassen Sie uns jetzt einfach das auswählen und das in After Effects übernehmen, aber lassen Sie uns einfach die Größe 1920 mal 1920 überprüfen. Lass uns einfach eine neue Komposition machen und sie 1920 machen. Okay? Und lassen Sie uns diese Ebenen einfach in After Effects übernehmen. Okay. Also, wenn du merkst, dass es ein kleines Problem gibt, okay? Wie Sie sehen können, stimmt der Ebenenverlauf hier nicht mit dem Farbverlauf überein, oder? Der Farbverlauf ist hier unten, und dieser Farbverlauf ist auch nicht richtig. Dieser hat grüne Haare, aber tatsächlich hat er sie hier. Der berühmte uTuber Austin Bowens von Ray V Studio behebt dieses Problem also tatsächlich indem Sie nur den Farbverlauf in After Effects bearbeiten müssen , und das wird das Problem beheben Offensichtlich können wir das tun. Aber was wäre, wenn es das Logo eines Kunden wäre, richtig, und Sie eine perfekte Animation seines Logos liefern sollten ? Was ist, wenn Sie den Farbverlauf falsch bearbeiten und wenn nur eine etwas schlechte Version ihres Logos erstellt haben, indem Sie einfach den Farbverlauf durcheinander gebracht haben Das ist also nicht wirklich ratsam, oder? Wir sollten also nicht mit den Farbthemen und Farbverläufen der Kunden herumspielen , In diesem Fall sollten wir also einen Weg finden, diese genau so zu animieren, wie Eine andere Möglichkeit, die Ihnen in den Sinn kommen könnte, ist, dass wir vielleicht stattdessen die Illustrator-Datei verwenden können Lass uns einfach weitermachen und auf Speichern unter klicken. Kommen wir einfach zurück und kopieren diesen Pfad und fügen ihn einfach hier ein, und wir nennen das, wir konvertieren das in eine AI-Illustrator-Datei und klicken wir einfach auf Speichern Okay. Lass uns einfach zuschlagen. Okay. Und jetzt lass uns einfach weitermachen und versuchen, diese Animation wieder in die Datei zu bringen. Gib mir einfach eine Minute. Ich denke, es ist nicht am richtigen Ort gespeichert. Ähm, ja, es gab einen Fehler. Okay, wir machen daraus ein Logo, einen Ring. Okay. Okay, die Datei ist also gespeichert. Lassen Sie uns das jetzt einfach schließen und das auch minimieren. Lass uns stattdessen einfach das benutzen. Lass uns einfach in After Effects weitermachen und versuchen, das zu nutzen. Ob wir das Ebenensystem oder die Footageebene verwenden , spielt eigentlich keine Rolle, denn wenn wir es hierher ziehen, muss es, wie Sie sehen, in eine Formebene umgewandelt werden , damit es funktioniert. Ähm, damit es in eine Lottie-Datei passt. Wenn Sie die Ebenen jedoch konvertieren, wird sie grau da Farbverläufe nicht mithilfe von Adobe After Effects-Ebenen und deren Konvertierung in After Effect-Ebenen konvertiert werden mithilfe von Adobe After Effects-Ebenen und deren Konvertierung in After Effect-Ebenen und deren Konvertierung in After Effect-Ebenen Der Farbverlauf wird dadurch nicht erzeugt. Es wird nur die Feldfarbe angewendet. Das ist es. Es gelten nur die Farben für flache Felder. Der Farbverlauf wird nicht angewendet. Also, was machen wir jetzt? Nun, zum Glück gibt es eine Lösung, und das werden wir jetzt herausfinden. Okay, lass uns einfach Figma öffnen, okay? Und was wir jetzt tun werden, ist, dass wir dieses SVG hierher ziehen werden dieses SVG hierher ziehen Und wenn Ihr Design noch nicht in SVG ist, können Sie einfach Ihre von Ihrem Kunden bereitgestellte AI-Datei öffnen und sie einfach speichern, speichern unter, und sie einfach in eine SVG-Datei konvertieren und einfach auf Nummer sicher gehen. Das ist es. Und ich behalte es einfach 1.1-Version und es funktioniert perfekt. Aber wenn es in einigen Fällen nicht perfekt funktioniert, können Sie diese Einstellungen natürlich anpassen und versuchen, es auch herauszufinden. Okay. Jetzt haben wir also das SVG. Also nehmen wir es einfach mit in die Figma, richtig? Es ist hier. Und wie Sie sehen können, sind die Farbverläufe genau so, wie sie sein sollten, richtig Also werde ich es einfach ein bisschen verkleinern. Danach klicke ich einfach mit der rechten Maustaste und gehe einfach in die Plugins und dann in den Entwicklungsbereich und dann auf AeuxPlugin-Plugins Und das wird auftauchen. Okay. Und dann wähle ich einfach diese Ebenen aus. Es ist wichtig, dass sich die Ebenen innerhalb eines Rahmens befinden. Wenn es keinen Rahmen gibt, dann erstelle bitte einen und klicke dann einfach auf diesen Button. Okay, es heißt drei Schichten und zwei. Okay, also lass uns jetzt einfach zu AE gehen. Okay. Wie Sie sehen können, die Farbverläufe jetzt perfekt und es gibt einige Dinge, die Sie beachten sollten, die wirklich wichtig sind, weil sie Ihren Verstand durcheinander bringen könnten Es werden auch einige zusätzliche Ebenen importiert wenn Sie Assets aus FIGMA importieren Nun, warum passiert das? Ich weiß es nicht wirklich, aber ich weiß wirklich, dass es sich um Hilfsebenen handelt, also müssen Sie sie nur auswählen und einfach löschen, und es wird Ihrer Datei nichts, keinen Schaden zufügen. Okay. Und dann ist da noch diese leere Ebene. Sie können diese auch löschen. Jetzt gibt es also nur noch zwei Schichten, okay? Und jetzt ist unser Farbverlauf perfekt. Jetzt ist das wirklich unglaublich. Und jetzt ist es wirklich erstaunlich, dass dieses kostenlose Plugin besser funktioniert als ein kostenpflichtiges Plugin, das 55$ kostet Aber offensichtlich hat die Verwendung von Overload Vorteile, da es tatsächlich so viel mehr bietet und Sie in After Effects und Illustrator hin und her arbeiten können in After Effects und Illustrator hin und her Und es ist auch viel wichtiger zu wissen, dass Lister eine Designsoftware ist, eigentlich keine UI-Designsoftware Es bietet also so viel mehr Tools, und Sie können in Lister tatsächlich viel freier gestalten Lister tatsächlich viel freier gestalten Aber am Ende, wenn Sie sich das nicht leisten können, können Sie Ihre Assets am Ende einfach in SVG konvertieren und sie dann einfach in Pigma übernehmen und sie dann einfach wie folgt in Ailiers konvertieren Okay, du musst das im Hinterkopf behalten, dass es einige Blendungen geben wird Eine weitere Sache, die wirklich wichtig ist und die Sie beachten müssen, ist, dass die Größe des Rahmens tatsächlich der Größe des Kommas entspricht. Und wenn ein Kunde Ihnen ein Design schickt und wenn ein Design zu viele Frames enthält, After Effects eigentlich wird After Effects eigentlich jeden Frame in eine Pre-Comp umwandeln Wie Sie sagten, es gab mehr Frames, richtig. Hier gab es noch einen Rahmen. Lass uns das einfach versuchen, vielleicht funktioniert es oder vielleicht auch nicht. Also lass mich einfach weitermachen und das versuchen. Ich klicke einfach auf die Santo-Auswahl. Dann, wie Sie sehen können, wurde dieser Rahmen erstellt, und dann ist da noch dieser Rahmen. Und dann, wie Sie sehen können, habe ich einen weiteren Rahmen erstellt, oder? Es gibt auch diesen Rahmen. Okay? Also die Schichten sind da drin. Also die Anzahl der Frames , die im Design sind, wird es nach dem Effekt Frames und Frames und Frames innerhalb von Frames geben. Nun, es könnte ziemlich chaotisch werden, wenn Sie an einem UI-Design von AP arbeiten vielleicht weil es so viele Frames geben wird, richtig Was Sie also in diesen Situationen tun werden , ist, dass Sie einfach die Frames auswählen und dann einfach auf die Elemente aus diesen Frames reagieren , okay? Und dann können Sie die Ebenen einfach löschen. Und wenn der Designer tatsächlich Autoayout verwendet hat, oder? Wenn Sie also die Elemente aus dem Rahmen entfernen, bewegen sie sich hin und her. Dann müssen Sie das automatische Layout eigentlich einfach ausschalten . Oder eine andere Sache, die Sie tun können, ist, dass Sie einfach all diese Elemente übernehmen können, okay, in After Effects, sagen wir einfach, lassen Sie uns einfach noch einmal schreiben. Wählen wir es einfach aus und machen es noch einmal. Okay? Die Schichten sind jetzt gesendet. Okay. Jetzt können Sie einfach den Computer öffnen, okay Okay, die Ebenen befinden sich also nicht innerhalb des Rahmens, wie Sie sehen können. Sie wurden also nicht exportiert. Lass es uns einfach noch einmal machen. Lass uns zuerst all diese löschen. Okay. Und lass uns einfach einen Neuanfang machen. Lass uns hier klicken. Okay, vier Schichten werden hierher geschickt, okay. Es gibt eine Rahmenkomposition, und dann gibt es eine Rahmenkomposition und dann gibt es innere Ebenen, richtig? Sie können also einfach weitermachen und die Hilfsebenen löschen , und dann können Sie diese Komposition verwenden, also Strg C, und dann einfach all diese schließen und dann einfach eine neue Komposition erstellen und sie dann einfach dort Okay? Und es wird perfekt funktionieren. Sie können diese Methode verwenden, um zusätzliche Frames und zusätzliche Ebenen sowie ATC zu vermeiden zusätzliche Frames und zusätzliche Ebenen sowie ATC Okay. Also, wir haben dieses Plug-In tatsächlich verstanden Also, was macht es eigentlich, oder? Gehen wir also einfach zum nächsten Plug-In über, diesem, der Ease-Copy, richtig. Und was dieses Plugin macht, ist das, lass uns weitermachen und ich werde die Animation jetzt öffnen. Okay, nun, klicken Sie einfach auf Nicht speichern. Okay, was wir jetzt tun werden, ist, dass ich Ihnen ein paar Beispiele für Projekte zeige . Okay. Also schauen wir uns die mal an. Okay, das sind also einige Animationen , die ich für unseren Kunden gemacht habe. Okay. Und wie Sie sehen können, gibt es mehrere Animationen, okay, oder? Und wir haben die Teile hier drinnen tatsächlich animiert. Okay, wie Sie sehen können, sehen die Zähne nicht gut aus und dann werden sie repariert. Wenn wir die Ebene alleine machen, kannst du sie besser sehen. Lass uns das einfach alleine sehen, oder? Und dann wird das Cover drüber gelegt und der Effekt ist tatsächlich abgeschlossen. Als ob diese Kieferüberlappung das verdeckt und fixiert. Okay. Und lassen Sie uns einfach weitermachen, wie Sie sehen können. Okay, nehmen wir einfach , dass ich dem Kunden eine Animation geschickt habe und er hat alles daran geliebt, oder? Und der Kunde möchte, dass ich bei all diesen Symbolen genau dieselbe Lockerung, dieselbe Art von Gefühl verwende dieselbe Lockerung, dieselbe Art von Gefühl , richtig, oder Und was werde ich gegen das Richtige tun? Wir müssen dabei etwas im Hinterkopf behalten, dass wir die Lockerung anpassen, richtig? Wir können also einfach sagen , dass dies das Symbol war, das ich für den Kunden gemacht habe Ähm, okay? Das war das Icon, das ich für den Kunden gemacht habe. Und dieser Moment ist perfekt. Er sagt, dass er es liebt, oder? Also möchte ich die Lockerung anpassen. Gehen wir einfach davon aus, dass es sich um eine solche benutzerdefinierte Lockerung handelt. Okay. Ich möchte alle anderen animieren und die Lockerung davon kopieren Okay? Nicht die Positionswerte, sondern nur die Lockerung. Also, wie machen wir das? Das können wir mit den nativen Funktionen in After Effects nicht machen. Also verwenden wir Plugins für solche Dinge. Also, was wir jetzt tun werden , ist, auf die Schaltfläche Kopieren zu klicken, und dann gibt es zwei Optionen im Einfügebereich. Okay, wir werden auf diese Ebene klicken und dann werde ich dieser Ebene folgen. Dann, wie Sie sehen können, habe ich das schon benutzt , ich glaube, ich werde diese beiden auswählen und dann auf Es klicken. Okay? Also dieses Projekt dauert eigentlich drei Jahre. Ich habe dieses Projekt vor drei Jahren gemacht, also habe ich damals vielleicht keine schlechten Plugins verwendet. Also ja, jetzt ist es wirklich gut meine Arbeit zu überprüfen und sehen, wie viel ich verbessert habe. Und wie Sie sehen können, wird das jetzt auf allen Symbolen auf ihrer Website besser und einheitlicher aussehen , oder? Der Kunde wird also höchstwahrscheinlich glücklicher sein. Okay, wir können diese Lockerung also auch anpassen, oder? Und spiel das einfach noch mal ab. C, richtig? Also dieses Plugin ist in dieser Hinsicht wirklich hilfreich. Und die andere Sache , die Sie tun können , ist , dass Sie die Kopien auch bewerten können. Sagen wir einfach, wir wollten eine weitere Ebene dahinter haben. Lass uns diesen einfach duplizieren. Okay. Und auf diesem gab es keine Keyframes Und das war eine weitere Ebene, und sie hatte einige Probleme, sagen wir einfach, okay? Es hatte also einen Hohlraum in sich. Okay, lassen Sie uns auch den Maßstab verkleinern, vielleicht schaffen wir es hier. Okay. Und passe einfach auch den Pfad an, weil es ein Hohlraum ist. Also lasst uns einfach den Pfad ruinieren. Okay. Mein Fehler. Ich repariere es einfach jetzt. Okay, richtig? Es gibt also zwei Möglichkeiten. Tatsächlich können wir die Ebene genauso gut überordnen, wie wir es im vorherigen Kurs gelernt haben. Aber sagen wir einfach , aus irgendeinem Grund oder vielleicht möchte ich der Animation tatsächlich etwas Offset hinzufügen . Deshalb möchte ich nicht, dass die Ebene auch übergeordnet ist. Ich denke also , dass es vielleicht einen gewissen Offset geben sollte. Sie können also einfach diese Ebene auswählen. Kopieren. Es hat tatsächlich sowohl die Beschleunigung als auch den Wert kopiert, aber es fügt das ein, was wir ihm zum Einfügen sagen Okay? Also, was ich jetzt tun werde, ist P auf meiner Tastatur zu drücken und Keyframe zu drücken und einfach auf Wert zu klicken Okay? Nun heißt es, wenn Sie mehrere Ess kopieren und einfügen, müssen Sie dieselbe Anzahl oder mehrere Frames auswählen , die kopiert werden sollen Okay. Also werde ich einfach zwei Keyframes erstellen. Okay. Und lassen Sie uns einfach diesen auswählen, auf Kopieren klicken, diese auswählen und ich werde auf Wert klicken. Siehst du, ich habe den Wert jetzt kopiert, okay? Das Altern wurde nicht kopiert. Jetzt drücke ich einfach auch Es. Jetzt wurde das Altern auch angewendet. Okay. Also jetzt möchte ich etwas hinzufügen, sagen wir einfach Offset. Also machen wir das einfach jetzt. Okay. Okay, es funktioniert also perfekt, oder? Das ist also die Hauptanwendung des Plugins. Und jetzt ist das wirklich eine sehr einfache Vermutung. Aber wie du weißt, haben wir im vorherigen Kurs eine ganze Charakteranimationsszene richtig gemacht . In Situationen, in denen mehr als 150 Ebenen animiert haben, können wir einfach eine Ebene animieren und ihre Lockerung perfektionieren und dann einfach diese Lockerung kopieren und sie überall anders platzieren sie überall anders Wir müssen einfach nicht alle 150 Ebenenenden durchgehen und sie dann auswählen und dann manuell lockern Dann werden vielleicht einige Ebenen abgewählt oder abgewählt, während wir den Vorgang durchführen Wir können also einfach Easing auf eine Ebene anwenden dann kopieren und dann einfach alle auswählen und dann einfach sie dann kopieren und dann einfach alle auswählen und dann einfach auf Ease Das ist also die Hauptanwendung dieses Plugins. Okay. Also, was wir jetzt tun werden, ist, uns ein anderes Animationsbeispiel anzusehen ein anderes Animationsbeispiel anzusehen und wir werden ein anderes Plugin verwenden. Also lass uns weitermachen und das jetzt machen. Wir werden dieses Projekt einfach schließen und ich werde einfach eine neue Komposition erstellen. Okay. Und dann mache ich es einfach 1080 mal 1080. Okay, ich nenne es einfach Bebe. Und jetzt mache ich weiter und erstelle eine Ellipse. Jetzt wird daraus ein Kreis. Okay. Ich mache einfach eine blaue Farbe draus. Ich mag diesen, oder? Ähm, eher ein lila. Okay. Wir haben es geschafft, und jetzt mache ich einfach den Strich auf Null. Und ich mache einfach weiter. Sagen wir einfach , da war ein Pfeil drin, okay. Und ich wollte, dass das animiert ist. Stimmt? Lass uns einfach ganz schnell einen Pfeil erstellen. Okay. Ich mache einfach weiter und mache das. Okay. Also, was ich machen werde, ist den Pfad zu machen, und dann werde ich es einfach rund machen , ungefähr so. Okay. Dann werde ich diesen einfach duplizieren. Ich drehe das einfach um 190 Grad. Okay. Dann werde ich einfach den Weg zu diesem öffnen. Ich werde einfach G drücken. Machen wir es einfach mittig. Zuallererst wird das besser funktionieren. Okay, so. Ich gehe ins Bad, es wird C drücken und meine Tastatur, es wird den Ankerpunkt hier treffen. Okay. Also ist unser Button jetzt erstellt. Okay. Also, was ich jetzt tun werde, ist, diese Wellenanimation zu haben. Ich möchte, dass die Schaltfläche hervorhebt, dass tatsächlich viel geladen oder heruntergeladen wurde. Also sollte da eine Wellenanimation drin sein, okay? Also bevor ich das mache, wird das eigentlich keinen Kontrast machen, oder? Ich möchte also, dass es auch einen Strich auf dem Knopf gibt. Also mach 20 draus. Und lassen Sie uns auch eine hellere Farbe daraus machen. So wie das hier. Okay. Und dann mache ich einfach weiter und mache es so länger, oder? Und dann müssen wir die innere Animation erstellen, richtig? Wir wollen zum Beispiel, dass dieser Kreis animiert wird. Okay, wir schalten einfach unser Feeling auf der oberen Ebene aus. Was Sie tun können, ist auf diese Schaltfläche hier zu klicken, und dann wird sie einfach verblassen. Ich wechsle einfach zwischen den Optionen und jetzt sind wir leer Okay. Jetzt sind wir leer auf dem Feld. Okay. Also, jetzt werde ich es einfach ausschalten, abschalten, richtig? Und wie Sie sehen können, hat es nur einen Strich, also werde ich es einfach sperren und diese auch. Jetzt müssen wir eine Wellenanimation erstellen. Was wir jetzt tun können, ist, dass wir den Wave-Warp-Effekt eigentlich nicht verwenden können Wave-Warp-Effekt eigentlich weil Late Inside nicht funktioniert, oder? Wir müssen also etwas anderes verwenden, weil wir diese Methode nicht verwenden können Es gibt noch eine weitere fortgeschrittene Technik , die ich hervorheben möchte wir verwenden können, die aber eigentlich nicht ratsam ist. Was wir tun können, ist, es zunächst zu einem Precom zu machen , damit ich es Ihnen erklären kann Lassen Sie uns Z einfach kontrollieren. Nein. Okay, lassen Sie uns einfach weitermachen und das vorab besprechen Wave Circle, nennen wir es einfach. Okay, und es wird weitermachen und es automatisch verfolgen lassen. Gehen wir zur Schicht über. Ich werde auf Auto Trace klicken. Okay, ich mache es einfach zur Alpha-Version, und du kannst auch die Einstellungen anpassen, das ist nur, um dir zu sagen, was es kann. Okay, ich mache es nur Sekunde, bevor ich es starte. Meine Software muss also nicht das Elend auf sich nehmen, dieses 1/32 zu animieren und zu korrigieren. Ich werde es einfach anwenden lassen, okay? Wie Sie sehen können, gibt es mehrere Punkte auf dem Pfad, rechts, und er ist animiert. Was ich jetzt tun kann, ist ein Rechteck zu erstellen, und ich werde es einfach so fühlen lassen , als würde es den Strich fallen lassen. Und ich werde einfach die Maske von hier kopieren. Okay, und ich werde es einfach hier einfügen. Ich werde einfach die Maske tragen. Lass uns das einfach ausschalten und ich werde es hinzufügen, richtig? Ist und ich gehe einfach in das Rechteck, eigentlich den rechteckigen Pfad, und es wird es nach unten ziehen. Okay. Also lass uns jetzt einfach spielen und sehen. Siehst du? Die Animation ist jetzt Lottie-kompatibel, weil Lottie Masken unterstützt, aber, aber, aber, aber, aber, aber, aber es gibt ein Problem Lassen Sie uns diese Liste einfach aktualisieren. Okay? Aus irgendeinem Grund ist es kein Pking Okay, also okay, ich werde einfach weitermachen und den Pfad speichern. Wir nennen es einfach Wayanimation. Vielleicht wird die Datei dadurch funktionieren. Okay. Nun, eigentlich ist das auch ein Profi-Tipp, dass, wenn deine Datei nicht gespeichert wird, das auch manchmal passiert, dass das Pudimn-Plugin nicht funktioniert Okay, du musst also sicherstellen, dass deine Datei gespeichert ist. Außerdem bringt es manchmal auch die Renderdateien durcheinander Es ist also besser, die Datei tatsächlich zu speichern. Okay. Also, jetzt mache ich einfach weiter, wähle es aus und dann gehe ich einfach hier hin. Dann kopiere ich einfach den Pfad und füge ihn hier ein. Und ich nenne es einfach V-Test. Ich werde einfach auf Rendern klicken. Okay, es ist also gerendert, und jetzt werde ich einfach weitermachen und die Path-Datei überprüfen. Wie Sie sehen können, sind es im Moment tatsächlich 2,2 KB, oder? Gehen wir einfach zu unserer After Effects-Ebene und schauen wir uns eine Vorschau an. Okay. Okay, es gab also tatsächlich einen Fehler. Ich habe tatsächlich den falschen wiedergegeben. Geh zurück und rendere die richtige Komposition. Ich mache es einfach so, wie wir es testen. Ich mache einfach weiter und ersetze es. Okay, es ist also erledigt. Lass uns jetzt einfach die Dateigröße überprüfen. Es ist 82 KB, oder? Okay, jetzt gehe ich einfach zurück zu unseren After Effects und lass uns hier eine Vorschau der Animation ansehen. Okay. Okay. Wie Sie sehen können, ist die Animation perfekt, oder? Und die Dateigröße beträgt derzeit 82 KB. Und es ist eigentlich nur 1 Sekunde lang. Und ich habe diese Methode tatsächlich mit mehreren Ebenen und mehreren Projekten getestet diese Methode tatsächlich mit , aber sie ist nicht ideal, da sie in einer idealen Situation wie dieser funktionieren könnte , in der Sie die Animation nur für 1 Sekunde animieren müssen Natürlich können Sie Klone von diesen erstellen, aber einzelne Keyframes erzeugen tatsächlich Ich kann diese Methode also nicht wirklich empfehlen. Aber wenn es keine andere Wahl gibt, können Sie sie natürlich auf jeden Fall ausprobieren, wenn Ihr Kunde mit der Methode , die wir jetzt ausprobieren werden, nicht zufrieden ist . Lassen Sie uns also weitermachen und die andere Methode anwenden, okay? Also werde ich einfach weitermachen und das nochmal duplizieren. Ich werde nur den oberen freischalten. Ich werde den Schlag einfach auf Null setzen und ihn zum Fehlschlag machen. Und ich werde es einfach auswählen. Ich werde es einfach auswählen und die Farbe kopieren. Lassen Sie uns die Datei während der Arbeit auch speichern. Und lassen Sie uns diese Datei einfach löschen. Okay. Und jetzt mache ich einfach weiter und öffne das Plug-In und klicke auf die Getaways-Plugins Jetzt werde ich einfach eine neue Welle kreieren. Okay. Sie können der Welle Abwechslung hinzufügen. Du kannst es so machen. Du kannst übrigens auch solche Gebäude bauen. Und du kannst auch solche Stacheln herstellen. Sie können diese Schaltfläche auch verwenden um das Muster zufällig zu ordnen, aber ich bleibe einfach bei Außerdem steuert dieser Button tatsächlich die Wellenlängen im Design, und dieser Button sagt dir, wo die Welle im oberen oder unteren Teil der Ebene gezeichnet werden soll die Welle im oberen oder unteren Teil der Ebene gezeichnet oder Dieses Plugin ist wirklich hilfreich bei der Erstellung von WV-Imions Erstellung von WV-Imions Auch innerhalb des Prototypings hilft Ihnen das wirklich dabei, das Prototyping wirklich einfach durchzuführen das Prototyping Ich finde, dieser fühlt sich wirklich gut an. Ich kann auch den Zufallsgenerator drücken, aber ich finde, dieser sieht gut aus Ich werde jetzt auch die Farbe ändern. Also das sieht für mich perfekt aus. Jetzt kann ich nur noch diese Ebene auswählen. Ich werde mich mit der Plugin-Entwicklung befassen. Klicken Sie auf AEX und übernehmen Sie diese Ebene in After Effects. Jetzt heißt es, dass sich die Ebene innerhalb eines Frames befinden muss. Da sich diese Ebene nun außerhalb des Rahmens befindet, wir einfach weiter und lockern den Rahmen ziehen die Ebene in den Rahmen Klicken Sie nun darauf und lassen Sie uns es in den. Okay, wie du es sehen kannst, habe ich auch den Rahmen gemacht. Lassen wir einfach den Rahmen stehen, kopieren ihn, nehmen ihn zurück in unsere Hauptzählung und hier ist er Jetzt liegt es an Ihnen , wie Sie damit arbeiten möchten. Es ist ganz Ihre kreative Freiheit. Ich mache diese Welle eigentlich nur klein, okay? Und ich werde das jetzt einfach animieren. Okay, lass uns einfach weitermachen und das animieren. Zuallererst wähle ich den IS-Pfad aus. Ich werde es einfach in den Bezier-Pfad konvertieren lassen. Okay, ich werde einfach auf Pfad klicken, ein Keyframe erstellen und es wird jetzt meinen WV-Pfad auswählen und es wird Pentool drücken und genau hier dieses Tool auswählen, das Masken auf den Formebenen Wählen Sie es aus, fügen Sie einen Punkt hinzu und drücken Sie V , um es einzufügen Und jetzt mache ich einfach weiter und wähle es aus und bringe es einfach hierher. Okay. Jetzt bearbeite ich es einfach, bis es perfekt zu meinen Bedürfnissen passt. Okay, jetzt mache ich einfach, dass ich auf einer Maske auf Hinzufügen klicke, okay, ich werde diese Ebene einfach ausschalten. Jetzt werden wir das animieren. Und wie werden wir das animieren? Und jetzt? Nun, es gibt verschiedene Möglichkeiten, aber versuchen wir es einfach mit diesem. Ich gebe nur Frame die Position und dann mache ich einfach weiter. 12 Bilder. Ich werde die Welle so hochbringen. Okay. Ich gehe einfach zurück in den Pfad und mache diesen unteren Teil tatsächlich länger, weil es dann besser funktioniert. Wählen wir das einfach aus und ziehen es so nach unten. Okay, perfekt. Also, was tatsächlich passiert ist, dass wir es sehr schnell reparieren und es wird dir auf meiner Tastatur auffallen. Ich werde einfach einen weiteren Keyframe auf meiner Maske erstellen und ihn dann einfach auswählen und dann nach unten ziehen Einfach. Das ist es. Das ist es, was ich tun muss. Lass uns einfach weitermachen und die Animation abspielen. Wie Sie sehen können, ist es eigentlich ziemlich flach, oder? Also bringe ich es einfach wieder runter und meine Maske steht wieder da. Okay. Und jetzt gehe ich einfach, dass meine Schicht unten ist, richtig? Also werde ich dafür sorgen, dass es sich in diese Richtung bewegt. Okay. Und jetzt werde ich meine Maske einfach so ziehen. Okay. Okay. Also lass uns das jetzt versuchen. Sie sehen, offensichtlich ist die Animation eigentlich sehr kurz. Deshalb sieht es nicht gut aus. Aber versuchen wir es einfach auf einer längeren Länge. Hallo. Okay, das sieht also besser aus, oder? Das sieht besser aus. Okay, also bis jetzt gibt es noch keine Animation. Lassen Sie uns einfach ein Keyframe-Schlüsselbild an der Position hier erstellen und es so ganz nach hinten ziehen Okay, jetzt liegt also ein Fehler vor, oder? Eigentlich müssen wir die Maske reparieren. Lass uns das jetzt einfach überprüfen. Okay, es funktioniert also, richtig. Aber es gibt ein kleines Problem, nämlich dass es, glaube ich, hier sein sollte , oder? Die Welle sollte also so sein, als würde sie sich wirklich sehr schnell bewegen. Okay, also werde ich das einfach hierher ziehen. Jetzt ist es einfach trocken. Okay, siehst du, perfekt. Nun, was wir tun können, ist mehrere Ebenen davon zu erstellen und auch eine weitere Geschwindigkeitsvariante zu erstellen. Wir können auch die Lockerung anpassen, oder? Wir können uns das durcharbeiten, wie wir wollen, oder? Das ist zu unserer kreativen Freiheit die Wahl , wie wir diesen Ansatz verwenden, und versuchen wir einfach, etwas damit anzufangen. Okay, wie Sie sehen können, gibt es eine kleine Variation in der Welle, oder? Es lässt es also tatsächlich wie Flüssigkeit aussehen . Siehst du, oder? Es geht also darum, das zu umgehen und das Erstellen von Wellenanimationen wird wirklich einfach und unkompliziert. Sie können natürlich den Wellenkriegseffekt verwenden und damit auch Wellenanimationen erstellen. Aber ich empfehle das nicht wirklich, weil ich denke, dass dieser Ansatz wirklich besser ist und man die Ebene einfacher bearbeiten kann , weil Ähm, sagen wir einfach, dass Sie die Welle bearbeiten müssen, Sie müssen nur weitermachen und einige Anpassungen am Pfad rechts vornehmen. Wenn Sie jedoch Waver verwendet haben, müssen Sie die Anpassung des Effekts vornehmen, ihn dann zurückverfolgen, erneut automatisch nachzeichnen und ihn dann wieder auf die Form anwenden. Ich denke also, dass diese Methode besser funktioniert, und sie führt auch dazu, dass die Dateigröße tatsächlich geringer Lassen Sie uns also einfach unsere Latifle-Größe überprüfen. Ähm, ich werde es einfach versuchen. Übrigens, das hat jetzt auch zwei Ebenen, also vielleicht wird die Dateigröße größer sein, aber lassen Sie uns das jetzt überprüfen. Lass uns auf „Fertig“ klicken. Lassen Sie uns einfach weitermachen und unsere exportierte Datei auf ihre Größe überprüfen . Okay, wie Sie sehen können, beträgt die Dateigröße jetzt neun KB, oder Sie können also den großen Unterschied zwischen den Dateien sehen. Es ist wirklich riesig. Es ist wirklich riesig, oder? Wie Sie sehen können, wird die Dateigröße wirklich, wirklich klein sein , wenn wir diesen Ansatz verwenden. Es erhöht die Dateigröße um das Zehnfache. Als wir Wave Work nutzten, waren es etwa 90, und jetzt sind es nur noch neun. Das ist also ein großer Unterschied, oder? Dies sind also die Hauptgründe, warum diese Plugins Ihnen helfen, kreative Animationen zu verbessern und Ihre Animation optimierter zu gestalten und sich von der Masse abzuheben. Okay, das war's für diesen Kurs. Ich treffe dich in der nächsten. 4. 03.Lottie als Dienstleistung: Hallo zusammen und willkommen zurück. Bevor wir mit der nächsten Lektion fortfahren , möchte ich etwas hervorheben, das in der vorherigen Klasse weggelassen wurde, nämlich dieses letzte Plug-In, das auch GifGun ist Das soll dir also im Grunde nur helfen, schnelle GIF- oder Geschenkanimationen zu erstellen schnelle GIF- oder Geschenkanimationen , damit du sie an den Kunden schicken kannst Dieses Plug-In hat keine wirklich großen Vorteile, außer dass es wenn Sie Geschenkanimationen erstellen, insbesondere für Kunden, Ihnen das viel Zeit spart und auch sehr optimierte Dateigrößen erzeugt. Und es gibt tatsächlich nur sehr wenige Einstellungen im Plugin, und Sie können sie auch durchgehen. Es kann Ihnen auch helfen, Farbverläufe in Ihren Animationen zu verwenden, dann wird es nicht zu einem so tollen Geschenk werden , da das Geschenkformat auf 256 Farben begrenzt Geschenkformat auf 256 Farben begrenzt Okay, denken Sie bitte daran, und es gibt einige Einstellungen, die Sie hier anpassen können Also, ja, sobald Sie die Komposition ausgewählt haben und dann auf die M-Geschenktaste klicken, die gesamte Animation gerendert, und dann wird sie einfach gerendert, und dann können Sie einfach darauf doppelklicken und Sie können eine Vorschau davon anzeigen Siehst du? Stimmt? Es ist perfekt. Okay, das ist der einzige Verwendungszweck, und es sind 188 kW. Okay, ich werde es einfach abwerten und jetzt gehen wir zum nächsten Kurs über, der eigentlich ein Kundenprojekt ist, was ich in der Vergangenheit gemacht habe, aber es lohnt sich, es sich anzusehen Der Kunde hat tatsächlich angefordert, dass es sich bei der endgültigen Datei tatsächlich um die GIF-Animation handelt Aus diesem Grund werden Sie während des gesamten Projekts feststellen, dass es keine HA-Ebenen gibt. Stattdessen befindet sich das Design in Listen- oder Photoshop-Dateien. Okay. Also, wie du siehst, ist das die Hauptkomposition. Anstatt dass Alpha es mit dem Handy mattiert, hätte ich auch einfach die einfache Maskentechnik verwenden können, okay Das ist eigentlich keine große Sache. Also ja, aber aufgrund der Anforderungen des Kunden waren es eigentlich Jif-Animationen, also habe ich mir nicht wirklich Mühe gemacht, eine Maske zu erstellen Okay, also werde ich einfach den Hauptcomputer öffnen. Jetzt gehen wir die Folien durch und ich werde Ihnen sagen, dass diese Animation möglicherweise auch in Lotti hätte gemacht werden Und es ist wirklich sehr lange her, als ich dieses Projekt gemacht habe Aber wenn ich dieses Projekt heute machen würde, würde ich es natürlich verbessern. Außerdem würde ich meinen Kunden vorschlagen und sie höchstwahrscheinlich einfach dazu zwingen, die Entscheidung zu treffen, eine Lotti zu verwenden, anstatt eine Geschenkanimation zu verwenden Okay. Gehen wir jetzt einfach die Folien durch. Das ist die erste Folie. Okay. Und hier sind die Illustrator-Ebenen. Und wie Sie sehen können, sind die Designs etwas kompliziert, sagen wir, wie Sie hier sehen können, okay? Es gibt eine Alternative dazu, wie wir im vorherigen Kurs besprochen haben, dass wir die Bilder auch importieren können. Richtig? Wir könnten diese also definitiv auch in PNGs konvertieren und sie dann auch exportieren Und dann können wir sie hier einbetten , um die Dateigröße für Damen zu reduzieren Wenn dieses Design mehr als 100 Ebenen enthält, können Sie das auf jeden Fall tun, um eine optimiertere Situation zu erzielen , da es mehrere Designs wie dieses gibt. Vielleicht ist es besser, PNGs von diesen zu verwenden , anstatt SVGs zu verwenden, weil es tatsächlich so viele Ebenen gibt Also vielleicht wird das PNG tatsächlich kleiner sein als das SVG Lassen Sie uns jetzt einfach unsere Daten durchgehen. Okay, also ich öffne einfach diese und lass uns einfach unsere erste Folie öffnen Okay, also bei Body Move and Plug In können wir einfach weitermachen und Body Move in wieder öffnen. Okay, wie Sie sehen können, gab es eine Option im Plug In , über die wir vorher nicht gesprochen haben, nämlich diese Option. Tatsächlich ist diese Option in diesen Fällen wirklich hilfreich , denn sagen wir einfach, dass dieses Design den ganzen Latte aufgrund der Komplexität der Schichten sehr schwer gemacht hat den ganzen Latte aufgrund der Komplexität der Schichten sehr schwer Wir könnten also unsere Illustrator-Datei zurückkehren Lass uns nur sehen , welche Datei für dieses Land ausgewählt ist, oder? Lassen Sie uns einfach unsere Länderauswahldatei öffnen. Okay? Okay, unsere Datei ist jetzt geöffnet. Und jetzt, wie Sie sehen können, gibt es viel mehr Ebenen, oder? Was wir also tun können, ist, dass wir diese Ebene einfach alleine machen können. Im Moment ist es tatsächlich Solo. Also lass uns einfach darauf klicken und lass uns alle Ebenen starten oder wir können einfach zu IU gehen Datei, kopiere das, probiere es hier. Wir müssen die Größe eigentlich nicht ändern , denn wenn wir die Größe erhöhen, wird dadurch auch die Datei um die Dateigröße des Bilds erhöht , was wir nicht wirklich wollen weil wir ein PNG verwenden werden, sich auf unsere Optimierung und Größe auswirkt Ich speichere es einfach und kontrolliere alle Schichten. Ich mache einfach ein PNG draus. Ich werde auf Speichern klicken und jetzt werde ich den Pfad sehen. Jetzt werde ich es Singapur nennen. Okay, Singapur PNG. Okay. Jetzt kann ich einfach hier nach Singapur suchen. Es wird hier nicht exportiert. Das muss ein Fehler sein. Okay, Singapur wird jetzt exportiert. Also lass uns einfach weitermachen und es in die After Effects ziehen. Okay, jetzt ziehen wir es einfach hierher und passen es an. Ich werde den Fülleffekt anwenden und jetzt einfach okay, das sieht also perfekt aus. Ich werde einfach den Effekt löschen. Und ich werde diesen einfach ausschalten. Und jetzt werde ich diesen einfach ausschalten. Wenn man bedenkt, dass es sich um ein Latty-Animationsprojekt handelt, wird es uns wirklich helfen, frühere Größen zu reduzieren und auch die Dateigrößen zu optimieren, anstatt ein SVG zu verwenden, wir können ein NG verwenden Und dann können wir im Bedienfeld „Elemente“ die Option „InjSN einbeziehen“ wählen, und das Bild wird ebenfalls enthalten Ich kann die Komprimierung bei 80% belassen. Es funktioniert jedes Mal fast einwandfrei. Wenn es Probleme mit den Dateigrößen gibt oder die Animation mit dem Design nicht wirklich gut aussieht, können Sie diese Komprimierungszahlen auf jeden Fall anpassen und sie dann erneut exportieren. Und das schließt auch das Bild und die Komprimierung wird auch auf das Bild angewendet. Also ja, so funktioniert es. Okay. Das ist also tatsächlich eine Möglichkeit, Ihre Dateien zu optimieren. Es geht darum, die richtige Lösung für Ihr Problem zu finden und die richtige Entscheidung zu treffen, um die Flexibilität Ihrer Datei zu erhöhen und auch die Dateigröße zu reduzieren. Es funktioniert also in den optimalsten und perfektesten Situationen perfekt. Okay, lassen Sie uns jetzt einfach zur nächsten Folie übergehen. Was okay ist, schauen wir uns also zuerst die Animation auf dieser an. Okay, also all diese Ebenen sind tatsächlich bis zu dieser Nullebene animiert . Okay? Also was es macht ist im Grunde , dass es vorerst nur aus dem Bild gemacht wird, wir können es auch so überlagern. Siehst du, ich kreiere eigentlich einen Klick-Effekt, oder? So funktioniert es also, weil dieses Projekt vor sehr langer Zeit erstellt wurde Wie Sie sehen können, gibt es hier einige Fehler. Okay. Also wird auf diese Schaltfläche geklickt und dann fahren wir mit der nächsten Folie fort, wie Sie hier sehen können Die nächste Folie kommt vorbei. Was passiert mit der vorherigen Folie? Wie Sie sehen können, rutscht sie mit der Position weg. Okay. Und der nächste Bildschirm ist dem vorherigen übergeordnet, sodass er, wenn er vom Bildschirm verschwindet, den Bildschirm hinter sich zieht Und das gleiche Prinzip wird auf allen Bildschirmen angewendet. Wie Sie sehen können, zieht ein Bildschirm den anderen hinter sich her, wenn er Okay. Also lass uns weitermachen, oder? Das sind nur zwei einfache Positionskeyframes, es gibt also nicht wirklich viel zu erklären. Öffnen wir also einfach diesen und schauen wir uns das an. Okay. Diese wenigen Ebenen sind also dieser Null übergeordnet und es entsteht ein Klick-Effekt Wie Sie sehen können, habe ich einfach die Ebenen beschriftet , die für mich notwendig waren, und dann habe ich einfach eine Maßstabsanimation hinzugefügt , wie Sie hier sehen können Okay. Und was danach passiert, ist , dass es eine nächste Folie gibt, okay? Und dann scrollt es nach unten. Okay. Also, wie Sie sehen können, ist der Computer im Inneren tatsächlich größer, es gibt zu viele Daten Also habe ich einfach Position-K-Frames von Parenting und so angewendet Position-K-Frames von Parenting und Nun, wie Sie sehen, gibt es tatsächlich einige Designfehler, weil ich in der Vergangenheit nicht wirklich viel über Design nachgedacht habe und mich auch nicht wirklich darauf konzentriert habe Aber jetzt, wo ich mich verbessert habe ich das Projekt noch einmal machen würde, würde ich solche kleinen Fehler auf jeden Fall selbst beheben , um das Design zu verbessern. Okay. Also weiter, was auf dieser Folie tatsächlich passiert, ist, dass auf dieselbe Schaltfläche geklickt wird , genauso wie auf der vorherigen Folie Wie Sie sehen können, kann das alles tatsächlich Latty sein, oder? Der Text kann zu spät kommen. Alles kann spät sein, nicht nur das Bild. Wir können definitiv ein PNG exportieren und hier importieren, und der Rest des Elements kann tatsächlich in Formebenen umgewandelt werden , oder? Okay. Also, was tatsächlich passiert, ist, dass auf diese Schaltfläche geklickt wird, glaube ich, ja Auf diese Schaltfläche wird geklickt. Jetzt wird natürlich ein Fülleffekt angewendet, aber wir können definitiv dieselben Keyframes auch auf die Farbeigenschaft anwenden , wenn es sich um eine Formebene handelt Also ja, das ist auch sehr spät kompatibel. Und wie Sie sehen können, wird es mit der rechten Maustaste angeklickt und dann wird es lila Okay. Und was dann passiert ist, lass uns mit der nächsten Folie weitermachen. Okay, das ist also die nächste Folie. Okay, das verwandelt sich also tatsächlich in die Wellenschicht. Die App sagt also im Grunde , dass Sie Geschenke an jeden schicken und auch einen Sprachknoten mit einer Laufzeit von 30 Sekunden Also das konvertiert, okay. Schauen wir uns einfach die Animation an. Wie du siehst, flacht es ab, okay? Das ist eine sehr einfache Animation. Es gibt keine wirklich schwierigen Dinge. Es ist nur maßstabsgetreu animiert. Das ist es, oder? Okay. Und das innere Mikrofon wird ebenfalls verkleinert. Ja, richtig? Ja, du siehst, sobald wir es antippen, vergrößert es sich und dann wird es kleiner. Und dann kommt diese Linie tatsächlich. Nun, es ist wirklich wichtig, das zu beachten, wie Sie sehen können, es gibt tatsächlich eine Audiodatei, die dem untergeordnet wurde Lassen Sie uns jetzt einfach diese Ebene finden. Dies ist eine Visualizer-Ebene. Wie Sie sehen können, wird dazu tatsächlich ein Audiospektrumeffekt hinzugefügt Es wurde also tatsächlich animiert, so wie der Schraubstock animiert. Okay. Lass uns einfach in die Akte gehen und nachschauen. Wie Sie sehen können, animiert die Stimme hier, oder? Okay. Also, wie machen wir das spät? Nun, es gibt einen einfachen Weg, und lassen Sie uns den einfach durchgehen. Okay, es gibt also eigentlich zwei Möglichkeiten. Lass uns einfach beide durchgehen. Okay. Ich werde com erstellen. Nennen wir es einfach Teststimme. Okay. Jetzt werde ich weitermachen und eine Linie erstellen. Okay, so, richtig? Ich mache einfach zehn Pixel draus. Jetzt werde ich einfach die Mitte ausrichten. Jetzt können wir zwei Dinge tun. Wir können sogar Verkleidungsteile hinzufügen. Okay. Lass uns weitermachen und das versuchen. Lass uns einfach 50 draus machen, die anderen 149. Okay, damit da ein bisschen Dt drin ist. Okay. Und was wir jetzt tun werden, ist, es einfach um die Ecke zu machen. Ich denke, das wird besser aussehen. Siehst du? Sieht besser aus. Okay. Also werde ich beides als Keyframe verwenden. Ich werde ein bisschen hineinzoomen. Und versuchen wir einfach , das zu animieren. Lass es uns hierher gehen lassen, lass es hier, hier, in die andere Richtung gehen Zwei Bilder später kommt einer hierher. Der andere geht hierher. Okay. Und dann kannst du sie einfach durchgehen und es dann ein bisschen machen, und dann kannst du einfach die Keyframes klonen , wie wir es im vorherigen Kurs gemacht haben. Okay. habe ich diese Plugins im vorherigen Kurs erklärt. Wenn Sie also wissen möchten, wie man sie benutzt, können Sie sich einfach frühere Kurse ansehen. Okay, du kannst sehen, okay, das funktioniert, oder? Okay. Und du kannst es einfach benutzen und lass uns den Pfad einfach verlängern , also so. Und dann, wie Sie sehen, können Sie einfach dieselbe Methode verwenden und es viele Male tun. Okay? Und dann mach einfach weiter. Das ist es. Und dann kannst du all das neu erstellen und lass uns einfach drei draus machen Es gibt also auch kleine Linien zwischen ihnen, wenn Sie möchten Okay. Und lass uns das einfach spielen. Richtig? Jetzt können Sie natürlich auch die Keyframes verschieben. Aber versuchen wir das einfach. Es wird es schaffen. Bringen wir es einfach her. Und jetzt werde ich es tatsächlich randomisieren lassen. Und ich mache einfach den zehnten Schritt und lass uns einfach auf Sequenz klicken und sehen, was uns einfällt Okay, es ist also ein Fehler aufgetreten. Das wird eins sein, aber der Offset wird zehn sein. Okay, mein Fehler. Okay. Lass uns einfach weitermachen und das spielen. Okay, lass uns das spielen. Richtig? Es scheint also, als ob die Stimme gesendet oder die Stimme abgespielt wird. Okay. Aber eine andere Methode, die wir ausprobieren können, die viel einfacher und leichter ist. Nun, das wird sich vielleicht ein wenig auf Ihre Dateigröße auswirken, aber es ist viel einfacher zu bearbeiten, und Sie können die Revisionen des Clients auch sehr einfach anwenden des Clients auch sehr einfach Okay, ich habe diesen Pfad erstellt. Okay, dieselbe Methode. Ich mache zehn, damit wir es deutlich sehen können. Ich werde alles machen. Also nochmal, rund um Kappen. Okay. Und jetzt werde ich keine Felgenteile mehr hinzufügen. Stattdessen klicke ich auf meine Skalierungseigenschaft und füge einen Ausdruck hinzu. Okay? Und wie Ausdrücke funktionieren, ist im Grunde kompliziert zu erklären, aber es ist nur so, wenn Sie mit den Ausdrücken vertraut sind, dann ist es leicht zu verstehen. Aber wenn du mit Ausdrücken noch nicht vertraut bist, dann würde ich dir dringend empfehlen, dir vielleicht ein grundlegendes Tutorial dazu auf YouTube anzusehen. Okay. Also werde ich jetzt einfach ein paar Werte eingeben. Ich sehe nur, wie das aussieht. Okay, wie Sie sehen können, sieht es so aus, als ob das funktioniert, glaube ich, richtig. Was wir tun können, ist, dass wir 80 daraus machen können, richtig? Okay. Und lassen Sie uns einfach versuchen, den Entlassungswert auf 200 zu setzen und sehen, was passiert Okay. Wie Sie sehen können, sieht das nicht realistisch aus. Also lass es uns einfach wieder auf 20 herunterfahren und das auf 1800 machen. Mal sehen, was das bewirken wieder auf 20 herunterfahren und das auf 1800 machen. Mal sehen, wird, oder? Es scheint, als ob die Stimme abgespielt wird. Okay. Und machen wir es einfach auf 50 zurück, nur um den Unterschied zu sehen. Okay, Sie können also mehrere Kopien davon erstellen, richtig. Sie können diese auch skalieren, oder Sie können einfach den Pfad festlegen und ihn an beiden Enden verlängern, richtig? Und wenn Sie die Wellenlängen anpassen müssen, können Sie einfach den Ausdruck bearbeiten Das ist es. Das ist alles was du tun musst. Sie müssen nur dieselbe Ebene immer wieder und wieder kopieren . Und dann können Sie einfach den Gal-Ausdruck bearbeiten. Siehst du, sieht realistischer aus, oder? In jeder Ebene gibt es eine gewisse Randomisierung . Und für die kleinen Knoten oder Knoten in der Stimme kannst du einfach diesen auswählen und sie kleiner machen oder einen von diesen klein machen und dann den kopieren, richtig? Und dann kannst du die Welle so daraus machen. Okay. Entschuldigung, mein Fehler. Okay, lass uns versuchen, das zu spielen. Ich mache es für 2 Sekunden und lass uns das einfach spielen. Siehst du, das sieht realistischer aus. Natürlich können Sie einige Ebenen noch weiter reduzieren , aber Sie verstehen, was ich meine. Nun, wie exportieren wir diese Animation? Okay, das ist wirklich wichtig. Also, was machen wir jetzt? Ich werde einfach, ähm, unseren Test-Vice Comp auswählen Ich gehe einfach in die Einstellungen und wie Sie sehen können, keine zusätzlichen Optionen ausgewählt Lassen Sie uns jetzt einfach versuchen, das zu exportieren und lassen Sie mich Ihnen nur sagen, dass das nicht funktionieren wird, okay? Okay, also teste Voice, Nein. Okay, das ist also eine Vorschau-Animation. Wie Sie sehen können, funktioniert es, richtig, aber es gibt immer noch etwas, das Sie beachten sollten Bevor Sie die Datei an den Client senden, müssen Sie den Latte tatsächlich überprüfen, und er funktioniert möglicherweise nicht auf Mobilgeräten oder vielleicht im Internet Bevor Sie das senden, müssen Sie nur in die Einstellungen gehen, in die Einstellung Scrollen nach unten gehen, zu den Ausdrucksoptionen gehen und Ausdrücke in Keyframe konvertieren auswählen Klicken Sie auf Speichern und dann können Sie hierher zurückkehren. Wie Sie sehen können, beträgt die Größe 20 KB. Lass uns das einfach ersetzen. Es ist Hit Rendern. Und lassen Sie uns einfach noch einmal die Dateigröße überprüfen. Okay. Wie Sie sehen können, beträgt die Sprachgröße jetzt 89 KB, weil alle Werte in Keyframes umgewandelt wurden Okay, also ja, das funktioniert auch auf die gleiche Art und Weise tatsächlich mit dem Body Movement Plug In Aber wenn Sie die Animation mit dieser Methode rendern, funktioniert sie auf allen Plattformen einwandfrei. Okay. Gehen wir also zurück zu unseren Studien. Also ja, du kannst die Animation damit hinzufügen. Und danach wird die Schaltfläche tatsächlich auf die nächste Schaltfläche geklickt, oder? Und was passiert, ist, dass die Stimme hier ein bisschen spielt und dann in die nächste übergeht, richtig Okay, was hier passiert , ist, dass wir das hier öffnen. Okay, das ist also nur eine Textebene, im Grunde eine Formebene, und wir verwenden eine Maske, um den Namen zu enthüllen. Und dann gibt es eine Ebene mit jeder Zeile , die maskiert ist Okay, es ist also alles eine Ebene, glaube ich, ja. Es gibt drei Masken auf derselben Ebene. Okay. Also ja, das wird auch spät perfekt funktionieren, aber ich würde dringend empfehlen, dass Sie eine Linie für eine Maske wählen und dann dieselbe Ebene duplizieren. Verwenden Sie nicht vier Masken auf derselben Ebene, denn wenn sich die Maske gegenseitig unterbricht, könnte die Late-Maske abstürzen oder nicht perfekt funktionieren Okay. Zurück zum Hauptmenü, nach der Enthüllung der Nachricht wird der nächste Button erneut und du bist auf der Checkout-Seite, du scrollst nach unten Wie Sie hier drinnen sehen können. Jetzt sind alle Ebenen einer Ebene übergeordnet, das ist die fünfte Ebene, die letzte Und dann, weil kein Objekt hinzugefügt werden musste, weshalb es auf diese Weise animiert wurde weshalb es auf diese Weise animiert Okay? Also scrollt es nach unten. Drücken Sie Sie, wie Sie sehen können. Hier ist die Skalenanimation der Taste Okay. Nun, wer Sie gesendet haben, und dann geht es in den Zugriffsbildschirm über, und dann können Sie sehen, wie es eine Chat-Animation gibt. Nun, wir haben im vorherigen Kurs tatsächlich schon einmal Chat-Animationen gesehen . Nun, diese animiert nicht besonders gut , wenn wir sie mit diesen vergleichen. Der Grund dafür ist , dass der Nutzen von Textanimationen und Chat-Zwecken hier sehr gering ist , da wir die gesamte Idee der App vorgestellt haben Richtig? Die Interaktion zwischen zwei Personen ist also nicht wirklich so wichtig , weil unser Produkt nicht auf ihrer Interaktivität basiert Wenn Sie nun KI-Chat-Bot-Chats animieren, dann ist die Interaktivität In diesem Fall sind jedoch die Produktivität, das Produkt, das Unternehmen Aktivitäten des Unternehmens am wichtigsten, was bereits in der Animation zuvor gezeigt wurde Deshalb haben wir das sehr schnell und hastig animiert , oder? Wie Sie sehen können, erreicht die Person die Benachrichtigung und dann sagt sie: Danke Und dann die letzte Folie, wenn die Person auf diese Nachricht klickt , schauen wir mal, ich glaube, sie wird angeklickt Nein, tut es nicht. Okay. Also ja, dieser öffnet sich und was dann passiert, ist, dass die Sprachknoten abgespielt werden. Das ist wirklich einfach. Das ist nur eine Wellenform-Ebene, und es ist tatsächlich eine weiße Schicht im Inneren, wie Sie sehen können, also sind alle Ebenen eigentlich getrennt Ähm, ich hätte einfach die Zusammenführung benutzen können, aber ich glaube nicht, dass ich dieses Plugin vorher hatte Sonst müsste ich dafür kein Pre-Comp erstellen. Sie können also sehen , dass Ihnen diese Art von Dingen tatsächlich einen ganzen Pre-Comp ersparen können, oder? Sie können also einfach eine Ebene maskieren, anstatt sie vorab zu kompilieren. Ich hätte das einfach maskieren anstatt zu dieser Komposition zurückzukehren Ja. Ja, das wird sauberer funktionieren , glaube ich, wenn wir Ideen entwickeln oder die Farbe ändern müssen. Du kannst einfach die Ebene schreiben und die Farbe ändern anstatt zurück nach innen zu gehen und die Farbe zu ändern. Okay, das wird abgespielt und dann erhalten sie , dass mein Button angeklickt wird und die Animation endet So hätten wir dieselbe Animation auch mit Kunstanimation erreichen Grund war es wirklich wichtig, Ihnen zu zeigen , wie Sie auch diese Art von Animationen erstellen können , indem die Exportoptionen importieren oder verwenden die Bilder mithilfe dieser Funktion in Ihre Animationen einzubeziehen mithilfe dieser Funktion in Ihre Animationen und bei Bedarf auch Expressions für bestimmte Ebenen zu verwenden , wie den Voice-Modus, den wir auf der vorherigen Folie hatten. Okay, das war's für diesen Kurs in der nächsten. 5. 04.Fallstudie zum Projekt: Willkommen zurück zum Kurs. Okay, ich eröffne ein Kundenprojekt und werde versuchen, Ihnen so viele Beispiele wie möglich zu zeigen , wie ich Kundenprojekte abwickle und wie ich ihre Animationen erstelle, denn der Hauptteil und der Schwerpunkt dieser Kurse besteht darin , euch beizubringen, wie man Animationen für Ihre Kunden erstellt, oder? Das ist also eine Animation , die ich vor ein paar Monaten für einen Kunden erstellt habe , okay. Und was sie im Grunde wollten, war, eine KI-Software zu entwickeln, die den Schülern hilft, ihre eigene Bildung für Kinder und Schüler zu gestalten. Okay, also ohne weitere Umschweife, gehen Sie einfach unsere Datei durch. Gehen wir einfach zurück zu unserem Hauptcomputer. Das ist also unser Hauptkomp. Okay, es gibt zwei Hauptkoms. Also haben wir auch eine Komposition, besonders diese, die tatsächlich gerendert wird Eigentlich ist es nicht dieser. Es ist dieser, der Render-Render. Der Kunde verlangte am Ende sogar, dass die gesamte Animation tatsächlich auf einem Desktop angezeigt werden sollte , da es sich um die Desktop-Version seiner KI handelte. Also habe ich diesen Desktop einfach von einer kostenlosen Stock-Website genommen, und dann sind das nur Share-Player. Okay, ich habe gerade Overload verwendet und es hier mit Overload eingegeben. Okay. Und was jetzt gerade passiert, was hier passiert, ist, lassen Sie uns darauf eingehen. Okay, das ist also die Hauptanimation. Lass uns einfach zur ersten Com übergehen. Okay, wie du sehen kannst, da ist dieser Avatar. Zuallererst können wir diesen Avatar nicht zu einem SVG machen. Das ist also nur ein KI-Avatar, und das ist ein PNG-Bild. Und ich verwende dieselbe Option , die ich dir in der vorherigen Klasse gezeigt habe, als ich sie eingegeben habe und die Bildoption verfügbar gelassen habe, oder? Wählen Sie das aus, das die Rasterbilder in der JSON-Datei enthält , und dann wird dieses Bild perfekt gerendert. Okay, das ist also nur eine sehr einfache Animation. Okay. Also das ist im Grunde Denken und Führen. Das ist das Motto dieser drei Schlüsselbilder, die wir zu zeigen versuchen. Okay, lassen Sie uns zurück zu unserem Hauptcomputer kommen. Also, äh, lass uns U auf unserer Tastatur drücken, damit wir sehen können. Okay, das ist also die erste Ebene, die animiert. Es wird skaliert, okay. Und dann ist da noch diese Textebene. Und ich habe hier in der Einstellung die erste Option verwendet , die Option Glyphen Okay, kreuzen Sie dieses an und Sie können den Text einfach weiter bearbeiten, und es wird ihn einfach konvertieren, während die Datei tatsächlich in Share-Player gerendert Okay. Also die erste Zeile animiert tatsächlich mit Maske, einer sehr einfachen Maske, okay Und es gibt zwei Keyframes auf der Maske und das wird sichtbar. Nun gibt es hier etwas Wichtiges hervorzuheben, nämlich dass jemand denken könnte, dass es keine professionelle Art ist, dies zu animieren vielleicht weil die Leute wollen der Schreibeffekt tatsächlich Buchstabe sichtbar wird, oder? Das können Sie erreichen, indem Sie es in einen Share-Player umwandeln und es dann einfach um ein Keyframe ausgleichen, wie wir es im vorherigen Kurs getan haben Aber das ist in dieser Situation nicht sehr ratsam , denn während wir das hier durchgehen, gibt es Tonnen von Text, der tatsächlich animiert Es wird also eine Menge Zeit in Anspruch nehmen, tatsächlich für jeden Buchstaben einen Keyframe zu verwenden, denn dann wird das Zwei- oder Dreifache noch Es wird sogar noch mehr Zeit in Anspruch nehmen , oder? Es dauert gerade. Mal sehen, wie viel Zeit es dauert. Es dauert ungefähr 6 Sekunden, oder? Und dann dauert die Animation ungefähr 18 Sekunden. Wir wollen also nicht wirklich, dass sich der Benutzer der Animation langweilt, denn das ist eine Tocas-Animation, Das heißt, wenn Sie sich die Animation ansehen, können Sie sich völlig darüber im Klaren sein, was KI für Sie tun Unsere Aufgabe ist es also, eine Animation zu erstellen, die die Bedeutung in sehr kürzerer Zeit darstellt. Okay. Also all diese Formen sind nur Formen, einfache Formen, richtig? Es gibt also nur Animationen im Maßstab. Die Ankerpunkte werden an dieser Stelle mithilfe dieses Plug-ins verschoben, das wir im vorherigen Kurs besprochen haben. Sehr einfach. Und das sind nur die Steuerzahler, die dieselbe Maskentechnik verwenden. Das alles wird aufgedeckt, oder? Okay. Also, wenn all diese animiert sind und sich dann diese Schaltfläche von selbst zeigt, okay, sie wird angezeigt, und dann passiert der Klick auf die Schaltfläche „Senden“. Okay. Und was dann passiert ist, wir kommen zur zweiten Runde. Okay. Lass uns dich auf unserer Tastatur treffen. Wie Sie sehen können, positioniert es sich in der oberen Richtung. Okay, Sie können die Lockerung auch hier überprüfen. Okay, es geht mit der Opazität auch in die obere Richtung , also verblasst es im Grunde Und dann fängt das A an, die Antwort zu generieren. Gehen wir auf diesen Computer ein. Und bevor wir weitermachen, öffne ich einfach den Illustrator, damit ich Ihnen die Designdatei zeigen kann , die mir der Kunde tatsächlich geschickt hat Also lass mich dir das ganz schnell zeigen. Okay, das ist also die Datei , die mir der Kunde tatsächlich geschickt hat. Das ist die Hauptseite. Nun, wie Sie sehen können, habe ich einige Änderungen vorgenommen. Ich habe den Hintergrund dieser Dame entfernt und den Hintergrund durch eine Ebene, eine einfache Formebene, ersetzt . Okay, weil ich es vorgezogen habe, dass der Kunde einen einfachen Kreis auf dem Hintergrund anstatt ein Quadrat zu verwenden, weil wir dann die Dame darin animieren wollen Dame darin animieren Also stimmten sie zu. Okay, und was dann passiert, ist, dass das die erste Folie ist. Das war eigentlich eine Referenz ihrer mobilen App-Version. Sie brauchten diesen nicht wirklich. Sie haben diese Version tatsächlich storniert. Also haben wir uns nur für diesen entschieden. An diesem haben wir eigentlich nicht gearbeitet. Das war nur ein Stilrahmen. Okay. Also hier sind alle Texte, von denen der Kunde gesagt hat, dass die KI sie aufschreiben wird. Okay. Das ist also der Grund, warum wir den Buchstaben-zu-Buchstaben-Effekt nicht erzeugen konnten, weil die Animation wegen der vielen Buchstaben mehr als 50 Sekunden dauert Animation wegen der vielen Buchstaben Okay. Also, wie habe ich das animiert Gehen wir einfach zurück zu unserem Illustrator, unserer nachträglichen Untersuchung, und schauen wir uns an, wie ich das animiert habe. Okay. Also hier ist der Computer. Ich habe es tatsächlich größer gemacht. Wie Sie sehen können, habe ich die Höhe erhöht. Gehen wir einfach zurück zu unserem Illustrator und überprüfen die Höhe hier. Ich glaube, hier sind es auch 5.000 . Aber schauen wir uns das einfach mal an. Okay. Wie Sie sehen können, sind es 3.200 Pixel Okay? Also ich erhöhe es tatsächlich , weil ich eigentlich einen Scroll-Effekt erzeugen wollte . Jetzt hätte ich auch diesen oberen Bereich löschen können. Aber der Kunde brauchte das wirklich sehr schnell. Ich wollte also nur die Animation erstellen, und es hat eigentlich nicht geschadet, diesen weißen Raum zu erzeugen , weil es keine anderen komplexen Objekte oder Ebenen gab Also habe ich es einfach mitgemacht. Aber auf jeden Fall sollte es hier ganz oben stehen. Ja. Okay. Zuallererst animiert diese Ebene also auf die gleiche Weise Okay, kein Unterschied. Es lässt sich nicht skalieren, weil wir das schon gemacht haben, oder? Warum also ein Scale-Up daraus machen? Nochmals, weil es gerade erst die Antwort schreibt. Also okay, also wie animiert der Text? Schauen wir uns das an? Die Absätze sind in Maskenebenen unterteilt, okay? Und dann passiert , dass es eine Maske gibt. Lassen Sie uns Sie auf unserer Tastatur drücken, und wie Sie sehen können, gibt es Positions-Keyframes und Opazitäts-Keyframes Denn der ganze Zweck, KI-Animationen oder KI mithilfe von KI-Software zu zeigen , auch ein großes Element bei der Erstellung von KI-Animationen hat auch ein großes Element bei der Erstellung von KI-Animationen, das Sie immer im Hinterkopf behalten müssen, nämlich dass die KI die Zeit reduziert , die Sie für die Aufgabe wenn Sie keine Okay? KI wird Ihnen also im Grunde jede Menge Zeit sparen. Deshalb versuchen wir hier zu betonen, dass sie sehr schnell zu Ergebnissen führt. Also sind alle Ebenen einfach versetzt , wie bei diesem Plugin, so einfach ist Okay. Und das ist alles animiert, oder? Und danach schreiben wir, wie Sie sehen können, dass die Person, die die KI verwendet, eine weitere Frage schreibt Okay? Im Grunde eine Folgefrage. Und dann reagiert die KI auch darauf, oder? Ziemlich einfache Animation. Nichts allzu Kompliziertes. Gehen wir zurück zu unserer Hauptkomposition und sehen wir uns an , wie ich den Scroll-Effekt gemacht habe Okay, wie Sie sehen können, sind hier die ersten Positionierungs-E-Frames Okay, lass uns das mal langsam angehen. Und wie Sie sehen können, ist es hier. Okay. Also die Animation beginnt hier, okay? Und bis hier ist die Position nicht animiert. Es ist nur ein Opazitätsschlüssel von Anfang an. Von hier aus wird die Position animiert, weil der Text auf dem Bildschirm voll ist, also geht er nach oben und was dann passiert ist wir zum unteren Rand dieser Ebene zurückkehren, weil wir zeigen wollen, dass sich die Tippleiste genau wie bei WhatsApp unten auf dem Bildschirm befindet, also sollte sie sich hier unten auf dem Bildschirm befinden, bis sie geschrieben ist Okay. Und danach das Abtippen. Okay, was passiert, ist eine sehr einfache Tatsache, die tatsächlich passiert. Lass uns einfach zurückgehen und das überprüfen. Okay. Also was passiert ist hier, dass diese Textebene nach oben geht. Lass mich das einfach einschalten. Okay. Also diese Ebene wird nach oben verschoben und für diese Ebene wird der Deckkraft-Key eingerahmt Lass uns dich einfach auf unserer Tastatur drücken und sehen. Wie Sie sehen können, verschwindet diese Ebene, verschwindet, richtig. Und dann positioniert sich dieser in der oberen Richtung. Okay, und das war's. Es läuft keine zusätzliche Animation. Okay, das ist eigentlich Null übergeordnet, und die Null ist hier. Tatsächlich ist die gesamte Leiste bis zu dieser Null animiert, und diese Null animiert tatsächlich in die obere Richtung, sodass sich auch das Personensymbol mit ihr in die obere Richtung bewegt Okay. Also, nur um ein paar Keyframes zu speichern, habe ich einfach ein Null-Objekt hinzugefügt Nach dieser Animation erscheint ich wieder, und dann wird sie wieder animiert und sie gibt alle Antworten erneut auf dieselbe Weise Gehen wir zurück zu unserer Hauptkomposition und schauen wir uns das an. Okay. Also, jetzt hält es die Animation für eine Weile hier, und dann beginnt die Positionsanimation wieder von vorne. Okay. Und so einfach ist das, die Animation vervollständigt sich von selbst und beginnt von vorne. Und das ist alles. Okay, ich löse es einfach und du kannst die ganze Animation sehen Okay. Das war also ein sehr einfaches Projekt Und jetzt möchte ich Ihnen ein bisschen zeigen, auch ein ähnliches Projekt, das eigentlich das Projekt eines anderen Kunden war. Okay, das ist also die Animation, die ich erstellt habe. Schauen wir uns das an. Okay, das ist es also. Okay, im Grunde dient das auch dazu, die vorherige Dateigröße des vorherigen Projekts zu überprüfen. Die endgültige Animationsgröße war die Desktop-Version, ich war eigentlich nur 261 KB groß, und das war's. Da wir diese Option innerhalb des Steckers verwenden , der sich im Inneren des Körpers bewegt, also die Glyph-Option, war die Dateigröße sehr klein Lassen Sie uns dieses Projekt jetzt einfach öffnen und lassen mich Ihnen zeigen, was ich in diesem Projekt gemacht habe und wie ich es erstellt habe Nun, für dieses habe ich das Design tatsächlich selbst erstellt. Lassen Sie uns also weitermachen und uns das Design ansehen , denn es ist nicht wirklich so herausfordernd, wie Sie vielleicht denken. Okay, also der Kunde hat mir im Grunde genommen eine Animation geschickt, die ich aus Datenschutzgründen nicht mit Ihnen teilen kann , weil er nicht wollte , dass sie irgendwo geteilt wird , auf wen er sich eigentlich bezieht. Okay, also im Grunde ist das ein KI-Tool, das die Generierung von Verkaufs-Leads automatisiert Okay, das waren also die Kundenfarben , die sie zur Verfügung gestellt haben, und das waren die Schriftarten Das war die Anforderung des Kunden. Ich habe gerade sechs Rechtecke erstellt und die Werte hier kopiert und eingefügt Okay. Und danach habe ich diese Buttons erstellt, diese Button-Animation. Und diese Knöpfe sind wirklich sehr einfach. Und wie Sie sehen können, befinden sich die Striche und Füllungen auf der Schaltfläche. Es gibt nur Schrift. Da ist dieses kleine Symbol. Ich habe versucht, das Farbschema des Kunden tatsächlich anzupassen , um alles mit seinem Branding in Einklang zu bringen. Und dann geht der Pfeil runter. Also im Grunde reicht jemand ein Formular ein und kontaktiert uns dann bitte über die aktive Kampagne Es ist das Erste, was tatsächlich passiert, ist, dass ein Formular ausgefüllt wird und dann der Kontakt über die aktive Kampagne hergestellt wird , die sie verwenden, und dann wurde sie beantwortet oder nicht? Haben sie Frage vier im Formular „Unentschieden“ mit Ja beantwortet? Wenn es ein Ja ist, dann senden sie einen vergünstigten Link. Wenn nicht, senden sie einen Link ohne den Rabatt. Und dann warten sie unter beiden Bedingungen zwei Tage. Und wenn sie dann die E-Mail öffnen, wenn ja oder nein, werden sie aufgefordert, sie telefonisch zu kontaktieren und wenn ja, mit dem Self-Service-Lead zu versehen, oder? Okay, und dann hat der Kunde einige Änderungen angefordert. Außerdem ist dies ein sehr hilfreicher Tipp. Sie können die Datei einfach duplizieren und gleichzeitig die Visionen des Kunden erstellen. Der Kunde wollte also, dass sich die Box wie von Hand anfühlt. Also habe ich einfach ein paar Ankerpunkte auf der Box hinzugefügt und sie dann einfach angepasst und sie einfach zu einem geraden Pfad gemacht und nur ein paar Kurven hinzugefügt, und das war's. Und danach dupliziere ich es einfach überall in derselben Box. Außerdem baten sie darum, dass das Formular blau sein sollte, okay. Und die anderen waren in Rosa. Außerdem baten sie mich, die Farbe der Pfeile zu ändern , und das habe ich getan. Sobald das Design genehmigt war, baten sie mich auch darum, das ZPR-Symbol hier hinzuzufügen, aber sie bestanden darauf, dass alles auf ihre Marke abgestimmt sein sollte Okay. haben sie die Version genehmigt, und was ich dann getan habe, war, das ist das Feedback zur vorherigen, richtig? Sie sagten mir, was ich ändern sollte, und dann habe ich die Änderung übernommen. Okay. Danach habe ich einfach weitergemacht. Nun, das lag nicht an diesen Teilen weil Striche nicht in After Effects animiert werden können oder sagen wir einfach, die Spitze der Pfeile, wenn wir die andere Datei importieren Lassen Sie uns das einfach machen und lassen Sie mich Ihnen zeigen, wie es funktioniert Okay, ich wähle das aus. Ich gehe auf meine After Effects ein. Ich öffne eine neue Komposition, und jetzt mache ich sie weiß. Okay. Lass uns jetzt einfach auf Okay klicken, damit ich dir zeigen kann, was passiert, wenn ich das importiere. Okay. Wie Sie sehen können, wurde die Pfeilspitze nicht hinzugefügt. Also brauchten wir das auch. Also habe ich einfach all diese ausgewählt und dann einfach zum Objekt gewechselt und das Erscheinungsbild erweitert. Das ist es. Und dann werden sie in die Formebenen umgewandelt , sodass ich jedes Element problemlos animieren kann jedes Element problemlos Und diese Striche bleiben Striche. Okay. Okay, was jetzt tatsächlich passiert ist, als das Design fertig war, habe ich es hierher gebracht und dann habe ich zuerst diese Designkomposition erstellt Bitte stellen Sie sicher, dass Sie das Design zuerst nur in einem separaten COM eingeben , bevor Sie es animieren Dann duplizieren Sie die Komposition, okay? Und dann können Sie die Animation in einer separaten Komposition erstellen Auf diese Weise haben Sie das Design hier. Sagen wir einfach, ich füge hier und da ein paar Keyframes hinzu. Und aufgrund eines Fehlers oder eines Problems oder vielleicht eines Fehlers oder einfach eines Fehlers bringe ich das Design durcheinander Dann kann ich einfach zurückgehen und mir das eigentliche Design von hier aus holen. Oder wenn die Animation kaputt geht, kann ich diese Komposition einfach löschen und diese erneut duplizieren und mit der Animation von vorne beginnen Okay. Also das ist die Person, die auf der Plattform ist, und sie macht im Grunde eine Reise durch. Er oder sie macht eine Reise durch, richtig, durch das Formular. Und auch der Kunde wollte in der Animation Zomi zum Einsatz kommt. Also, wie schaffen wir das eigentlich? Weil wir nicht drei D-Lers verwenden können , weil diese von veralteten Dateien nicht unterstützt werden. Was tun wir also dagegen? Also dafür habe ich zuerst die gesamte Animation erstellt , okay? Und dann habe ich die Größe der Komposition, okay, auf nur 500 mal 500 Pixel reduziert auf nur 500 mal 500 Pixel , weil das die Anfrage des Kunden war Und dann habe ich all diese Animationen erstellt und sie dann einem Null-Objekt zugeordnet, das, wie Sie sehen können, animiert ist Wie Sie hier sehen können, gibt es, wenn ein Teil nicht animiert wird, wenn ein Teil nicht animiert wird, Keyframes für jede Instanz, sowohl für die Position als auch für die Skala Da wir im vorherigen Kurs ein sehr komplexes Projekt gemacht haben , wissen Sie vielleicht, dass das Hinzufügen von Dummy-Keyframes sehr wichtig ist , um das Timing der Animation später anzupassen Okay. Also was passiert ist, lass uns das einfach durchgehen. Lassen Sie uns diese Null einfach protokollieren. Drücken wir auf unserer Tastatur und gehen wir einfach alle Ebenen durch. Ich drücke, okay. Und wie Sie sehen können, gibt es eigentlich nur zwei Ebenen, die animiert werden. Der erste ist dieser Charakter. Im Grunde genommen ist der Sinn dieses Designs, perfekt zu sein, wirklich wichtig , weil das Design hier das wesentliche Element ist. Bei allen wahrscheinlichsten Animationen ist Design wirklich wichtig. Und in diesen Fällen, weil es sich um eine Animation zur Produktpräsentation oder um eine Einführungsanimation für ein Produkt handelt. Bei diesen Animationen ist dieses Design also tatsächlich sehr wichtig. Okay, dieser kleine Kerl animiert also tatsächlich nach unten, okay, es kommt bis hierher Und dann wird hier derselbe Keyframe hinzugefügt, okay? Hier gibt es keine Interpolation zwischen ihnen, oder wenn es eine gibt, ist es nicht wirklich wichtig, weil es hier unten Angst macht und weil es hinter der Ebene ist Es ist also nicht wirklich wichtig, ob es animiert wird. Okay, was dann passiert, ist, ich einfach die Skalierung für diese Null und die Positionierung verwende die Skalierung für diese Null , und das war's Also gehen wir im Grunde durch einen Pfad, richtig, und dann navigieren wir einfach selbst darin Okay. Also gehen wir einfach in dieses Forum und dann nimmt die Skala ab, was zu diesem Verkleinerungseffekt führt Eigentlich verwenden wir hier nur die Skala. Wir verwenden nichts Ausgefallenes, aber wir haben den Effekt trotzdem perfekt hinbekommen, oder? Die Person kommt in das S und dann und dann passiert, das sind dieselben Keyframes, die hier dupliziert werden, sodass die Animation hier gespeichert wird und danach wird sie wieder animiert Warte zwei Tage, richtig? Es bewegt sich von hier nach hier, und dann bewegen wir uns von hier runter, und dann animiert dieser Typ wieder so Und dann gehen wir zurück und zoomen wieder heraus, wie Sie sehen können, das ist hier, 100% -Skala, und das ist jetzt 50% -Skala Okay? Nichts sehr Komplexes, sehr Einfaches. Und jetzt zieht sich das bis in diese Kolumne. Okay. Und während es sich hier hinzieht, zoomen wir wieder rein Okay. Und wie du siehst, gehen wir jetzt hier runter und die Animation endet hier, oder? Perfekt. Okay? Keine Probleme wurden erfolgreich gelöst. Okay, das war also auch sehr kompatibel, und die Schrift wurde einfach mit derselben Option in die Share-Player konvertiert , richtig? Dieser, der CS-Teil. So einfach ist das, nichts sehr Kompliziertes. Kommen wir nun zu einer sehr einfachen Animation und einem weiteren Beispiel. Okay, jetzt schauen wir uns dieses Projekt an. Nun, das wurde für einen anderen Kunden erstellt. In diesem Fall wurde das Design tatsächlich in Figma bereitgestellt, aber es gab einige winzige Probleme, die ich tatsächlich behoben habe Ich habe das Design in SVG konvertiert. Okay. Und dann habe ich, wie Sie wissen, die Bilder direkt aus Figma importiert, wenn wir das AeuxPlugin verwenden, wie wir es in der ersten Klasse verwendet haben Okay. Und dann passiert, dass die Animation wirklich sehr einfach ist. In diesen Leitungen gab es tatsächlich einige Probleme. Also habe ich sie gerade im SVG bearbeitet. Lassen Sie mich einfach die Designdatei öffnen. Also ich kann es dir zeigen, wie du hier sehen kannst, dieses ist ein flacheres Beispiel. Lass mich einfach noch einen öffnen. Okay, wie Sie in diesem sehen können, habe ich die Referenzen gezogen. Okay, lassen Sie mich einfach weitermachen und das ausschalten, damit ich erklären kann, was ich getan habe. Okay, das sind also die, die ich gezeichnet habe. Okay. Dies ist das vom Kunden bereitgestellte Design. Okay? Wie Sie sehen können, wenn ich es alleine hierher ziehe, können Sie sehen, dass der Pfeil Segmente enthält, aber es sollte nur eine einfache Linie sein. Jetzt kann ich es nicht mehr animieren, indem Teile zuschneide, weil es sich um eine Füllung handelt, oder? Wir können eine Füllung nicht animieren. Deshalb habe ich diese violetten Ebenen darüber erstellt Ich habe die Linien im Grunde zurückgezogen , um die Animationen besser zu lockern Ich habe das mit allen Animationen gemacht , die der Kunde Ich habe alle Pfeile wieder selbst erstellt. Das hat nur 5 Minuten gedauert, aber es hat die Animation so viel einfacher gemacht, und ich musste die Ebenen nicht maskieren. Ich habe einfach den Trimpfad benutzt, wie Sie hier sehen können. Wie Sie sehen können, ist das Ende des Trimmpfads tatsächlich animiert, und sonst wird nichts animiert. Und wir haben einen sehr einfachen Effekt. Und dann wird dieser Header auch animiert indem das Ende und der Anfang beide bei 50 50 50 verwendet werden, sodass er von der Mitte aus animiert Die andere Animation ist sehr einfach. Die Tasten sind undurchsichtig und es gibt auch eine Skala. Okay. Und dann gibt es nur noch Bildanimation, bei der es nur um Opazität geht. Das ist es. Offensichtlich sind dies viele Ebenen, daher mag es etwas verwirrend erscheinen. Aber wenn Sie sich den vorherigen Kurs, die Zwischenklasse, ansehen , dann wird es Ihnen wirklich einfach erscheinen, weiterzumachen. Okay, das ist also nur eine maßstabsgetreue Animation, und es gab einige Standards, die ich bei den Animationen befolgt habe , die Maßstabsanimation ist zehn, 20, 21, 22, 23, 24. Jede maßstabsgetreue Animation hat 24 Frames, okay, wie Sie hier sehen können. Und auch diese Animation, das ist auch AirScale-Animation Wie Sie sehen können, ist diese auch 1 Sekunde lang. Okay, Sie müssen also einige Standards erstellen, wenn Sie Animationen erstellen, mehrere Animationen für den Client. Sie müssen diese Standards einhalten und sie bei jeder Animation, die Sie erstellen, befolgen. Das hilft Ihnen, konsistente Ergebnisse zu erzielen, und Sie können sie einfach auf einem Notizblock aufschreiben , zum Beispiel, welcher Wert welcher sein wird , die Skala wird 24 FPS sein oder es werden Frames sein. Okay. Die Linienanimation wird nur 12 Frames umfassen. Du kannst das eigentlich einfach aufschreiben . Okay. Und das wird deine Arbeit wirklich einfach machen. Okay. Und ich empfehle dringend, wenn Sie Figma-Designs verwenden, dann sollten Sie nicht alle Animationen in einer Datei erstellen, weil die Ebenen zu problematisch werden dann sollten Sie nicht alle Animationen in einer Datei erstellen, könnten oder wenn der Kunde tatsächlich das Design, das Ihnen gegeben wurde, wenn jedes Element einen Rahmen hat, richtig, wie wir in einer vorherigen Klasse besprochen haben, dann wird jedes Element in einem Rahmen platziert Sie müssen also nur com , com, com, com comp durchgehen , com comp Aber jetzt ist das hier nicht der Fall weil ich sie einfach in den Stator gesteckt Und dann habe ich das benutzt und Overload verwendet und das in After Effects übernommen , indem ich Straor verwendet habe, anstatt Figma zu verwenden Und dann habe ich dieses Avatar-Bild einfach separat aus Figma exportiert dieses Avatar-Bild einfach separat aus und es dann hier importiert Okay. So habe ich das erstellt, und deshalb habe ich dasselbe Animationsprojekt für alle sechs Animationen verwendet dasselbe Animationsprojekt , die ich für den Kunden gemacht habe. Die anderen Animationen sind ebenfalls sehr ähnlich und einfach. Ich denke also nicht, dass es notwendig ist , sie alle durchzugehen. Aber es gibt dieses Konsistenzelement, das Sie in allen Animationen sehen werden. Wenn ich alle nacheinander abspiele, wirst du den Unterschied nicht sehen können oder es wird keine Variation in der Animation geben. Es wird sehr ähnlich aussehen und es wird Sinn machen, dass sie alle von demselben Kunden oder von derselben Firma stammen alle von demselben Kunden oder von derselben Firma und dass es auf derselben Webseite platziert wird. Ja. Das sind also einige kleine Details, die Sie bei der Animation von Objekten für den Kunden berücksichtigen Okay, das war es für diesen Kurs. Ich treffe dich in der nächsten. 6. 05.Animieren von Masken: In diesem Kurs werden wir lernen, wie man den Schreibeffekt erzeugt, den Sie auf dem Bildschirm sehen können, und ich habe ihn für mehrere Kundenprojekte erstellt, wie Sie sehen können. Das ist in After Effects sehr einfach zu erstellen, aber es ist etwas kompliziert, wenn Sie es in einer spätkompatiblen JSON-Lottie erstellen müssen es in einer spätkompatiblen JSON-Lottie erstellen Lassen Sie uns einfach anfangen und lassen Sie mich Ihnen zeigen, wie das tatsächlich gemacht wird Es gibt also mehrere Möglichkeiten , dies in Lottiefiles zu tun, insbesondere in After Effects Lassen Sie uns einfach weitermachen und unsere neue Komposition erstellen und lassen Sie sich von mir dabei führen Also werden wir eine Komposition mit 1.900 mal 1080 Pixeln erstellen. Und danach werden wir einfach sagen, dass unser Kunde gerade ich bin, weil wir nicht näher darauf eingehen wollen, wie wir gerade wir nicht näher darauf eingehen wollen, wie wir für einen Kunden arbeiten, weil dies nur ein Beispiel ist, um Ihnen zu zeigen, wie Dinge gemacht werden können Also lassen Sie uns einfach die Größe erhöhen und danach werden wir auch die Farbe ändern. Und danach werden wir dies in Formebenen umwandeln, da wir diese bereits besprochen haben, sodass Formebenen in Lottiefiles kompatibel sind Danach gehen wir zu Motion Tools und extrahieren jede Ebene Wie ich bereits erwähnt habe, gibt es mehrere Möglichkeiten, dies zu tun. Eine einfache Möglichkeit, dies zu tun , ist also sehr einfach . Lassen Sie uns einfach nach den Fenstern suchen und dann zum Bedienfeld „ Effekte und Voreinstellungen“ gehen Jetzt suchen wir nach einem Stricheffekt. Lass es uns einfach per Drag & Drop hierher ziehen. Jetzt wählen wir diese Ebene und erstellen dann einfach eine Maske darüber. So können Sie es machen: Klicken Sie auf diese Schaltfläche, und dann klicken wir auf die Maske und erstellen dann eine Ebene. Danach werden wir eine weitere Maske wie diese erstellen . Dies soll Ihnen nur zeigen, wie viele Möglichkeiten Sie haben, diese Ergebnisse zu erzielen oder zu erzielen. Jetzt werden wir alle Masken auswählen und ihre Farbe in Rot ändern , damit wir sie deutlich sehen können. Erhöhen wir einfach die Pinselhärte auf 100. Erhöhen wir einfach diese Größe. Okay. Danach werden wir ein bisschen reinzoomen. Lass uns einfach weitermachen und das animieren. Und wir werden es auf Transparent veröffentlichen, oder? Oder enthülle das Bild. Du kannst sehen, dass, wenn du die Maske auf transparentem Bild zeigen willst , du siehst, dass das passiert. Und sobald Sie das Originalbild für die Enthüllung ausgewählt haben, erhalten wir genau das. Sie können also sehen, dass wir ziemlich einfach einen Schreibeffekt erzielen. Sie können dies verwenden, um einen Referenzpunkt zu erstellen. Erstellen Sie zunächst eine grobe Anleitung für Ihre Animationstypen. Und danach können Sie das an Ihren Kunden senden. Sobald sie es genehmigt haben, können Sie sie wissen lassen, dass sich kleine Fehler wie diese überschneiden werden . Sie sollten das nicht tun. Aber du kannst ihnen erklären, dass dies nur ein grober Überblick über die Lockerung der Sie können diese einfache Technik verwenden , um die gesamte Animation innerhalb von 10 Minuten zu erstellen , und dann , weil die Lottie-Animation länger dauern wird Sie können dies also einfach dem Kunden zeigen und dann dessen Genehmigung einholen Und eine weitere Technik, die man hier anwenden kann, ist, dass es eine andere Methode gibt nämlich lassen Sie mich Ihnen das jetzt zeigen, ich Masken aus der Ebene entfernen kann. Lass uns einfach weitermachen und eine Strichebene erstellen. Darüber hinaus können wir jetzt die Alpha-Mat-Option verwenden. Lassen Sie uns also einfach Alpha-Matte über Ebene legen, und jetzt, nachdem Sie den Strich erstellt haben, müssen Sie hier Trimmpfade hinzufügen. Jetzt werden wir den Trimmpfad animieren. Auf diese Weise können Sie grundsätzlich dafür sorgen, dass die verschiedenen Teile der Animationsebene unterschiedlich beschleunigt werden. Aber im vorherigen Fall konnten wir das nicht tun. Nun, das ist eine weitere Methode, die Sie verwenden können, aber sie ist auch nur für Referenzen nützlich. Dies kann auch in Lottie-Animationen nicht perfekt gerendert werden in Lottie-Animationen nicht perfekt Also lass uns das einfach löschen . Schauen wir uns nun an, was in Lottie-Dateien tatsächlich funktionieren kann Klicken wir einfach auf unsere Ebene und wir werden eine solche Formebenenmaske erstellen Sie können auch die Farbe der Maske ändern, sodass Sie zwischen der Farbe Ihrer Formebene und Ihrer Maskenfarbe unterscheiden können zwischen der Farbe Ihrer Formebene und Ihrer Maskenfarbe unterscheiden . Wir machen weiter und erstellen, erstellen einen Keyframe und gehen dann wie folgt rückwärts. So einfach ist das. Und jetzt kannst du es sehen. Nun, dieser Effekt ist tatsächlich mit Lottie kompatibel Danach können Sie eine weitere Maske erstellen. Klicken Sie hier, um eine Maske zu zeichnen Nachdem Sie die Maske erstellt haben, müssen Sie nur noch diese animieren. Gehen wir einfach Bild für Bild rückwärts, denn wenn wir vordere Wörter tatsächlich in der Timeline animieren, wir nicht in der Lage sein, so viele dieser Ziehpunkte zu handhaben , was wir jetzt sehr einfach handhaben können, weil wir jetzt einen Griff nach dem anderen bearbeiten müssen, aber das wird nicht der Fall sein, wenn wir in die Vorwärtsrichtung gehen Es ist also besser, es so zu machen. A Beim ersten K-Frame musst du das einfach aus deiner Form nehmen. Auf diese Weise ist der erste K-Rahmen immer sauber. Nehmen wir nun an, wir möchten, dass die erste Ebene fertig ist, und dann beginnt der Rest von B mit der Animation Also schneiden wir die nächste Maske ab und machen weiter und platzieren sie hier so Und jetzt kannst du sehen , dass es animierend ist. Diese Methode funktioniert wirklich gut. Jetzt habe ich mehrere Animationen für Kundenprojekte erstellt . Jetzt zeige ich Ihnen, wie ich diese erstellt habe. Sie werden feststellen, dass es einige kleine Lücken und Probleme wie dieses gibt. Wir werden diese in einem sehr komplizierten Kurs behandeln , der eine separate Klasse sein wird. Deshalb werden wir das in einem zukünftigen Kurs ausführlich besprechen. Lassen Sie uns einfach weitermachen und uns unsere anderen Projekte ansehen. Das ist also ein Revibe-Logo, Splashscreen-Animation, die ich erstellt habe Sie können die Logo-Animation sehen, die ich erstellt habe. Wie Sie sehen können, verwende ich dieselbe Technik, die ich Ihnen gerade gezeigt habe. Da ist also dieses R, und das animiert tatsächlich von unten nach oben Jetzt musst du eines im Hinterkopf behalten: Wie du dir selbst ein R auf ein Exemplar schreiben würdest , wenn du es schreibst, stell dir vor, du schreibst das, du weißt schon, so So werden wir es also animieren. Also zuerst kommt das R von unten und dann die zweite Zeile Ich habe dafür eine separate Ebene verwendet, weil ich separate Kontrolle über die einzelnen Ebenen haben wollte , und Sie können sehen, dass ich die Animation des Umkehrpfads auch hier auf der Maske gemacht Animation des Umkehrpfads auch hier auf der Maske Und danach gibt es auch diese dritte Ebene. Und übrigens, allen Ebenen steht der gesamte Pfad dazu zur Verfügung. Sie können das auch entfernen, wenn es mehr als einen Pfad gibt, aber wenn es einen Pfad gibt, können Sie ihn einfach dort belassen. Ich kann das nur empfehlen, denn was tatsächlich passiert, ist, dass wir, sobald Sie alles animiert haben, die Ebene einfach vom Solo trennen Und Sie werden hier feststellen , dass es eine kleine Lücke gibt. Was nun tatsächlich passiert, ist, wenn ich den vorherigen Pfad gelöscht habe , sagen wir einfach, alles wurde gelöscht. Hier gab es keine Daten, nur diese Daten, dann konnte man diesen Keyframe über dieser Ebene nicht wirklich überlappen , um das Problem zu beheben Sie müssen also diese kleinen Dinge berücksichtigen, bevor Sie animieren Nun, da ich das schon mehrmals gemacht habe und mehr als 100 Projekte wie dieses gemacht habe , weiß ich diese Dinge bevor ich die Animation erstelle Aber wenn Sie einmal angefangen haben, müssen Sie diese Dinge berücksichtigen, bevor Sie die Animationen erstellen. Danach haben wir die E-Animation. Welches ist zweiteilig. Das ist also der letzte Teil, und dann ist da noch dieser E-Teil , der genauso gemacht wird, wie man ein E schreiben würde . Also ziemlich einfach zu machen. Auch hier ist nichts allzu kompliziert . Und danach haben wir eine einfache. Danach haben wir KI, was eigentlich nur durch Animationen mit vertikaler Skala erreicht wird , weil wir die Pfadanimation hier nicht machen mussten. Das war nicht nötig. Dann haben wir B und danach haben wir E. T E ist eigentlich ein Duplikat von diesem E. Das ursprüngliche E sitzt tatsächlich hier. Ich habe das nur als Referenz verwendet, damit ich das vorherige genau dorthin ziehen konnte , wo es hingehört. Du siehst, dass alles perfekt zusammenpasst, oder? Also ist alles da, wo es sein sollte. Deshalb musst du die Referenzen auch in deinem Computer behalten Sie können es herausnehmen, nachdem das Kundenprojekt genehmigt wurde. Sie können auch die letzte Ebene lesen. Oder wenn Sie auch die Sichtbarkeit der Ebene ausschalten können, sie tatsächlich nicht gerendert, sodass auch die Lottie-Json-Datei nicht vergrößert wird Es läuft also völlig reibungslos. A, falls Sie befürchten, dass, wenn die Keyframe-für-Keyframe-Animation mehr Daten hinzufügt, dies tatsächlich nicht der Fall ist, weil wir die Autotrace-Funktion hier nicht verwenden, Deshalb ist es überraschend , dass die Dateigröße nicht erhöht wird, wenn wir die Auto-Trace-Funktion nicht verwenden und die Einzelbildanimation selbst durchführen und die Einzelbildanimation selbst und die Einzelbildanimation Es passiert also nur, wenn Sie den Autotrace-Effekt erstellen, oder? Sie machen es nicht Bild für Bild alleine. Und eine Sache , die Sie beachten sollten, was wirklich wichtig ist, ist wenn Sie mehrere anpassen möchten, wie Sie es bei dieser Einzelbildanimation gemacht haben, jetzt möchten Sie sie erhöhen oder verlangsamen. Es ist eine Geschwindigkeit. Sie können die Keyframes einfach bei gedrückter Alt-Taste ziehen und ziehen , um auch die Geschwindigkeit anzupassen So erzeugen Sie also den Schreibeffekt. Jetzt wollte ich Ihnen auch einige wirklich wichtige Beispiele zeigen auch einige wirklich wichtige Beispiele denn manchmal ist Vektor nicht immer die Antwort. Nun, was meine ich damit? Hier ist ein weiteres Projekt eines Kunden, das ich Ihnen zeigen möchte, weil es etwas wirklich, sehr Wichtiges hervorhebt. Der Kunde hat diese Datei tatsächlich geteilt und er wollte diese Vektoranimation, aber ich habe diese Methode nicht verwendet. Nun, warum? Denn wenn Sie auf der Illustrator-Datei feststellen, es sich tatsächlich um einen Pinsel handelt Jetzt werden die Pinsel nicht wirklich in, Sie wissen schon, exportiert , nicht wie bei einem Strich Also musste ich die Datei im Grunde erweitern. Eigentlich hat der Kunde die erweiterte Datei bereitgestellt, aber es spielt keine Rolle, ob er auch eine Konturdatei bereitgestellt hat, da Pinsel mit der Overload-Methode nicht wirklich in After Effects übertragen werden. Sie übertragen lediglich einen Strich. Und wenn ich diese Formebene verwende, ist das, was sie jetzt tatsächlich tut, ich habe versucht, das zu tun, aber mein PC war tatsächlich sehr hinterherhinkt weil jedes einzelne Element hier drüben, wie diese Ebene, jede Ebene tatsächlich zu einer separaten Ebene innerhalb von After Effects wird zu einer separaten Ebene innerhalb von After Effects Diese eine Ebene erzeugt also tatsächlich mehr als 200 Ebenen. Deshalb ist dies keine optimale Lösung. Aus diesem Grund habe ich tatsächlich alle Ebenen geschlossen und eine nach der anderen, was ich tatsächlich getan habe, ist jeweils eine Ebene offen zu lassen, eine Ebene sichtbar, und dann habe ich Strg-A-Verschiebungen gedrückt, und dann habe ich diese PNG-24-Transparenz erhalten, Datei daraus gemacht, gespeichert. Und das habe ich mit jeder einzelnen Ebene einzeln gemacht. Und als das alles erledigt war, habe ich diese Schichten so genommen, all diese getrennten Teile. Lass mich das einfach schließen und es dir zeigen. Ich ziehe das einfach hierher. Ich werde eine neue Komposition erstellen. Ich werde all diese auswählen und Ihnen dann zeigen , dass wir alles am selben Ort haben Danach war das, was ich getan habe, ziemlich einfach. Lass uns einfach alle Ebenen ausschalten und lass es mich dir zeigen. Ich habe gerade eine Maske erstellt, einfach so. Und auf diese Weise können Sie auch die Geschwindigkeit und die Lockerung ziemlich einfach anpassen auch die Geschwindigkeit und die Lockerung ziemlich einfach Sie können die Lockerung also einfach so vornehmen, wie Sie möchten, oder? Also liegt es an dir. Es liegt ganz bei dir, wie du mit der Geschwindigkeit und der Lockerung umgehen willst Und auch, weil die Größe der Leinwand wirklich klein war, was ich Ihnen zeigen kann, nämlich 400 mal 200 Pixel Die Ebenengröße ist also nicht wirklich riesig. Die gesamte Leinwand hat, wie Sie sehen können, nur eine Höhe von etwa 200 Pixeln. Diese Ebene wird also höchstwahrscheinlich nur etwa 50 Pixel oder sogar weniger groß sein. Deshalb waren die Dateigrößen wirklich optimal. Also habe ich diesen Ansatz verwendet, anstatt den anderen zu verwenden. Wir haben uns hier zum Beispiel nicht für den Vektor-Ansatz entschieden, und er ist wirklich gut. Die Animationen laufen wirklich flüssig und auch der Kunde wollte eigentlich etwas , weißt du, das wirklich reibungslos läuft. Das ist der Sinn der Erstellung von Lottie-Animationen. Sie müssen nicht verzögert sein. Sie können nicht groß oder schwer sein. Und lassen Sie mich Ihnen jetzt die endgültigen Größen der Datei zeigen , da es 18 KB sind, es sind 150, es sind 150. Es sind 160 6 Kilobyte und es sind 140 3 Und lassen Sie mich Ihnen auch andere Animationen zeigen , damit Sie sich auch diese ansehen können Sie können sehen, dass auch diese auf die gleiche Weise erstellt werden. Also ziemlich einfach das Gleiche gemacht. Auch in all den anderen Animationen, oder? Und dann kannst du es einfach vorab kompilieren und es auch zu einem beliebigen Computer mitnehmen Und der Kunde wollte die Skalierbarkeit nicht , weil sie irgendwo auf seiner Website als Signatur verwendet werden sollten Also verwendeten sie es als sehr kleine Größen. Also, wie Sie sehen können, sieht das wirklich toll aus. Nun, es gibt noch eine weitere Einschränkung , die ein Projekt hatte, die ich Ihnen zeigen möchte. Lass mich dir zuerst die Animation zeigen. Schau dir diesen an. Sie können also sehen, dass sich das Design sehr skizzenhaft anfühlt und sie tatsächlich ziemlich schlecht gemacht wurden Lassen Sie mich Ihnen zeigen , was ich damit meine. Leider habe ich die Designdatei nicht , also lassen Sie mich Ihnen nur das Design innerhalb der Animation zeigen , wie die Animation hier tatsächlich kaputt geht. Lassen Sie mich Ihnen einfach zeigen, wie diese Dinge angeordnet sind und wie schlecht das Design gemacht wurde, Sie können sehen, dass diese Hand alleine ist, aber Sie können sehen, dass die Teile wirklich sehr kaputt sind. In diesen Fällen müssen Sie also einfach mit dem arbeiten, was Sie haben. Darüber kann man sich nicht wirklich beschweren. Du musst für diese Dinge eine Lösung finden. Sie können also sehen, dass sehr minimalistische Animationen gemacht wurden, weil ich nur die Dinge animiert ich nur die Dinge animiert habe , die dem Ganzen Bedeutung verliehen Außerdem wollte ich aufgrund des Zeitungsstils einen sehr minimalistischen Ansatz beibehalten Da ist also diese Vogelanimation, die ziemlich einfach ist Es gibt nur die Rotation auf der Ebene und dann ist da nur noch der Vogel, der auf und ab geht. Das ist es. Und dann ist da noch ein Wimpernschlag Wir haben die Blinzeln auch in der vorherigen Klasse besprochen , also kannst du dir das ansehen Und du kannst sehen, dass es hier nur Blütenbläschen gibt. Abgesehen davon blinkt diese Dame einfach mit den Augen, genauso Die Augenbrauen haben nur einen kleinen Moment , weil sie auch eine separate Schicht waren Und abgesehen davon gibt es auch ein bisschen Handmoment an beiden Händen. Und dann ist da noch diese Katze, die sie animiert, das Ohr wurde tatsächlich getrennt, also habe ich darauf geachtet, einige Details darin zu animieren Und dann war dieses Ohr wirklich schlecht gemacht , weil es Teil der Kopfschicht ist Es gibt also nur einen Weg. Lass mich es dir einfach zeigen. Sie können sehen, dass der gesamte Kopf davon angetrieben wird. Deshalb habe ich die Bewegung minimalistisch gehalten. Wenn ich zu viel Animation hinzufügen würde, könnte ich den Ankerpunkt einfach hierher bringen und im Grunde einfach, du weißt schon, alles der Ebene überordnen Aber wenn es zu viel Bewegung gäbe, würde das die gesamte Szene ablenken , weil überall sonst nicht viel Animation passiert Also wollte ich die Animation einfach sehr minimalistisch halten und habe der Katze Leben eingehaucht, indem ich einfach die Ohren animiert habe, weil Katzen die Angewohnheit haben , das ständig zu tun Und abgesehen davon gibt es nur einen Augenmoment Das ist es. Ziemlich einfach. Was die andere Hälfte der Abbildung angeht , die ich Ihnen gezeigt habe, der rechte Teil, ist das, was ich gemacht habe, auch wirklich sehr einfach. Sie können sehen, dass es da diesen Roller gibt , der anscheinend zu annullieren ist und der einfach springt , als wäre der Motor angelaufen Und auf der anderen Seite sind da einfach diese Kaktusglieder, die nur eine Rotationsanimation machen, ziemlich Und abgesehen davon gibt es einfach diese Blattanimationen, die einfach vom Wind in der Umgebung geschwungen werden einfach vom Wind in der Umgebung Das ist alles, und es gibt nur subtile Animationen auf den Wolken, die ebenfalls als Loop abgespielt werden können. Also all diese Animationen, beide Animationen sind nur Loop-Animationen , deren Start- und Endpunkt identisch sind Der Sinn Ihnen all das zu zeigen, ist, dass wir manchmal nicht die optimalen Lösungen oder die Situation haben , um das zu geben, was wir tatsächlich liefern wollen Und in diesen Fällen müssen wir einfach mit dem arbeiten, was wir haben. Nun, es ist nicht so, dass wir dieses Zeug nicht auch animieren könnten. Das können wir Aber die Sache ist, dass wir mit Marionettenstiften einige wirklich großartige Ergebnisse erzielen können , aber das ist nicht wirklich die optimale Lösung, wenn Sie mit Lottiefiles arbeiten , weil Marionettennadeln in Lottiefiles nicht funktionieren nicht Sie müssen diese Dinge also berücksichtigen bevor Sie etwas animieren oder erstellen, und Sie sollten diese Dinge mit Ihrem Kunden besprechen, bevor Sie mit dem Projekt beginnen bevor Sie mit dem Das ist es also im Grunde. Ich hoffe , dass du in diesem Kurs etwas Neues lernst, und wir sehen uns im nächsten. 7. Outro: bin stolz auf Sie alle, dass Sie es bis zu diesem Kurs geschafft haben, und herzlichen Glückwunsch an Sie alle, dass Sie den Advanced Lot Files Guide abgeschlossen Nun, es wird zwei Kurse geben die wirklich sehr bald verfügbar sein werden, und es werden einige wirklich spannende Aufgaben auf Sie zukommen, und Sie werden in der Lage sein, einige hervorragende Dienstleistungen anzubieten , nachdem Sie sich diese Kurse angesehen haben. Jetzt seid ihr bereit, Late Services für eure Kunden einzurichten, und ich wünsche euch alles Gute. Lassen Sie mich wissen, wenn Sie Hilfe benötigen , und wenn Sie irgendeine Art von Beratung benötigen, wenden Sie sich wirklich auf Instagram an mich, wenn Sie irgendeine Art von Beratung zu Ihren Kundenprojekten benötigen , wenn Sie irgendeine Art von Beratung zu Ihren Kundenprojekten Ich helfe Ihnen gerne weiter. Stellen Sie sicher, dass Sie auch einige Arbeiten in der Klasse einreichen und auch meine Arbeit überprüfen. Ich würde gerne von euch hören , wie ich diese Kurse mache, und auch erfahren, welche Dinge ich in meinen Klassen verbessern kann. Ich wünsche Ihnen allen viel Glück bei der Erstellung perfekter Animationen für Ihre Kunden, und Bold Bite wird sehr, sehr bald mit aufregenden neuen Projekten zurück sein . Ich danke Ihnen vielmals. Pass auf dich auf. Tschüss.