Der Pate von Lottiefiles

1. Einführung: Hallo und willkommen zum Kurs. In diesem Kurs werden Sie viele neue Techniken erlernen. Es wird dringend empfohlen, dass Sie sich die vorherigen Kurse ansehen, bevor Sie weitermachen da wir viele neue Techniken für Fortgeschrittene behandeln werden , die Sie zu den besten 1% Lottie-Entwicklern machen werden Okay? Und wie du weißt, bin ich Bolt Bite und ich wurde vom LatifilsOfficial Discord-Turnier zum Ersteller von LatiflesTurnieren zertifiziert LatifilsOfficial Discord-Turnier zum Ersteller von LatiflesTurnieren , und ich bin Und ich habe mehrere Badges, die mir von LottieFiles selbst auf meiner Contra gegeben mir von LottieFiles selbst wurden, und ich habe in den letzten fünf Jahren Lottie-Animationen erstellt , und ich werde in diesen Kursen einen Moment berichten , in dem es einen Fehler in einer Datei gab , über den einen Moment berichten , in dem es einen Fehler in einer Datei gab , der nicht bei 100 Projekten vorkam, sondern nur einmal. Dieser Kurs steckt also voller neuer Techniken, wie ich mehrere komplizierte Charakteranimationen für mehrere Projekte erstellt habe wie ich mehrere komplizierte Charakteranimationen für mehrere Projekte erstellt habe. Wir werden lernen, wie und was ein animierter Splash-Screen ist und wie Sie einen für mehrere mobile Apps erstellen können . Und wir werden uns auch einige der sehr komplizierten Projekte ansehen , die ich für Kunden erstellt habe , damit Sie bereit sind, weiterzumachen und der beste Ein-Person-Entwickler in iltiflePlatform zu werden der beste Ein-Person-Entwickler in iltiflePlatform Lassen Sie uns einfach weitermachen und uns darauf einlassen. 2. 01.Was ist ein Splash-Screen?: In diesem Kurs werden wir lernen, was ein Splash Screen ist Lassen Sie uns einfach weitermachen und herausfinden, was Splash Screen ist. Also, was ist Splash Screen Android? Ich habe gerade Android hinzugefügt , weil ich dir einige Dinge zeigen wollte. Lassen Sie uns zunächst einfach weitermachen und auf den ersten offiziellen Link für Android-Entwickler von Android Development klicken den ersten offiziellen Link für Android-Entwickler . Sie werden hier also sehen, dass es einige Hinweise gibt. Ich werde nicht auf die technischen Details eingehen, weil der Kurs dann zu lang sein wird. Im Grunde genommen können Sie hier alle Daten lesen, und ich werde im Grunde meine Erfahrungen teilen, denn bis zum Zeitpunkt dieser Aufnahme habe ich über 100 , um genau zu sein 137 animierte Begrüßungsbildschirme für mobile Apps erstellt . Lassen Sie uns also einfach weitermachen und uns ansehen , was ein Splash-Screen ist. Sie werden sehen, dass hier eine leichte Animation vor sich geht. Nun, das ist ein Splash-Screen. Etwas, das erscheint, wenn Sie eine App auf einem Telefon öffnen, entweder iOS oder Android, dann gibt es eine kurze Animation, die im Grunde genommen eine Art Logoanimation ist, und Sie können dieselbe Animation als Logoanimation verwenden, da Valvo das jetzt ausführlich besprechen wird, und Sie können diese Animationen mit dem Logo oder dem Typografie-Logo des Kunden erstellen dem Logo oder dem Typografie-Logo des Kunden , das er Ihnen zur Verfügung stellt und Sie können in dieser Kategorie einige wirklich gute Dienste anbieten, weil hier viel Potenzial steckt, und jeder versucht jetzt, wissen Sie, Motion-First-Apps zu entwickeln , und es ist sehr üblich geworden, dass die Leute sie verwenden. Lassen Sie uns einfach lernen, was notwendig ist, um Lottie zu animieren, einen Splash-Screen zu erstellen Zuallererst sollte die Animation 2,5 Sekunden lang sein, oder sie kann bis zu 3 Sekunden dauern. Nun, das sind eigentlich die Knoten, und es wird dringend empfohlen, dass die Animation etwa 2,5 Sekunden dauert. Aber es gab Zeiten denen der Entwickler mich um eine Animation gebeten hat , die länger als 5 Sekunden dauerte. Es gibt also auch einige Ausnahmen. Das steht hier vielleicht nicht geschrieben, aber der Entwickler kann das auch tun. Wenn Sie also ein Kunde danach fragt, können Sie definitiv auch längere Animationen erstellen , da Einbetten der Animation in die App dem Entwickler Kopfschmerzen bereitet Ihre Aufgabe ist es, etwas zu schaffen, das tatsächlich funktioniert. Das ist es. Und wir haben in früheren Kursen viele Techniken behandelt , und du weißt inzwischen alles, und dieser Kurs gehört zu den besten 1% -Entwicklern. Deshalb werden wir nicht darauf eingehen, welche Funktionen unterstützt werden und nicht, weil diese bereits in den vorherigen Kursen erklärt wurden. Lassen Sie uns einfach weitermachen und lassen Sie mich Ihnen zeigen, wie ich einen animierten Splash-Screen erstellt habe. Zuallererst kann ich einfach eine Vorschau einiger meiner Arbeiten anzeigen. Also hier ist eine Animation, die ich für unseren Kunden erstellt habe. Dies ist nur ein Studienfall. Es wird dringend empfohlen , dass Sie diese Prozesse auch durchlaufen diese Prozesse auch , wenn Sie an einem Kundenprojekt arbeiten. Und Sie können sehen, dass die Animation hier ist. Nun, das habe ich für die endgültige Animation für den animierten Splash Screen erstellt . Hier ist ein weiteres Projekt, bei dem ich diesen animierten Splash Screen erstellt habe . Wir haben uns in früheren Kursen ausführlich mit der Animation von Symbolen befasst, deshalb werden wir dort nicht zu sehr ins Detail gehen , weil es wirklich einfache Dinge sind. Und dann gibt es natürlich Modellanimationen, nur um den neuen Kunden zu zeigen , wie ihre Animation am wahrscheinlichsten aussehen würde. Okay. Und dann ist da noch diese staatliche Seite auf der ich On-Boarding-Animationen erstellt habe. haben wir uns auch mit Charakteranimationen In der Mittelklasse haben wir uns auch mit Charakteranimationen befasst, also können Sie sich das ansehen und ja, das ist es im Grunde. Da ist der animierte Bildschirm. Und Sie können sehen, dass ich zwei Varianten erstellt habe, eine für ihre Website und eine für ihre mobile App Das kann also je nach Fall auch passieren . Sie müssen zwei Wörter erstellen und manchmal. Schauen wir uns also einfach an, wie ich diese Animationen erstelle. Ich werde einfach weitermachen und meine Datei öffnen. Okay, wir haben die Datei geöffnet. Lassen Sie mich Ihnen hier etwas wirklich Wichtiges zeigen , nämlich in den meisten Fällen dass Sie in den meisten Fällen die Animation auf einer quadratischen Leinwand erstellen werden . Nun, das ist in dieser Datei nicht der Fall, aber lassen Sie mich Ihnen eine andere Datei zeigen , um Ihnen ein weiteres Beispiel zu geben. Nun, das ist eine wirklich nette Fallstudie. Also lass uns zuerst diesen durchgehen. Okay, das ist also unsere quadratische Animation, okay? Und was im Grunde tatsächlich passieren wird, ist, dass es wirklich wichtig ist, zu bedenken, dass der Kunde diese Animation auch als Logoanimation verwenden kann . Sie können ihnen also einfach auch ein MP 4-Format dieser Dateien zur Verfügung stellen und sie so grafisch darstellen, dass Sie einen Splash-Screen plus eine Logoanimation erstellen, und Sie können die Animation bei Bedarf anpassen Und das ist es im Grunde. Sie können beispielsweise ein Logo erstellen. Wenn das Logo beispielsweise dieses Feld wäre, dieses Feld können Sie daraus den animierten Startbildschirm erstellen und Sie können die Logoanimation dieses Logos, richtig, dieses Typografie-Logos Lassen Sie uns das einfach durchgehen und wir können uns ansehen, wie und welchen Denkprozess ich bei der Erstellung dieser Animationen durchlaufe Nun, das sind reine Kurse und Kurse zur UI-Animation, sodass wir nicht auf die Einzelheiten der Animationsprinzipien eingehen werden. Wenn du wirklich willst, dass ich das mache oder einen separaten Kurs dazu erstelle, dann lass es mich wissen. Aber das ist eine separate Diskussion. Oder getrennt. Also hier ist dieses Feld und es ist eine SVG-Ebene. Und danach, an diesem Punkt, löst sich die Ebene im Grunde auf. Diese Schicht wird also genau an diesem Punkt abgebaut, oder? Und danach haben wir diese vier verstreuten Teile. Nun, das sind nur Masken, die zu vier Teilen hinzugefügt wurden. ist Opazität im Gange, sie wird Wie Sie sehen können, ist Opazität im Gange, sie wird immer schwächer, nicht wahr Und dann gibt es im Grunde auch nur das Position-Keyframe Abgesehen davon, um der Animation mehr Wirkung zu verleihen, habe ich zusätzlich ein paar Teile mit rechteckigen oder dreieckigen Formen hinzugefügt ein paar Teile rechteckigen oder dreieckigen Formen die das Gefühl von Konfetti vermitteln Und abgesehen davon gibt es nur diese Splash-Animation, bei der es sich nur um Linien handelt, die mit dem Trimpfad animiert Ziemlich einfaches Zeug, nichts allzu Kompliziertes passiert. Konzentrieren wir uns jetzt auf den Charakter oder Entschuldigung, die Schreibanimation, was wir hier haben. Schauen wir uns das jetzt auch an. Also haben wir diese Schreibeffekt-Animation hier drüben. Und Sie werden sehen, dass es einige Bögen gibt, Bogenanimationen, bei denen es sich nur um sekundäre Bewegungen handelt, die tatsächlich später hinzugefügt Zuerst müssen Sie also nur den Animationseffekt beim Schreiben ausführen Und danach musst du nur noch ein paar Grundlagen zeichnen, mach einfach weiter. Sie müssen dieses Zeug nicht in Illustrator entwerfen. Sie können einfach Ihr Stiftwerkzeug auswählen, einfach einen einfachen Pfad zeichnen und dann Trimmpfade darüber hinzufügen Und das ist so ziemlich alles. Und dann können Sie darüber hinaus auch Trimmpfade hinzufügen darüber hinaus auch Trimmpfade Und wenn Sie feststellen, dass dieser grüne Schreibeffekt hinter unserer Animation auch dieser grüne Schreibeffekt Also was ist das? Lassen Sie mich zunächst diese Ebenen sperren , damit wir uns darauf konzentrieren können. Also haben wir unsere Ebene hier drüben, und das ist unsere Animation in lila Farbe, wie Sie sehen können. Also im Grunde habe ich die gesamte Animation erstellt zuerst die gesamte Animation erstellt und dann eine Kopie davon erstellt, okay? Und die doppelte Kopie davon werden Sie tatsächlich hier sehen. Dass das gesamte Duplikat tatsächlich unten ist und sich grün anfühlt. Lass mich einfach weitermachen und auf eine andere Ebene klicken , damit ich sie dir zeigen kann. Lass es mich einfach alleine machen. Siehst du? Also habe ich im Grunde die gesamte Animation erstellt, sie zuerst dupliziert und dann einfach die gesamte Animation zurückgebracht . Ein Frame, das war's. Dann ändere ich einfach die Farbe in Grün, und jetzt gibt es diesen kreativen Schreibeffekt und hat aufgrund der grünen Füllfarbanimation dahinter viel mehr Persönlichkeit hinzugefügt aufgrund der grünen Füllfarbanimation dahinter viel mehr Persönlichkeit . Und das ist es im Grunde. Die gesamte Animation ist abgeschlossen, und jetzt machen wir weiter. Sie werden sehen, dass die Animation hier 4 Sekunden dauert und die Komposition quadratisch ist. Was ist nun der Vorteil, die Animation in einem Quadrat zu erstellen? Zuallererst, wenn die Animation in einem Quadrat erstellt wird, können Sie mich meistens von den Entwicklern fragen dass sie eine Animation in einem Quadrat benötigen, und die Animation sollte einen negativen Leerraum haben Die Animation sollte also, sagen wir, 500 mal 500 Pixel groß sein, es sollte ein Pixelquadrat geben, und die Animation sollte sich darin befinden, sodass genügend negativer Raum vorhanden ist Und manchmal verlangt der Kunde , dass er die vertikale Option benötigt, und das ist das vertikale Standardformat für Rollen, und er fordert Dynimation in dieser Was Sie also im Grunde tun können, ist, es hier per Dragondrop abzulegen. Lass uns einfach weitermachen und es spielen. Sie können sehen, dass die Animation sehr gut hineinpasst. Wenn du es neu anordnen musst, kannst du es im Grunde so per Drag-Drop ablegen, oder? Also kannst du es wirklich, wirklich schön neu anordnen. Wenn du noch andere Probleme hast, kannst du das Ganze einfach vorab zählen, oder es ist schon vorgezählt wie hier. Sie können einfach eine weitere quadratische Komposition erstellen und sie einfach verschieben. Richten Sie es nach Belieben aus, abhängig von Ihrer Größe, und Sie können es auch verkleinern , da es sich um Vektoren handelt, sodass sich dies nicht auf Qualitätsunterschiede auswirkt . Und wenn sie es auch als MP für Animationen verwenden wollen, dann können Sie im Grunde genommen sagen, dann können Sie im Grunde genommen sagen, dass sie es auch auf YouTube hinzufügen werden . Sie können einfach eine FHD-Version erstellen und dann das Quadrat im Grunde hierher ziehen Dann ist es das. Das kannst du einfach rausgeben. Sie können es auch vergrößern. Wenn du willst. Sie können den Stern aktivieren , damit die Animation knusprig bleibt Sie können auch das Vier-K-Format angeben, es verdoppeln und Sie können es auch senden Lassen Sie uns jetzt einfach weitermachen und einen anderen animierten Splash-Screen ansehen , für den ich ein sehr ähnliches Konzept erstellt habe, aber nur um Ihnen zu zeigen , wie Sie so viel Persönlichkeit hinzufügen können , denn auch wenn Sie nicht mehrere Effekte haben, können Sie Ihrer Animation trotzdem viel Persönlichkeit hinzufügen , genau wie ich es Ihnen im vorherigen Projekt gezeigt habe und jetzt in diesem eins. Im Grunde ist da diese Animation, und du wirst sehen , dass unser Hauptcharakter eine Menge Squash, Stretch und Vorfreude hat. Auch der Rest der Animation folgt , weil diese Animation so viel Wirkung erzeugt und die anderen davon beeinflusst, dass sie da rauskommen Und dann gibt es Squash und Stretch , ein weiteres Animationsprinzip, und dann gibt es nur noch Sekundärbewegungen Die Sekundärbewegung wird also am Ende tatsächlich hinzugefügt, wie Sie hier sehen können, genauso wie ich Ihnen gezeigt habe, dass dies eigentlich die Überarbeitung oder so genannte grundlegend überarbeitete Version des Konzepts ist genannte grundlegend überarbeitete Version des oder einige zusätzliche Details hinzugefügt wurden Sie können also sehen, dass diese auch später hinzugefügt werden können. Du musst nur ein paar Linien zeichnen und das war's. Und es hängt auch der Art des Gefühls der Marke und auch von der Zielgruppe ab, welches Gefühl Sie mit der Animation erreichen möchten. Also musst du auch diese Dinge im Hinterkopf behalten. Okay, also ziemlich einfaches Zeug. Es geht nichts allzu Kompliziertes vor sich, das ich hier erklären sollte. Also lass uns einfach zum nächsten übergehen, was okay ist, was okay ist, also dieser ist im Grunde genau das Gleiche, animierter Splash-Screen. Ein sehr einfaches Konzept. Sie können sehen, dass wir hier nur die Farbe der Ebene ändern , und dann gibt es nur eine maßstabsgetreue Animation mit nur einem gewissen Versatz zu den Ebenen. Das ist im Grunde alles. Sehr einfaches Zeug. Das ist wirklich wichtig, um KSU zu zeigen , dass der Client in den meisten Fällen auch die dunkle und helle Version der App anfordern kann , je nach dem Thema des Mobilgeräts des Benutzers, vielleicht, oder vielleicht können Sie in die Einstellungen der App gehen und auch den Dunkel- oder Hellmodus der App ändern Das ist also die dunkle Version, oder? Und dann haben wir dieselbe Animation. Sie können im Grunde einfach sehen , dass die Animation dieselbe ist, wir haben nur unterschiedliche Farben. Nun, es ist wirklich wichtig, dass Sie die Datei duplizieren oder kopieren und einfügen. Sobald dieses Konzept genehmigt ist, ist die Animation genehmigt, alles, Sie müssen nur die Datei duplizieren und dann einfach die Farben ändern. Nun, warum ich das empfehle ist wirklich ein grundlegendes Konzept , denn wir haben die gesamte Animation hier erstellt. Nehmen wir einfach an, dass der Kunde das auch in vier K, in zwei K auch im Vertikalformat, auch im quadratischen Format und auch im Querformat, also auch im vollen Format, w, angefordert vier K, in zwei K auch im Vertikalformat, auch im quadratischen Format und auch im Querformat, also auch im vollen Format, w, hat. Was Sie also im Grunde tun können, ist etwas ganz Einfaches, nämlich, Sie erstellen einfach die Animation. Und wenn der Kunde einige Änderungen wünscht, müssen Sie diese Änderungen nur hier vornehmen. Da es sich um eine Vorkomposition handelt, die zu diesen COMs hinzugefügt wurde, werden diese Änderungen hier automatisch hinzugefügt. Das spart Ihnen also eine Menge Zeit. Und wenn das alles erledigt ist , haben Sie eine Version für mehrere COMs erstellt Wenn Sie diese Datei duplizieren würden, wären diese COMs bereits in der anderen Version erstellt Sie müssen also nur noch einmal in eine Komposition gehen und dann einfach die Farben ändern, und die gesamte Light-Version wäre ebenfalls fertig Dies sind also nur einige Tipps , mit denen Sie jede Menge Zeit sparen können Es gibt eine sehr wichtige wichtige Sache, die Sie beachten sollten, nämlich dass ein Kunde manchmal auch das AVD-Format anfordern kann , aber das ist mir nur zweimal passiert, als aber das ist mir nur zweimal passiert ich 100 animierte Begrüßungsbildschirme erstellt habe Der Client arbeitet tatsächlich mit der JSON-Datei, aber nur zweimal hat der Entwickler auch diese Version angefordert Also nur für den Fall, dass dich ein Entwickler fragt, dass du nicht Panik verfallen solltest, einfach diese Option wählen und ihm diese Version schicken. Okay, also ziemlich einfaches Zeug, nichts allzu Kompliziertes. Also das ist es im Grunde. Und ich hoffe, du lernst in diesem Kurs etwas Neues. Wir sehen uns im nächsten. 3. 02.Animationen für Maskottchen: Und okay, in diesem Kurs werden wir besprechen, wie Sie Maskottchen-Animationen für Ihre Kundenprojekte erstellen Maskottchen-Animationen für Ihre Nun, wenn Sie wissen, dass Duolingo ein sehr bekanntes Beispiel ist, und wenn Sie ein UI-Motion-Designer sind, müssen Sie Duolingo bereits kennen Lassen Sie uns nun auf ein paar Beispiele eingehen , wie ich diese erstellt Okay, schauen wir uns einfach ein Projekt an, das ich für Maro-Eltern gemacht habe handelt es sich um eine IOS-App, die gerade live ist Lassen Sie mich Ihnen also zuerst die Animationen zeigen, und dann schauen wir uns die Fallstudie an Das sind also mehrere Ausdrücke desselben Charakters. Nun, es war wirklich eine Herausforderung , weil der Charakter keinen Mund, keine Nase keine Augenbrauen hat, also ist der Charakter sehr minimalistisch Das ist also im Grunde für Kinder mit psychischen Problemen Das sind also mehrere Posen der Animation. Okay. Okay, lassen Sie uns in die Datei gehen und uns die Animation ansehen. Also lass uns einfach weitermachen und unseren ersten öffnen. Ich werde diesen einfach kürzen , damit wir uns auf unsere Animation konzentrieren können. Okay. Schauen wir uns einfach an, wie diese erstellt werden. Das sind also im Grunde nur Formebenen. Die Charakterdesigns wurden in Illustrator erstellt, und Sie können sehen, dass es hier nur um Ihre Fähigkeiten als Animator geht Illustrator erstellt, und Sie können sehen, es hier nur um Ihre Fähigkeiten , weil nichts allzu Kompliziertes vor sich geht und Sie mit dem arbeiten müssen, womit Sie arbeiten müssen Und das ist es im Grunde. Die Animation enthält nicht zu viele Details oder zu viel Arbeit. Das sind nur einfache Ebenen, die gerade animiert werden, und das war's. Okay? Und lass mich einfach den Hintergrund sperren. Und du wirst sehen, dass der Schüler da ist. Lass es mich einfach langsamer machen. Okay. Und Sie können sehen, dass es nur diesen Schüler gibt , der quasi das rechte Auge hat , der quasi animiert wird . Und danach haben wir diesen wirklich einfachen Augenblinzeln, an den Pupillen durchgeführt wurde Okay. Sehr einfache Animation, die hier gemacht wurde. haben wir bereits über Augenlinsen gesprochen In den vorangegangenen Kursen haben wir bereits über Augenlinsen gesprochen, sodass Sie sich diese ansehen können, falls Sie auf Verwirrung stoßen Wenn wir weitermachen, haben wir das etwas unkonzentriert. Die Augen bewegen sich, also werden nur die Pupillen animiert Und dann ist da noch dieser, der nicht fokussiert ist. Und das Designteam hatte noch nicht entschieden, ob sie den ganzen Körper hinzufügen oder ob sie ihn bis zum Kopf herunterschneiden Deshalb gibt es nicht viele Animationen würden. Deshalb gibt es nicht viele Animationen an den Beinen oder Händen. Und weil die Kinder auch psychische Probleme hatten und sie noch ziemlich jung waren, wollten wir einfach nicht, dass das zu viel Ablenkung führt Mit diesen Animationen. Diese dienen nur dazu, ihnen zu zeigen, wie sie sich heute fühlen. Okay, schauen wir uns die Animation zum Springen an. Lassen Sie uns also ein bisschen tiefer in die Materie eintauchen. Also das ist unser Körper, okay? Und das wird animiert. Ziemlich einfach. Okay. Es gibt also Transformationsskalierung, oder? Der Grund, warum ich diese Transformation innerhalb einer Gruppe animiert habe , ist , dass dieser Ebene tatsächlich andere Ebenen übergeordnet sind Deshalb wird, wenn ich eine Skala animiere, auch alles andere animiert Aber ich möchte nicht, dass andere Skalen animiert werden. Ich wollte nur zeigen , dass der Körper Bewegung hat und nicht das ganze Ding, das sich zerquetschen und Also ziemlich einfaches Zeug. Okay. Und dann sind da noch Biegungen an den Beinen. Nun, wie das entsteht, schauen wir uns das an. Okay, an dieser Stelle werden Sie sehen, dass sich das Bein im Grunde nur auf einer separaten Ebene beugt. Okay? Also diese Schicht genau hier. Und dann, wenn wir den Schnitt haben, haben wir eine weitere Schicht Beine, die nach unten geschnitten werden, ausgehend vom gleichen Schlüsselbild, aber weil es erzogen werden musste, denn wenn ich es genau hier erziehe, dann kann sich der Körper nicht nach unten bewegen weil alles dem Schwerpunkt zugeordnet ist, und deshalb müssen wir das im Hinterkopf behalten Okay? Also das ist unsere Kontrolle hier. Sie können sehen, dass wir damit die gesamte Animation verschieben können , glaube ich. Ja, alles kann auch bewegt werden. Die gesamte Charakteranimation geht also nicht kaputt. Also ziemlich einfaches Zeug, hier geht nichts allzu Kompliziertes vor sich, und dann gibt es nur noch Rotationen an den Armen. Nun, da die Arme schon ein bisschen gekrümmt waren, sodass wir nicht wirklich viel Bewegung hinzufügen mussten, wollten wir, wie gesagt, nicht zu viel Ablenkung für die Kinder schaffen Also ziemlich einfache Animation, hier geht auch nichts allzu Kompliziertes vor sich Und danach haben wir den mit dem Bier. Das Bier besteht also im Grunde aus mehreren Schichten mit Opazität. Mit unterschiedlichen Opazitäten, und das ist es im Grunde. Der Designer hat allerdings einen wirklich tollen Job gemacht, und man kann sehen, dass es mir die Arbeit wirklich leicht gemacht hat denn wenn das Design wirklich toll ist, kann man wirklich schöne Animationen daraus Aber wenn das Design nicht wirklich großartig ist, kann man aus einem schlechten Design nicht wirklich etwas Großartiges machen . Ihr Fokus sollte also auch auf dem Design liegen und wie Sie den größten Nutzen aus diesem Design ziehen können. Das war's also, das meiste davon, denke ich, und lassen Sie uns einfach weitermachen und uns andere Animationen ansehen. Also dieser ist angewidert. Ich wollte das Eis nicht an die Striche anpassen, weil ich es genauso einschränken wollte Also habe ich zusätzliche Ebenen an den Seiten hinzugefügt, denen es sich im Grunde nur um animierte Spiralen handelt. Ziemlich einfaches Zeug. Es geht nichts allzu Kompliziertes vor sich, oder? Jetzt fühlt es sich so an, als ob das Kind, weißt du, angewidert ist oder an Erbrechen denkt Deshalb bedeckt es seinen Mund. Also im Grunde, weil Sie jetzt vielleicht sagen könnten, dass es keine Mundschicht gibt, aber Sie können feststellen, dass diese Art von Details sehr selbsterklärend ist, oder? Es ist also im Grunde Homo-Logik und sonst passiert hier nichts , ziemlich einfaches Zeug Und was das Furchtbare angeht, das, was ich hier habe, sind im Grunde nur die Tropfen , die vorab zubereitet werden und dann einfach zu faul sind. Das ist es. Und dann haben wir zum Beispiel das, wenn man solche Sachen erstellen muss, wie man sie animieren kann, ist wirklich, sehr einfach Lass mich dir auch einfach davon erzählen. Lassen Sie uns einfach sagen, dass das die Beine sind und drücken wir Sie einfach und Sie werden sehen, dass sie tatsächlich stark zittern, oder? Das ist also der Arm und dann kannst du sehen , dass es Gele pro Sekunde gibt und solche Dinge passieren Okay. Nun, wie das entsteht, lassen Sie uns einfach weitermachen und den Gelpfad überprüfen. Also im Grunde habe ich diese Keyframes einfach wieder in sie konvertiert und dann einfach die Animation daraus erstellt Auch hier geht nichts allzu Kompliziertes vor sich. Was Sie auch tun können, ist, dass Sie, anstatt Gele hinzuzufügen , einfach eine Linie erstellen können, eine einfache Linie wie diese. Okay? Und dann können Sie im Grunde auch einige Deformationen am Bein erzeugen Also, das ist ein wirklich, wirklich sehr altes Projekt. Deshalb wusste ich zu dem Zeitpunkt vielleicht nicht, dass ich das machen könnte. Vielleicht habe ich zu diesem Zeitpunkt einfach eine Lösung gefunden, die ich konnte. Und was Sie im Grunde tun können, ist, lassen Sie uns das einfach ein wenig animieren , damit Sie es verstehen können Ich gehe zu den Schlüsselbildern über und lasse mich das hier ein bisschen grob animieren Eigentlich sollte es mehr Pfadpunkte geben, aber das dient nur dazu, den Zweck zu verdeutlichen und Ihnen verständlich zu machen, was wir eigentlich erreichen wollen Bei vier Frames werden wir es also einfach so machen. Ziemlich einfaches Zeug. Es geht nichts allzu Kompliziertes vor sich. Danach können Sie zu den sechs Schlüsselbildern gehen und dann einfach den ersten Schlüsselrahmen kopieren und einfügen. Das ist jetzt also eine solche Schleife geworden. Jetzt verstehen Sie offensichtlich, was ich meine. Ich glaube also nicht, dass ich wirklich die gesamte Animation neu erstellen muss , um Ihnen das zu erklären Also kopiere es einfach und füge es ein, und das kann das Gefühl von, du weißt schon, Angst erzeugen , das ich hier erreicht habe Also ziemlich einfaches Zeug. Es geht nichts allzu Kompliziertes vor sich. Nun, es gibt noch einen anderen, der auch viele verschiedene Beispiele für Emotionen enthält . Oder sagen wir einfach , dass einfache Emotionen aber in verschiedenen Charakteren dargestellt werden, Posies sind. Das ist also die Animation. Schauen wir uns das zuerst an. Jetzt hat mir der Kunde nur das Charakterdesign zur Verfügung gestellt. Im Grunde gibt es also diese Körperebene , die animiert wird. Danach werden die Arme animiert, die dem Körperlügner unterstellt sind Sie können sehen, dass die Keyframes um ein Keyframe versetzt sind, da es sich um eine Regel für die Charakteranimation handelt die auch als Follow-Through bezeichnet wird, dass sich ein Körperteil nach einem anderen bewegt Okay? Und das ist es im Grunde. Und der Teil, der am weitesten vom Körper entfernt ist, ist das S, und deshalb sind sie animiert oder, du weißt schon, so hinzugefügt. Okay, also ziemlich einfaches Zeug. Hier geht nichts allzu Kompliziertes vor sich. Jetzt können Sie diese Animation etwas weiter anpassen. Wenn ich zum Beispiel die Ohrbewegung stärker hervorheben möchte , kann ich auch dieses eine Schlüsselbild nach vorne ziehen und den Unterschied hier feststellen Aber es wurde zu viel, und ein Keyframe macht schon einen Unterschied Sie können dies also in Ihren Animationen testen und Sie werden den Unterschied und die Wirkung Ihrer Animation sehen. Okay. Und abgesehen davon wurden die Raketen nicht vom Kunden zur Verfügung gestellt Also habe ich diese Raketenanimationen einfach selbst erstellt. Ziemlich einfache, liebenswerte Animation. Nun, wie diese erstellt werden, ist auch ziemlich einfach. Das sind also im Grunde nur Brustanimationen mit verschiedenen Strichlinien Ziemlich einfach. Jetzt liegt das Hauptaugenmerk auf der Rakete. Die Rakete besteht im Grunde aus einer Formschicht. Zwei Teile befinden sich also tatsächlich in einer Rakete. Okay? Beide Formen befinden sich also in einer Ebene, sodass ich sie einfacher animieren kann Und dann kommt so viel Booster davon, wenn es anfängt Okay und denken Sie daran, dass wir uns in einer fiktiven Welt befinden, also muss nicht alles super realistisch aussehen , weil dieser Charakter nicht auch in der Realität existiert Du musst diese Dinge also im Hinterkopf behalten und bist offen dafür, einige verrückte Ideen auszuprobieren Und danach ist da nur noch diese kleine Linie dahinter, okay, die Trimpfad animiert Dann ist da noch dieser Bewegungsbogen, nur eine Linie ist, die nur den Effekt erzeugt, dass die Bewegung zu schnell war und dass dahinter eine Art Flamme ist, die einfach verschwindet, wenn sie animiert wird. Und danach passiert auf der Skala im Grunde einfach nur Squash, wie Sie sehen können Zuerst fangen wir bei Null an, dann gehen wir zu 58 und 108 über, weil es stark gequetscht ist Es dehnt sich also stark aus und dann zerquetschen wir es, als ob es in die Energie übergeht Das gleiche Prinzip gilt für alle diese drei. Jetzt habe ich die Konfetti-Animation in einer separaten Datei erstellt , die sich hier befindet. Nun, warum ich es gemacht habe, war sehr einfach. Ich kann hier mehrere Varianten erstellen. Wie Sie sehen können, ist dies eine grüne. Sie werden sehen, dass es Konfetti-Version zwei gibt. Sie werden sehen, dass es Konfetti-Version drei gibt. Sie werden sehen, dass es eine gibt, die grau und lila ist, und es gibt auch eine, die gelb und lila ist Ich kann sie also einfach per Drag-and-Drop und jede Animation wird der Null übergeordnet Übrigens auch die Rakete. Also wenn ich das bewege, bewegt sich vielleicht auch die Rakete. Vielleicht ist es ein Fehler meinerseits, also entschuldige ich mich dafür Aber die gesamte Animation war tatsächlich animiert oder korrekt überlagert Also hätte es auch übergeordnet sein sollen. Also sollte ich das einfach erziehen, okay. Und das wird es im Grunde sein, und dann kann ich einfach alles verschieben und dann wird alles funktionieren. Ja, du kannst sehen, dass dieser richtig erzogen ist. Wenn ich das also verschiebe, siehst du, was ich tun kann ist, dass ich mehrere Varianten der Animation erstellen kann, meinen Bedürfnissen entsprechen, weil die Figur nicht in jeder Animation an derselben Stelle steht in jeder Animation an derselben Stelle Also muss ich vielleicht die Animation anpassen. Warum also die Animation immer wieder erstellen? In diesem Fall musste ich die Akzentfarbe hinzufügen, die hier gelb ist. Und weil das Gelb in der Mitte war und der Charakter, weißt du, an einer anderen Position war , habe ich die Glitzer einfach an verschiedene Stellen verschoben Und das ist es im Grunde. Das Gleiche wurde in mehreren anderen Posen gemacht. Also dieselbe Konfetti-Animation, aber mit unterschiedlichen Charakteranimationen, die dieselbe Wirkung haben, und man kann sehen, dass sie wirklich, wirklich wunderschön aussieht Die Animationen sind wirklich wiederholbar und die Anforderungen waren , dass die Animation zwei bis drei Sekunden dauern sollte. Je nachdem, was sich richtig anfühlte, habe ich den Loop auf dieser Grundlage erstellt Okay, ziemlich einfaches Zeug. Wirklich gut aussehende Animation. Und dieses Projekt ist eigentlich von Spendern. Es gibt also eine Firma namens Givers und diese Charakteranimationen wurden für sie erstellt Lass uns einfach weitermachen und einen kurzen Blick auf den Rest der Animation Also ziemlich einfaches Zeug , weil der Charakter sich lustig fühlt So eine sehr einfache Animation. Danach haben wir die Charakteranimation. Nun, dieser ist wirklich wichtig um Ihnen etwas wirklich, wirklich Einfaches zu zeigen, nämlich, Sie werden sehen, dass es mehrere Varianten dieser Animation gibt. Da sind diese drei Sekunden. Es gibt auch diese sechssekündige Animation. Sie werden feststellen, dass das Charakterdesign auch seine Farben ändert. Nun, warum habe ich diese subtile Nadel hinzugefügt? Weil es so viel Geschichte und Bedeutung hinzufügt. Givers geht es im Grunde darum, Menschen in schwierigen Zeiten zu spenden oder ihnen zu helfen oder sich um alte Menschen zu kümmern Im Grunde steht unser Charakter also für Grau, und Grau bedeutet im Grunde, dass es Leblosigkeit und kein Glück gibt Und sobald der Charakter den anderen Charakter umarmt, kannst du sehen, dass er die Wärme spürt Oh, diese Dinge vermitteln plötzlich auch bewusst viel mehr Details und viel mehr Bedeutung in die Animation hinein Nun, das wurde von den Kunden nicht gewünscht. Sie müssen all diese zusätzlichen Details erstellen , um Ihren Animationen viel mehr Bedeutung und Tiefe zu verleihen. Okay, lass uns mit dem nächsten weitermachen. Nun, das ist wirklich einfach. Das wird im Grunde ein Teil des CTA sein, so genannte Action-Animation, okay. Das ist ziemlich einfach Die Glitzer oder das Konfetti hier brauchen sie nicht oder das Konfetti hier Danach haben wir den Typ , der im Grunde schreit oder sagt: Whoa ho ho . Weißt du? Also im Grunde eine Art Feier zu veranstalten. Oder vielleicht können sie das einfach hinzufügen wenn sie im Grunde einen Verkauf haben, sie können das auch in ihrem GML-Marketing verwenden , dass der Charakter schreit: Whoa ho ho, und sie können einen größeren Aufkleber anbringen, 40% Rabatt damit, und das wird wirklich, wirklich nett aussehen Okay. Und dann lass uns einfach weitermachen. Okay, dieser ist wirklich einfach. Das ist auch eine Art CTA-Animation, die zum Handeln aufgerufen wird. Also im Grunde vielleicht ein Winken in der Fußzeile oder auf dem Begrüßungsbildschirm Also ziemlich einfaches Zeug. Diese Art von Charakteranimationen können auch zu den Onboarding-Animationen hinzugefügt werden, wenn Sie sich auch in Ihre App einloggen Also wirklich nettes Zeug. Und jetzt haben wir den letzten, dem es im Grunde nur darum geht Liebe oder Glück zu verbreiten. Ja, okay, hier läuft auch eine ziemlich einfache Animation. Es gibt ein bisschen Animation auf der Mundschicht. Im Grunde genommen habe ich all diese Ebenen gruppiert und zusammengefügt weil es sinnvoller war, sie einfach zusammen zu animieren, anstatt einfach, du weißt schon, das Ganze ausbrechen könnte Die Zähne könnten sich in eine andere Richtung bewegen oder die Fehlstellung könnte häufig vorkommen Also füge ich sie einfach zusammen, und im Grunde macht es auch ein bisschen Spaß mit der Skalierung und Position. Ziemlich einfaches Zeug. Die Arme werden wie in allen vorherigen Animationen zum Körper animiert . Also ziemlich einfaches Zeug. Hier ist auch nichts allzu Kompliziertes los. Und ich hoffe, Sie lernen etwas aus diesem Projekt. Das war's also für diesen Kurs. Ich sehe dich in der nächsten. 4. 03.Beheben versteckter Probleme: In diesem Kurs werden wir herausfinden, wie man AiuxPlugin verwendet, anstatt Overload zu verwenden AiuxPlugin verwendet, anstatt Nun, wir haben es in unserer vorherigen Klasse in der Zwischenklasse ein wenig angesprochen , sodass Sie lernen können, wie Sie es installieren, indem Sie dem folgen Und danach können Sie einfach weitermachen und alle Details besprechen. Lassen Sie mich jetzt einfach weitermachen und Ihnen eine wichtige Sache zeigen. Wenn wir Battle X überladen, suchen wir einfach danach und ihr werdet feststellen, dass es dieses Tool gibt, das wir bereits besprochen haben. Overload hat jetzt tatsächlich 2.2 veröffentlicht. Overload Two Point Oh wurde also veröffentlicht, aber es kostet 75$ Und wenn Sie aktualisieren müssen und wenn Sie Ihr Plugin aktualisieren möchten, müssen Sie zusätzliches Geld bezahlen Jetzt gibt es eine bessere Alternative, nämlich AEUX, die völlig kostenlos ist Nun, es gab viele Probleme in Overload 1.2, es gibt auch ein paar Probleme bei der Verwendung von AEUX, und lassen Sie uns auch diese durchgehen Jetzt hat Overload seinen eigenen Platz. Es bietet auch viele neue Lösungen, und es gibt eine Menge Dinge, die es tun kann. Es kann auch Ihre Arbeit aus Photoshop übertragen, aber das ist nicht unser Hauptaugenmerk bei der Erstellung von UI-Animationen. Das ist jemand, der solche Sachen kreiert, vielleicht mit ein paar Texturen und ähnlichem. Okay, lassen Sie uns einfach weitermachen und uns AEUX ansehen. Wir haben bereits darüber gesprochen , aber schauen wir uns einfach an , dass AEUX auf Github ist Sie können es einfach von hier herunterladen und lesen, wie man es installiert, ziemlich einfaches Zeug, nichts allzu Kompliziertes Und was Sie im Grunde tun können, ist, lassen Sie uns einfach weitermachen, Figma, und lassen Sie mich Ihnen zeigen, wie Sie es verwenden können Also im Grunde, wie Überlastung funktioniert. Entschuldigung, mein BD, das AEUX wie es eigentlich funktioniert, ist im Grunde ziemlich einfach Lass uns einfach weitermachen und ein paar verschiedene Ebenen erstellen. Und lassen Sie mich einfach irgendein Bild kopieren. Nun, das ist ein Bild. Also lass uns das einfach kopieren und es auch hier drüben machen. Okay. Nun, es ist wirklich wichtig, dass sich die Arbeit, die Sie übertragen möchten , in einem Frame befindet. Du musst mit der rechten Maustaste klicken, in deine Plugins gehen, in die Entwicklung gehen und zu AIUX gehen Sobald es geöffnet ist, können Sie im Grunde einfach auf Auswahl an AE senden klicken und dann werden Sie nach einem Ordner gefragt Lassen Sie uns einfach weitermachen und einen Ordner erstellen, dem wir AEUX-Tests durchführen werden Wählen wir einfach das aus. Okay, Sie können sehen, dass das Bild auch hier hinzugefügt wurde, und Sie können sehen, dass auch die Formen hinzugefügt wurden Nun, das funktioniert auch sehr gut mit Farbverläufen. Sie können Farbverläufe hinzufügen und diese auch übertragen. Es funktioniert wirklich, sehr gut. Aber es gibt eine wirklich wichtige Sache, die Sie beachten müssen , wenn Sie an Kundenprojekten arbeiten Sie müssen in die Erweiterung gehen und AUX drücken. gibt es viele Einstellungen Hier gibt es viele Einstellungen , die Sie berücksichtigen müssen. Sie können die Option auswählen , dass automatisch ein neuer Vergleich erstellt wird. Sie können auch einen sicheren Bildpfad hinzufügen. Ich habe keinen Ordner ausgewählt, daher werde ich jedes Mal nach einem neuen Ordner gefragt. Sie können auch die Bildrate der neuen Komposition wählen, kann auch 60 sein, was auch 24 sein kann Die Dauer der Kompilierung sollte etwa 60 Sekunden betragen. Nun, warum? Weil ich manchmal bereue , dass meine Comp-Größe tatsächlich kürzer war weil der Kunde mich gebeten hat , die Animation zu verlangsamen Und wenn der Kunde tatsächlich so viele Ebenen oder so viele komplexe Animationen hat oder sein Charakter oder sein Kunstwerk tatsächlich so viele Frames hat, oder wenn die Animation tatsächlich mit Autolayout erstellt wurde, dann gibt es Jeder Frame, der hier hinzugefügt wurde, wird tatsächlich als Neo-Comp übersetzt In After Effects. Lass mich einfach versuchen, es erneut zu testen. Vielleicht funktioniert das. Ja, das kannst du dir ansehen. Dieser Rahmen wurde tatsächlich hinzugefügt. Was passiert nun eigentlich, wenn die Animation von hier aus beginnt. Aber der Kunde hat verlangt, dass die Animation jetzt 10 Sekunden lang sein soll, aber Ihre Bildgröße betrug 5 Sekunden Was Sie tun können, ist einfach Strg K zu drücken und dann einfach die Dauer zu ändern Ziemlich einfaches Zeug, nichts allzu Kompliziertes, oder? Aber, aber, aber. Das Wichtigste ist, wenn Sie mehrere Frames in diesem Mainframe haben, dann passiert tatsächlich innerhalb dieses Frames, es wird einen weiteren Frame Also im Grunde ein weiterer Pre-Comp. Sie müssen das öffnen und dann müssen Sie die Ebene im Grunde herausziehen Dann musst du das öffnen und dann musst du dasselbe tun und es verlängern. Warum also die ganze Mühe auf sich nehmen und 60 behalten? So einfach das ist, das erhöht die Dateigröße sowieso nicht Es schadet also nicht, das zu tun. Die Parameter für die Erkennung der Form sollten überprüft werden. Jetzt heißt es Pre-Comp-Gruppen. Nun, das ist ganz Ihre Wahl, aber ich empfehle es nicht Und es gibt noch andere Dinge, die du auch vor der Vorbereitung von Gruppen verwenden kannst, die du nicht empfehlen Danach hast du un precomp, was in diesem Fall zum Beispiel bedeutet, du das auswählen und un precomp drücken kannst Und das ist wirklich nützlich. Manchmal willst du das wirklich nicht tun, weil es mehr als 100 Schichten geben wird. Du wirst also ziemlich verwirrt sein, was soll ich animieren und was ist welche Ebene Also musst du diese Dinge im Hinterkopf behalten. Es gibt auch einige zusätzliche Dinge, die Sie beachten sollten. Manchmal, wenn Sie ein kompliziertes Kunstwerk übertragen, werden auch hier einige seltsame Hilfsebenen hinzugefügt, und es gibt ein echtes Projekt , das ich Ihnen vorstellen möchte. Aber leider habe ich die Figma-Datei für dieses Projekt nicht die Figma-Datei für dieses Projekt Und was Sie im Grunde tun können, ist, dass Sie, sobald das passiert, einfach die Sichtbarkeit von Google-Guide-Layern aus - und einschalten können, und Sie können diese auswählen und dann auch einfach löschen So einfach ist das, und der System-Tab ist im Grunde nichts, also lass ihn einfach stehen. Ziemlich einfaches Zeug, und jetzt haben wir das durchgemacht. Nun, was sind die Vorteile der Verwendung von AEUX? Wie ich bereits erwähnt habe, ist es völlig kostenlos. Ich meine, das ist ein großes Plus. Das einzige Problem ist das Pre-Comp-Problem, das ich euch gerade erzählt Schreiben Sie dieses, und Sie können es lösen indem Sie die Dauer der Comp verlängern Davon abgesehen gibt es nicht wirklich viele Probleme. Manchmal gibt es eines von 100 Mal ein sehr, sehr seltsames Problem, und wir werden uns auch damit befassen. Aber schauen wir uns zunächst unsere Fallstudien an , wie ich mit diesem Plug-In verschiedene Arten von Animationen erstellt habe . So sendet die AEUX die Daten nun tatsächlich in Ihren Ordner Dies ist ein Kundenprojekt und die Datei hatte tatsächlich so viele Farbverläufe, Sie die einzelnen Ebenen hier sehen können. Das ist nicht wirklich so kompliziert, da diese Daten zunächst bereits zu Ihrer Datei hinzugefügt wurden, sodass Sie sich keine Sorgen machen müssen, wenn hier viele seltsame Dinge vor sich gehen Ignoriere dieses Zeug einfach. Außerdem müssen Sie bedenken, dass eine Ebene, die hier umgedreht wird, zum Beispiel AEUX eine Ebene, die hier umgedreht wird, zum Beispiel auf diese Weise, trotzdem kopiert und hier einfügt Aus diesem Grund gibt es mehrere Instanzen derselben Ebene Und Sie werden feststellen , dass einige Ebenen wirklich saubere Namen haben. Das wird jetzt tatsächlich manuell von mir exportiert. Warum? Ich werde das jetzt in einer Minute erklären. Lassen Sie uns einfach die Datei öffnen und lassen Sie mich Ihnen ein viel komplexeres Projekt zeigen Ihnen ein viel komplexeres Projekt Lassen Sie mich Sie durch das Projekt führen sodass Sie in diesem Fall die Datei optimieren werden. Zuallererst wissen Sie, dass wir keine Freiheitsgradienten verwenden können und Sie können auch nicht mehrere Stilebenen hinzufügen , die tatsächlich in Figma verfügbar sind Diese lassen sich eigentlich nicht wirklich gut in After Effects übersetzen . Und wenn diese auch übersetzt werden, können Sie sie technisch gesehen nicht für jede Plattform exportieren. Jede Funktion wird nicht unterstützt, wie Sie wissen, wird Dropshat auf IUS nicht unterstützt Denken Sie also an diese Dinge, oder Und du musst um diese Dinge herumschummeln , wie es in den vorherigen Klassen besprochen wurde Im Grunde genommen ist das, was mit diesem Hintergrund passiert ist, eine separate Geschichte, und ich werde gleich darüber sprechen. Schauen wir uns einfach unsere Kapseln an. Sie können sehen, dass die Kapsel hier im Grunde nichts Animierendes ist. Ich habe einfach beschlossen, hier alles zu animieren , indem ich einfach alles zu einer übergeordneten Null hinzufüge, und das ist dann Ja, du kannst sehen, ziemlich einfaches Zeug, und diese Punkte folgen im Grunde nur einem Pfad Nun, wie man das erstellt, ist wirklich einfach. Was Sie tun müssen, ist im Grunde nur einen Keyframe auf diesem Pfad zu erstellen. Kopiere es, lies den Schlüsselrahmen. Gehe zu deiner Formebene. Lass uns einfach ganz schnell eine neue erstellen. Lass mich die Füllung rot machen. Lass mich das fallen lassen. Okay. Und lass mich zu der Position gehen. Treffer. Jetzt muss der erste Keyframe ausgewählt und Strg V gedrückt werden. Okay. Und wenn das nicht kopiert wird, sollte es das auch tun, aber lassen Sie mich einfach mal im Detail nachschauen, wie das geht Okay, sobald Sie es kopiert haben, müssen Sie es einfach hier einfügen, und Sie werden sehen, dass der Pfad hinzugefügt wurde und auch die Keyframes hier hinzugefügt wurden Und Sie werden feststellen, dass es einem Pfad folgt. Jetzt kannst du es definitiv auch in die andere Richtung schaffen. Also lass uns einfach weitermachen, Stopp drücken und es machen. Danach müssen Sie sich um diese mittleren Keyframes kümmern und diese in eine K-Frame-Interpolation umwandeln, damit sie linear ist und sich über die Zeit diese mittleren Keyframes kümmern und diese in eine K-Frame-Interpolation umwandeln in eine K-Frame-Interpolation umwandeln bewegt, damit sie sich an die Zeit damit sie Das ist alles. Mach dasselbe auch mit diesem. Also oder du kannst einfach Rove über die Zeit drücken, um auszuschalten. Ich mache das linear. Okay. Und dann habe ich vielleicht etwas ruiniert Ja, ich glaube, ich habe etwas ruiniert. Lass mich einfach nachschauen was ich eigentlich falsch gemacht habe Nachdem Sie den Keyframe kopiert und eingefügt haben, müssen Sie ihn möglicherweise anpassen Okay. Und danach, was du tun kannst, gibt es zwei Dinge , die du tun kannst. Zuallererst können Sie im Grunde Ihren Weg so festlegen und ihm so zuordnen. Okay? Und dann kannst du deine Form mit dem Plug In so anpassen. So einfach ist das. Und danach Sie es nur noch ziehen und ablegen, wo immer Sie wollen. So einfach ist das, nichts allzu Kompliziertes. Okay. Und wenn Sie Kurven im Pfad haben, müssen Sie diese nur anpassen und dann können Sie einfach die folgende Animation erstellen . So einfach ist das So wie ich die Linienanimationen gemacht habe. Und dann ist da noch diese Kapselanimation. Jetzt werden Sie feststellen , dass die Animation von der Genetik ausgeht. Und es endet mit der Genetik. Nun, wie ich das geschaffen habe, ist wirklich, wirklich einfach. Ich habe einfach das Ganze dupliziert, weißt du, du wirst sehen, dass manche Dinge mehr als einmal auf der Timeline stehen Zum Beispiel die Uhr einmal hier, die Uhr ist wieder hier. Okay, genauso, ich habe gerade genug Abstand geschaffen und eine Schriftrolle erstellt, die hier oben ist, und ich kann sie ziehen , um dir auch zu zeigen, dass alles gleich ist, erstelle sie einfach zweimal oben. Da es sich um Vorabversionen handelt, werden keine zusätzlichen Daten hinzugefügt, und diese Art von Entscheidungen optimiert Ihre Dateien tatsächlich Einfaches Zeug, aber es muss mit Vorsicht gemacht werden. Nun, der Hintergrund hatte einige Probleme und er wurde nicht richtig übertragen, also musste ich in der Datei einfach dorthin gehen, alles ausschalten und nur eine Ebene behalten. Zum Beispiel ist diese Ebene nur heruntergefahren, alles andere wird ausgeschaltet , oder Sie können diese Ebene einfach auswählen und einfach auf Exportieren klicken. Und wenn Sie nur diese Ebene übertragen möchten, wählen Sie sie einfach aus und klicken Sie auf Exportieren. Das ist es. Dann können Sie weitermachen und was Sie tun können ist, dass es auch wirklich wichtig , dass Sie kurz vor dem Start der Animation darauf klicken, ein Schlüsselbild exportieren und es als Referenz benennen und es dann auch in Ihre Komposition auf der Rückseite einfügen Und obendrein können Sie feststellen, ob etwas falsch ausgerichtet ist oder so Manchmal gibt es ein Problem, das wir besprechen werden Da wir uns mit diesem Problem befasst haben, werden wir auch diesen anderen detaillierten Fehler behandeln , der bei einigen Projekten vorkommt. Aber vorher schauen wir uns einfach die beiden anderen Animationen an, die ich für dieses Projekt erstellt habe. Ich glaube, es sind tatsächlich drei. Also nochmal, es gibt mehrere Bilder. Dieselben Karten, dieselben Bilder, einfaches Zeug. Auch hier der Looping-Effekt, die Linien werden erzeugt, alles befindet sich in denen, die sich in die entgegengesetzte Richtung bewegen Einfaches Zeug, nichts allzu Kompliziertes. Okay. Und ja, das ist es im Grunde. Und Sie können diese zusätzlichen Ebenen bei Bedarf löschen, aber wenn sie ausgeschaltet sind, sie nicht exportiert. Es ist also so oder so eine Win-Win-Situation. Und Sie können sehen, dass dies die letzte Komposition ist , in der alles gerendert wird Okay. Und Sie werden sehen , dass das unser Rahmen ist , wieder das gleiche Problem mit den Farbverläufen oder so , mit dem ich konfrontiert war Also habe ich einfach dasselbe gemacht. Eine weitere Sache, die wirklich wichtig ist , ist , dass ich die gleiche Maskengröße verwende , damit alles nach unten geschnitten wird. Okay. Und weil die Anforderungen so waren, benötigte der Kunde die Animation um diese negativen Leerzeichen hinzuzufügen. Deshalb habe ich das hinzugefügt. Ansonsten könnte ich es auch einfach fallen lassen. Ziemlich einfaches Zeug, dieselben Karten, irgendwie animierend. Lass uns einfach in die Kartenansicht gehen, damit du sie auch sehen kannst Also drei Karten, okay. Und dann habe ich im Grunde nur diese Karten mit demselben Abstand dupliziert diese Karten mit demselben Abstand Also lass uns einfach weitermachen und du kannst jetzt sehen, wo diese Karte tatsächlich anfängt Okay. Ziemlich einfaches Zeug, nur das Duplizieren der Ebenen , um die Dateigrößen zu optimieren Das ist es. Lassen Sie uns jetzt einfach weitermachen und uns unsere dritte Datei ansehen. Also, lass uns das einfach öffnen. Okay, also dieser hatte tatsächlich einige Probleme, und lassen Sie uns auch das durchgehen. Sie werden feststellen, dass dies ein Strich ist , den ich hier tatsächlich erstellen musste. Nun, weil manchmal die Farbverläufe tatsächlich durcheinander sind Wenn Sie zum Beispiel einen einfacheren Farbverlauf hinzufügen, mir auch aufgefallen, was wirklich seltsam ist, dass ich erst dann mit solchen Problemen konfrontiert werde, wenn ich diese Art von Dateien vom Client erhalte Problemen konfrontiert werde, wenn ich diese Art von Es gibt noch ein anderes Projekt, über das wir sehr bald in diesem Kurs sprechen werden , nämlich das CryptAject. Nun, das ist von einem Designer namens Gacofz. Wir haben an einigen Projekten zusammengearbeitet. Er ist ein wirklich toller Designer. Macht einige wirklich tolle Einrahmerarbeiten und macht auch wirklich tolle Designarbeiten Sie können sich also auch ihre Arbeit ansehen. Und sobald er die meisten Dinge entworfen hat, habe ich nicht wirklich viele Probleme gesehen, außer den Problemen , mit denen wir bei diesen Projekten konfrontiert waren und die wir besprechen werden. Abgesehen davon habe ich bei der Arbeit mit den Kundenprojekten festgestellt, dass es mehrere Probleme mit dem Farbverlauf gibt , sodass die Farbverläufe hier perfekt aussehen Aber wenn ich sie in AE übertrage, sehe ich irgendwie sehr, sehr seltsame Probleme Sie werden sehen, dass es hier keine Probleme gibt, oder? Das Gefälle ist hier wirklich perfekt geworden. Aber manchmal muss ich die Ebene einfach neu erstellen. Ich weiß nicht, warum das passiert. Es gibt keine solche Erklärung dafür, weil es sich einfach um ein Tool handelt, das nicht viel Unterstützung bietet. Es ist also nur ein Tool, mit dem man einfach arbeiten muss. Aber es ist eine kostenlose Alternative, und ich habe über 100 Projekte mit diesem Tool gearbeitet, und es funktioniert wirklich gut. Deshalb, weißt du, muss dafür eine separate Klasse erstellt werden. Also ziemlich einfaches Zeug das hier mit derselben Technik erstellt wurde. Der Farbverlauf ist im Grunde sehr einfach. Die Opazität lässt in der unteren Ecke nach. Lass mich einfach weitermachen und dir den Farbverlauf zeigen. Schauen wir uns einfach an , wo das ist. Ja. Sie können die Gradientenpunkte sehen. Eigentlich ja, jetzt kannst du besser sehen. Siehst du? Ziemlich einfacher Farbverlauf. Nichts allzu ausgefallenes. Manchmal musst du dieses Zeug auch manuell machen. Ich weiß, dass es manchmal problematisch sein kann, aber es wird dir auch helfen, dich zu verbessern oder einen besseren Designer zu finden, und das wird dich auch von der Masse abheben und dich zu einem der besten 1% der Designer machen. Im Grunde geht es also darum, euch zu erklären und zu zeigen , dass das Lösen von Problemen auch bei diesen Animationen ein großer Aspekt ist. Sie müssen einfach keine Keyframes hinzufügen. Sie müssen diese Dinge auch berücksichtigen, und wie ich die Offset-Animation erstellt habe , ist ziemlich einfach Sie erstellen jedoch eine einfache Loop-Pebble-Animation, Sie erstellen lediglich drei Keyframes Sie kopieren sie einfach und fügen sie erneut ein, und dann verschieben Sie sie im Grunde einfach. Sehr einfaches Zeug, auch hier geht nichts allzu Kompliziertes vor sich. Und der Hintergrund ist im Grunde nur ein Bild. Genauso hatte ich auch mit diesem einige Probleme. Also füge einfach ein Bild hinzu. Sie können sehen, dass ich eine Maske hinzugefügt habe weil die Ecken abgerundet werden mussten, aber Sie wissen, dass die Kompositionen in jeder Kompositionssoftware und überall quadratisch sind in jeder Kompositionssoftware und überall quadratisch Deshalb habe ich gerade eine rechteckige Maske hinzugefügt , um dieses Problem zu beheben Okay, ziemlich einfaches Zeug. Denn als ich das tatsächlich von Figma übertragen habe, hatte es keine Maske, also musste ich es nur hinzufügen und den Eckenradius, falls in Figma etwas hinzugefügt wurde, wird es nicht wirklich übersetzt Auch zu After Effects. Lass mich versuchen, dir auch das zu zeigen. Ich denke, dass das nicht gut funktioniert. Oh, tut es. Also, weil es vielleicht tatsächlich zu einem Bild hinzugefügt wurde , hat es deshalb nicht funktioniert Aber wie dem auch sei, nur um die Dinge im Hinterkopf zu behalten oder die Dinge langweilig zu halten, ist dies nur eine Technik, die man in der Tasche haben Lassen Sie uns jetzt einfach weitermachen und etwas behandeln, das wir bisher in keinem der Kurse besprochen Lassen Sie mich einfach weitermachen und Ihnen eine Header-Animation zeigen. Nun, was ist eigentlich eine Header-Animation? Eine Header-Animation ist etwas, das oben auf einer Website angezeigt wird , okay? Und in diesem Beispiel ist die Animation ziemlich einfach. Im Grunde eine KI, die nur spricht. So einfach ist das, wir haben Chat-Animationen in der Mittelklasse und auch in der Fortgeschrittenenklasse sehr, sehr detailliert erstellt der Mittelklasse und auch in der Fortgeschrittenenklasse sehr, sehr detailliert . Sie können sich diese ansehen. Also ziemlich einfache Dinge, die vor sich gehen. Schauen wir uns einfach an, was hier anders ist , was vielleicht noch nicht besprochen wurde. Okay. Und es gibt ein weiteres Beispiel, das ich bald in diesem Kurs behandeln werde und das Ihnen zeigen wird, wie Sie Live-Systeme erstellen können , die in verschiedene Bereiche der Website integriert sind. Okay, also ja, Sie können sehen, dass es im Grunde diese halbe Karte gibt. Ich glaube, das ist jetzt gesperrt. Ja, dieser scheint es zu sein. Ja. Das ist eine Seifenblase. Also im Grunde genauso, wie wir zuvor in der vorherigen Klasse animiert haben, hier ist alles animiert. Das Gleiche, M-Kram. Das sind nur Bilder, einfaches Zeug. Jetzt können Sie sehen, was ich zuvor besprochen habe. Sie können sehen, dass es Comps innerhalb von Coms gibt , oder Hier können Sie Probleme bekommen , wenn Sie Ihre Animation verlängern müssen Das geht in jede Komposition und vergrößert die Dateiseite und dehnt dann die Ebenen aus Wir sollten diese Art von zusätzlicher Arbeit wirklich vermeiden. Okay, das ist also im Grunde die Animation. Hier ist auch nichts allzu Kompliziertes los. Ziemlich einfaches Zeug. Und dieses Symbol ist auch nur ein Bild. Okay. Also, was ist eigentlich Header-Animation? Lassen Sie mich Ihnen nur ein Projekt zeigen, das ich erstellt habe. Ich hoffe, dass ihre Website live ist, ja. Jetzt kann ich die Dateien leider nicht wirklich finden, vielleicht wurden sie tatsächlich gelöscht, als die Daten auf meinem anderen Laufwerk beschädigt wurden. Aber Sie können die Animationen hier sehen. Okay? Das ist also im Grunde ein SVG-Design, ganzes SVG-Design, das dann einfach über einem mobilen Bild animiert wird. Dann gibt es noch diese WhatsApp-Nachrichten, ziemlich einfach zu erstellen sind. Und Sie können sehen, wie viel Mehrwert es bietet, oder? Und im Grunde die gesamte Workflow-Animation, die Sie sehen können. Wir haben im Fortgeschrittenenunterricht eine sehr ähnliche Animation erstellt , das können Sie sich ansehen. Und das ist es im Grunde. So wird deine Arbeit aussehen. Und die Farben, die Konzepte werden wirklich wichtig sein. Versuchen Sie also bitte, diese Dinge im Hinterkopf zu behalten und achten Sie ein gutes Branding der Marke , mit der Sie arbeiten. Okay. Also lass uns einfach weitermachen und lass mich dir noch eine weitere, wirklich gute Studie zeigen. Das habe ich geschaffen. Okay, lassen Sie uns einfach weitermachen und uns das ansehen. Okay, lassen Sie uns einfach weitermachen und uns eine lokale Marke ansehen , für die ich Animationen erstellt habe. Nun, in diesem Projekt habe ich etwas wirklich Erstaunliches und wirklich Interessantes gemacht. Lassen Sie mich Ihnen zunächst zeigen , wie die Website tatsächlich entstanden ist. Okay. Und das ist eigentlich die Website eines Live-Projekts. Das Geschäft ist also im Grunde live. Das ist jetzt wirklich interessant. Und was ich für dieses Projekt getan habe, war , dass ich auch das Logo erstellt habe. Ich habe das Logo entworfen. Ich habe das gesamte Design und auch die Animation gemacht. Okay. Also gab es nur zwei Farben, nur lila von der Marke und dann grün, die ich als ergänzende Farbe hinzugefügt habe. Und Sie können sehen, dass die Animation wirklich reibungslos läuft. Das ist also im Grunde etwas , das als Header-Animation bekannt ist. Das erklärt im Grunde den größten Teil des Produkts, oder? Es ist selbsterklärend, was das Unternehmen tut. Und dann haben wir alle Designs von mir gemacht, und dann haben wir diese Workflow-Animationen, richtig Sehr einfaches Zeug, aber wirklich interessant gemacht. Und dann haben wir das Google Business-Symbol, das im Grunde genommen verbessert wird, oder? Also, wenn Sie sich für einen Plan auf der Plattform entschieden haben, bekommen Sie, wenn Sie merken, dass Sie kaufen, skalieren Sie, Sie haben so viele Analysen und Verkäufe, bekommen Sie, wenn Sie merken, dass Sie kaufen, skalieren Sie, Sie haben so viele Analysen und Verkäufe, Sie gehen von hier zu diesem über, also es passiert viel Wachstum, weil es um Storytelling geht, oder? also es passiert viel Wachstum weil es um Storytelling geht, oder Wenn Sie völlig frei über das Projekt verfügen, sollten Sie genau diese Art von Arbeit erstellen Und mit dieser Art von Dienstleistungen heben Sie sich von der Masse ab. Und dann kannst du dir diese wirklich nette Loupeb-Animation ansehen. Richtig? Dann haben wir diese Fußzeile, die im Grunde zeigt, was Local B tun wird Jetzt sind alle Animationen weitgehend kompatibel. Sie können sehen, dass nichts allzu Ausgefallenes vor sich geht. Es gibt keine Spezialeffekte, aber Sie werden trotzdem sehen, dass die Animation wirklich wunderschön aussieht. Es verleiht der Website so viel Sinn und Leben. Und so können Sie Marken im Grunde von der Masse abheben. Sie können tolle Werke schaffen. Und wenn Sie einmal etwas Wunderbares wie dieses geschaffen haben, können Sie im Grunde genommen daraus eine schöne Fallstudie erstellen und der Welt zeigen , dass Sie dazu in der Lage sind. Okay? Also im Grunde sind das alle Animationen und wir werden sie einfach durchgehen, schnell, weil die Designs von mir gemacht wurden, also gibt es in diesen Szenarien nicht wirklich viel Ärger. Wirklich einfaches Zeug. Wenn das B im Grunde das Logo auswählt, wurde der Pfad gekürzt. Es ist ein Pre-Comp. Die Ebene wurde gekürzt, da sie jetzt dem Logo selbst übergeordnet ist übergeordnet ist Und das Logo ist im Grunde genommen so voreingestellt und animiert. Und ich füge einfach das Position-Key-Framing auf dem Precomp hinzu, ziemlich Nichts allzu Kompliziertes. Okay. Richtig. Ziemlich einfaches Zeug. Okay? Und dann haben wir den anderen. Schauen wir uns das einfach an. Okay, das ist also der Design-Input von Illustrator. Nun werden Sie feststellen, dass ich bei den Schriftarten tatsächlich eine Schrift verwendet habe, die ich auf meinem Computer hatte, sodass ich sie einfach nicht konvertieren musste weil die Texte auch nicht animiert waren Und der Fokus lag nur auf den Elementen. Der Text erscheint also nur undurchsichtig, sodass wir sie nicht in She-Spieler umwandeln müssen Das wäre zusätzliche Arbeit, die ist nicht nötig. Ziemlich einfach, wie eine Animation hier drüben. Nur einige lassen sich wirklich gut skalieren. Okay. Lass mich dir einfach die Keyframes zeigen Ziemlich einfache Animation zum Vergrößern. Nichts zu kompliziert. Danach haben wir die Pfeilanimation, die Traumpfad ist. Wir haben im Fortgeschrittenenkurs darüber gesprochen , wie man die Pfeile optimieren kann. Und dann haben wir den KI-Bot. Wir haben die Suchmaschinenoptimierung, ziemlich einfaches Zeug, oder? Aber so viel Aussagekräftiges und passt wirklich zum gesamten Markenstil. Danach haben wir den Google Business Boost. Schauen wir uns das an. Okay, dieser ist also ein bisschen lang. Also da ist diese ganze Reise im Gange. Also gehen wir hierher. Wir wählen dieses Paket aus. Wir gehen einfach runter. Nun, weil ich es so will, war ich im Grunde ein Element im Grunde mit anderen Elementen verbunden ist, deshalb ist die ganze Arbeit in einer Komposition. Und ich hatte Spaß daran, es zu animieren, also habe ich nicht wirklich darauf geachtet, hier Vorverstärker hinzuzufügen. Und der Kunde war auch wirklich, weißt du, bereit, mir zu vertrauen Er bat nicht um viele Überarbeitungen. Deshalb war ich zuversichtlich , dass er es lieben würde. Deshalb habe ich einfach keine Vorprodukte hinzugefügt. Ja, hier laufen ziemlich einfache Dinge ab. Dann kommt im Grunde diese Linie, und ich denke, es wird schwierig sein, die Leitung zu finden. Ja, glaube ich. Lass mich einfach versuchen, es zu finden. Vielleicht dieser? Nein. Ja, der hier Okay. Das Liniendesign ist also einfach, aber es ist nur so, dass die andere Leitung im Grunde getrennt ist. Okay? Also streamt es einfach am Ende raus und dann enthüllen wir dieses und das Logo folgt ihm im Grunde einfach. Jetzt werden alle Geschenkrahmen hier hinzugefügt, weil die gleiche Ebene tatsächlich die ganze Reise durchläuft, also musste ich nicht vorab berechnen, weil es sich um eine einzige Ebene handelt Wenn ich es vorab zusammenstelle, ist es dieselbe Geschichte. Also nichts anderes. Dann haben wir das, die Linien hatten tatsächlich einen gewissen Verjüngungseffekt Nein, ich wollte da keine Kompromisse eingehen, und deshalb habe ich das einfach per Maske animiert Nun, es ist etwas zusätzliche Arbeit, wie Sie sehen können, aber es lohnt sich auf jeden Fall, denn der Taper-Effekt auf der Linie sieht wirklich gut Und deshalb musste ich die Ebene erweitern, weil man bei Lottie keinen Taper-Effekt hinzufügen kann Und dann haben wir diese Linie, die auch eine Verjüngungslinie ist Einfach animiert. Dann haben wir skalierende Kugeln, Punkte. Das ist es. Dann haben wir die Zahlen, die sehr subtil nach oben skalieren Unser ganzer Fokus liegt also hier und wir lassen die Analytik rotieren. Einfaches Zeug. Eine zufällige Skalierungsanimation hier drüben , mit einem gewissen Abstand zu den Ebenen. Es sieht also wirklich gut aus, oder? kann also ein gewisser Offset-Offset erreicht werden . Ziemlich einfach, oder? Dann haben wir diese Animation genau hier, oder? Ziemlich einfaches Zeug, hier nochmal Offset skalieren . Einfaches Zeug. Nun, es ist wirklich wichtig, daran zu denken, dass wir jetzt zwei Felder auf der Ebene haben. Um also die Ebenen in deiner Komposition im Grunde zu reduzieren oder sie ein wenig aufzuräumen, kannst du einfach eine oder zwei Ebenen auswählen, so ziehen und sie dann einfach zusammenführen Dies hat keinerlei Auswirkungen auf die Ebene. Und dann ist das ganz einfach. Und danach haben wir die Google-Bewertung. Schauen wir uns das einfach an. Ich denke, das ist die Header-Animation mit der größten Wirkung. Ja. Jetzt wirst du das zuerst sehen, ich habe die Animation im Google-Format erstellt, richtig, in den Google-Farben. Aber der Kunde wollte wirklich den Markentouch, oder? Deshalb habe ich einfach umgefärbt . Ziemlich einfaches Zeug Nichts allzu Kompliziertes, oder? Und Sie werden feststellen , dass das Grün, das Gelb, alles im Grunde das Gelbe im Grunde mit Google übereinstimmt. Das Lila ist von der Marke. Die Standardregel lautet im Grunde, wenn du Farbe hinzufügst, dass du deinen, glaube ich, Farbton wählen solltest, und wenn die Zahl über 150 ist, solltest du 150 davon abziehen glaube ich, Farbton wählen solltest, und wenn die Zahl über 150 ist, , okay? Und das wird dir eine sehr komplementäre Farbe geben. Wenn die Zahl unter 150 liegt, fügen Sie einfach 150 hinzu. Das wird dir den perfekten Wert geben. Also nur ein Designtipp da drüben. Das wird wirklich hilfreich sein, um wirklich schöne Kontraste zu erzeugen Und der Kunde hat es geliebt. Und ich sagte, warum nicht? Lass uns einfach damit weitermachen. Und das ist es im Grunde. Und wenn Sie darüber nachdenken , wie die Animation hier erstellt wird, handelt es sich im Grunde nur um eine Überschreitung der Ebene mit einer Skala von 120, und dann skalieren wir wieder auf Hundert Gleiche Animation auf jeder Ebene. Aber füge es einfach mit ein bisschen, du weißt schon, Offset hinzu. Du kannst den Offset hier sehen, oder? Und dann tauchen einfach diese Google-Bewertungen auf, oder? Also einer nach dem anderen Also das sind im Grunde nur Google-Bewertungen, die verbessert werden, weißt du, sie erscheinen und dann gehen sie einfach darauf ein und dann lassen weißt du, sie erscheinen und dann gehen sie einfach wir die Bewertung erhöhen Wir erzählen also im Grunde nur die ganze Geschichte. Und all diese Werte offenbar ihre eigenen Nullwerte, und dann sind das nur Nullen, die über Position Krames verschoben werden Das sind also die Dinge , die Sie beachten müssen, um Ihre Dateien einfach zu optimieren Sie können sie später anpassen oder Sie können es einfach jetzt tun, wenn ich Ihnen das erkläre Ich habe nicht wirklich Schwierigkeiten solche Dinge zu animieren Aber wenn Sie an einer Figma-Datei arbeiten, die ich Ihnen beim vorherigen Kundenprojekt wirklich gezeigt habe, ist es schwierig, diese zu animieren und auch die Anordnung dieser Dateien beizubehalten Behalte das also im Hinterkopf. Und wenn Sie sich damit abfinden, welche Schicht wag, dann machen Sie sich keine Sorgen Ich war auch dort und Sie werden mit Erfahrung lernen Vertrau mir. Okay, danach haben wir die Logo-Animation, okay? Und wir haben die Logoanimation in verschiedenen Formaten. Lass uns dir einfach die Geschenkanimation zeigen , weil nicht viel los ist. Ziemlich einfaches Zeug. Nichts allzu Kompliziertes, nur ein bisschen Squash und Stretch, ein bisschen Animation und Überschwingen auf den Antennen der B. Ziemlich einfaches Zeug. Und dieselbe Animation wurde, wissen Sie, in verschiedenen Größen angeboten , und das können Sie sehen Dieselbe Animation, aber in unterschiedlichen Größen. Ich habe gerade diese quadratische Version erstellt und dann den Pre-Comp überall hingestellt Einfaches Zeug, wirklich nützlich und spart viel Zeit. Okay, das war's also im Grunde für diesen Kurs. Wir sehen uns im nächsten. 5. 04.Fehlerbehebung: Okay, in diesem Kurs werden wir besprechen, wie Sie einige Fehler beheben können, auf die Sie möglicherweise stoßen ohne eine Vorstellung davon zu bekommen wie diese Probleme entstehen Lassen Sie uns also einfach unsere Fallstudie besprechen und uns einige der Fehler ansehen, und uns einige der Fehler ansehen mit denen wir konfrontiert waren. Sie können sehen, dass es hier ein gewisses Textverhältnis gibt, hier ein gewisses Textverhältnis und auch hier gibt es überall Textprobleme. Also, wie kann man das beheben. Es ist wirklich überraschend , dass es beim Exportieren dieser Dateien aus After Effects überhaupt keine Probleme gab. Was ich damit meine, ist, als ich die Animation exportiert habe, was ich tatsächlich gesehen habe. Die Animation in meiner Vorschau war absolut perfekt, okay? Es gab überhaupt keine Probleme. Die Animation sah perfekt aus. Die Animation sah auch hier perfekt aus. Es gab keine Probleme. Es gab nicht einmal ein einziges Problem , das ich hier sehen konnte. Und als das zum ersten Mal tatsächlich passiert ist, hatte ich wirklich große Angst, weil ich nicht verstehen konnte, warum das passiert. Ich verstehe es nicht, weil der Kunde sich oft beschwert hat. Also so reparierst du es tatsächlich. Lassen Sie uns also einfach weitermachen und unser Asset importieren , um zunächst zu verstehen, was tatsächlich passiert ist. Und dann werden wir lernen, welchen Methoden diese Probleme tatsächlich behoben werden können. Okay? Also lass uns einfach weitermachen und unser Diagramm hinzufügen. Lassen Sie uns einfach dieses Projekt schließen und dieses importieren. Okay, hier ist alles hinzugefügt. Okay. Also das ist die Ebene , die das Problem verursacht hat. Okay? Und lassen Sie uns einfach weitermachen und eine sehr einfache Animation erstellen. Okay. Animieren wir einfach nur diese Ebene Also ziemlich einfache Animation. Das ist es. Lass uns einfach versuchen, das zu erkunden. Übrigens haben wir besprochen, dass es einige Gruppenspieler geben wird, und du kannst diese Gruppenspieler auch hier sehen. Okay? Und lass uns einfach weitermachen und du kannst sehen, dass die Gruppenspieler auch deaktiviert oder aktiviert werden können. Okay? Aber diese Schichten haben keine Daten. Nichts ist auf ihnen. Und was Sie tun können, ist im Grunde Gruppenspieler zu löschen. Und deine Komposition wird sauber. Okay, wir haben uns auch mit dieser Funktion befasst. Lassen Sie uns jetzt weitermachen und aktualisieren. Klicken Sie hier, klicken Sie auf unsere Grafik. Und jetzt klicken Sie einfach auf Test. Klicken wir einfach auf die aktuellen Renderings und Sie können die Animation sehen Perfekt. Nun, ich kann hier nicht wirklich hineinzoomen, aber Sie können sehen, dass es hier kein Problem gibt, oder? Nun, hier kommt die Problemlösung ins Spiel. Sie müssen bei Google nach Lottie Preview suchen. Okay. Es gibt LottieFiles Preview . Das kannst du öffnen Es gibt LottieFiles von Lottie und dann versuchen wir einfach, ein paar andere zu finden Lass uns einfach versuchen, mehrere zu finden, okay? Denn je mehr desto besser. Also lass uns einfach Okay sehen, und jetzt gehe ich hier hin, klicke auf Mets Jason, ziehe es hierher. Und Sie sehen, dass auch hier keine Probleme auftreten Nun, weil ich die Ebene vielleicht tatsächlich in Figma repariere, vielleicht ist das genau der Grund, warum das nicht passiert Nein, nein, nein, nein, ich glaube, es passiert hier drüben. Lass uns reinzoomen. Sie können sehen, dass es dieses Problem gibt, aber es wird in unserer Animation nicht wirklich erkannt, was irgendwie seltsam ist. Um das zu beheben, lassen Sie uns einfach weitermachen und schauen, ob wir es auch auf einer anderen Plattform testen können . Okay? Also das ist im Grunde Plug-ins oder lass es, und lass uns einfach auf Plod-Animation klicken Lass es uns einfach per Drag-and-Drop ziehen. Ups, funktioniert nicht. Also lass uns einfach weitermachen, unseren Pfad kopieren, ihn hier einfügen und dann auf Test klicken Sie können sehen, dass es auch hier ein Problem gibt. Und dann lass uns einfach sehen. Und jetzt lass uns das nicht benutzen, lass es. Okay? Sie können also diese Lottie-Vorschauen verwenden, verschiedenen Stilen und auf mehreren Websites unterscheiden, und dann Ihre Animation testen Und es ist sehr, sehr, sehr zu empfehlen, dass, auch wenn Sie sich Ihrer Animation sicher sind, sie nicht länger als 2 Minuten dauert. Testen Sie sie, um bessere Kunden zu erreichen und um außergewöhnliche Arbeit zu erledigen , einen Mehrwert zu bieten, okay Denn das ist es, was Sie von der Masse abheben wird. Okay, also jetzt, wie man es repariert. Es gibt tatsächlich zwei Möglichkeiten, das zu beheben. Nun, diese Probleme werden tatsächlich durch eine sehr einfache Sache verursacht. Es gibt eine Lösung: Sie können auf die Ebene klicken, mit der rechten Maustaste klicken und Formen aus Text erstellen. Nun, das wird das Problem beheben. Jetzt ist das Lösung Nummer eins. Nehmen wir einfach an, es gibt einen ganzen Absatz, und das wird Ihrem System hinterherhinken. Sie möchten, dass die Textebene tatsächlich erhalten bleibt. Sie können hier doppelklicken und dann müssen Sie das untere Feld einfach so aufteilen. Okay? Und du kannst es auch ein bisschen so fallen lassen. Okay? Und dann lassen Sie uns einfach auffrischen. Klicken wir einfach noch einmal auf Export und dann erneut auf Testen. Lassen Sie uns einfach unsere Datei ersetzen. Lass uns auf Rendern klicken. Lassen Sie uns einfach eine Minute warten und sehen, wie das ausgeht. Okay, die Datei ist explodiert. Lass uns einfach weitermachen und unsere neue Datei testen. Lass uns hier klicken und lass uns nur die von Lottie Lab machen. Ja. Lass uns unsere Datei einfach per Drag-and-Drop ziehen. Lassen Sie uns die Ansicht vergrößern und sehen, unser Problem gelöst wurde. ziemlich einfach, nichts zu tun, um es zu verkomplizieren, sondern nur eine Möglichkeit, ein sehr kompliziertes Problem zu lösen, für das Sie möglicherweise keine Lösung im Internet finden, und das wurde nur durch Erfahrung gelernt Okay. Ein weiteres Problem, mit dem Sie konfrontiert werden könnten, ist, wenn Sie es tatsächlich haben. Das passiert normalerweise, wenn Sie mit Farbverläufen arbeiten, nicht mit festen Ebenen Was tatsächlich passiert, ist, sagen wir einfach, dass es diesen Farbverlauf gibt , oder sagen wir einfach, dass es diese Formebene gibt, okay? Und wir haben eine wirklich schöne Farbe im Farbverlauf. Nun, was im Grunde passiert, ist, dass wir es einfach in einen Rahmen ziehen. Lass mich einfach weitermachen und es hier drüben hinstellen. Okay. Lass es mich einfach an After Effects schicken. Was im Grunde passieren wird, ist der Farbverlauf hier manchmal wirklich gut aussieht. Es gibt keine Probleme mit Ihrem Design und alles sieht perfekt aus. Okay? Nun, wenn Sie die Datei tatsächlich exportieren, wenn Sie sie hier in der Vorschau ansehen, wird die Datei perfekt aussehen Es gibt keine Probleme, aber wenn Sie es auf der Website testen, werden Sie auf ein wirklich seltsames Problem stoßen Zum Beispiel wird dieses rote Rechteck orange sein, oder es wird wirklich schwarz sein. Und du bist nur ein Rätsel, du wirst einfach hierher zurückkommen, die Farben überprüfen und sehen, ob du hier vielleicht einen Farbverlauf hinzugefügt hast. Aber da ist nichts. Es gibt keine Auswirkungen, nichts. Es ist alles perfekt. In diesen Szenarien müssen Sie eigentlich nur die Ebene löschen, okay? Lösche es einfach. Entfernen Sie das Feld nicht, fügen Sie eine weitere Füllung hinzu. Nein, das wird nicht funktionieren. Es ist nur eine Art Fehler im Code, weil es nur eine Punkt-Json-Datei ist, die nur eine Punkt-Json-Datei im Grunde eine Punkt-JavaScript-Datei ist, oder? Und es gibt eine Art Code-Fehler, der tatsächlich passiert Was Sie also tun müssen, ist im Grunde nur ein Werkzeug zur Auswahl Ihres Rechtecks zu erstellen Okay. Mach weiter und erstelle die Form. Und was Sie dann tun können, ist, wenn Sie Probleme haben, es von hier aus zu kopieren, dann gehen Sie einfach in Ihre Figur und klicken Sie darauf Sie können den Wert von hier kopieren. Alt-Klick hier. Da ist der Wert hier. Drücken Sie Okay. Lass uns unseren Gradienten einfach ganz schnell so korrigieren. Oder manchmal passiert es auch, dass die Positionierung des Gradienten auch durcheinander ist In diesen Fällen sollten Sie also diese Methode verwenden, anstatt den Verlauf einfach neu anzuordnen, da das manchmal auch nicht funktioniert Sie werden einfach auch diese Farbe kopieren , klicken Sie hier. Dann einfach den Wert wie diesen. Ziemlich einfach, nicht zu kompliziert. Und wenn es wirklich, wirklich komplizierte Verläufe gibt und Sie den Verlauf nicht wirklich neu erstellen können oder wenn mehrere Farben hinzugefügt werden und das hier grundsätzlich nicht hinzugefügt werden kann, vielleicht kommt eine Unschärfe aus dieser Richtung, es kommt eine Unschärfe aus dieser Richtung, es kommt eine Unschärfe aus dieser Richtung, Dann mach einfach weiter, klicke auf die Ebene, exportiere sie als PNG und füge das PNG hinzu Okay, versuchen Sie, dem Kunden diese Dinge mitzuteilen bevor Sie fortfahren, denn Sie können ihm einfach sagen , dass es sich um einen Codefehler handelt, nicht um Ihr Problem, und Sie sind nicht derjenige , der kein Experte ist und Sie sind nicht derjenige , der kein Experte ist, aber Sie wissen tatsächlich, wie Sie den Fehler beheben können. Okay, das erklärt es also. Und was nun die Cryptia-Animation angeht, gibt es etwas, das ich dir zeigen sollte Welches ist diese Header-Animation. Ich glaube, das hat die Animation , die ich dir zeigen möchte. Lassen Sie mich nur sichergehen, dass das wirklich der Richtige ist? Ja, das ist der eine. Also Geko ist wirklich intelligent was das und die Art und Weise angeht, wie er das Design gemacht hat , weil wir schon vorher darüber gesprochen haben, dass ich auch die Zahlen animieren Also hat er einfach alles in 11, eins, zwei, zwei, zwei, zwei, drei, drei, vier, 44 erstellt eins, zwei, zwei, zwei, zwei, drei, drei, vier, 44 Es gibt zwei Möglichkeiten, wie Sie die Zahlenanimation neu erstellen können . Im Grunde können Sie einfach all diese kopieren und in einen Frame einfügen und sie dann einfach in After diese kopieren und in einen Frame einfügen und sie dann Effects übernehmen Dann konvertieren Sie diese einfach in Formebenen und verschieben Sie sie dann einfach so. Eine Lösung. Eine andere Lösung ist auch ziemlich einfach, nicht wirklich zu kompliziert. Also lass mich einfach weitermachen und dir das auch zeigen. Lassen Sie uns zunächst einen Blick darauf werfen, und dann zeige ich Ihnen die Lösung. Die Nummer ist hier. Danach haben wir die 10561, 794. Sie können sehen, dass alles nach oben geht, um den erforderlichen Zahlen zu entsprechen Ziemlich einfach. Okay. Nichts allzu Kompliziertes. Und es gibt noch einen etwas kürzeren Weg, das zu tun, nämlich, lass uns das einfach schließen. Und lassen Sie mich Ihnen auch zeigen, wie Sie die Animation zum Aufsteigen der Zahlen erstellen. Okay. Lass uns einfach weitermachen und auf die Textebene bei 5.785 klicken Okay. Was wir jetzt tun werden , ist im Grunde in das Lass uns einfach weitermachen und unser Effekte-Bedienfeld verwenden. Okay. Und dann machen wir es einfach größer. Lass uns einfach weitermachen und nach Slider suchen. Okay? Jetzt füge ich diesen Schieberegler hier hinzu. Jetzt denkst du vielleicht, wie wir das zum Laufen bringen sollen? Ziemlich einfach, mach dir keine Sorgen, wir kriegen es hin. Und was ich tun werde, ist das im Grunde meinem Slider zuzuordnen . Ziemlich einfach. Und dann müssen Sie im Grunde genommen eine mathematische Punktrunde hinzufügen. Das ist es. Okay. Und wenn es einen Fehler gibt, können Sie diesen Teil grundsätzlich scannen , weil ich nicht mit zu vielen Ausdrücken arbeite, also verstehe ich das vielleicht falsch. Sie können im Internet weitermachen und das einfach kopieren und einfügen und dann einfach fragen, ob dieser Ausdruck repariert werden soll. Okay? Okay, Sie müssen also einen Punktwert hinzufügen. Jetzt heißt es: Der Fahrer kontrolliert den Punktwert, lassen Sie uns ihn einfach kopieren. Mal sehen, ob das funktioniert. Das funktioniert. Ziemlich einfache Lösung. Okay. Lass es uns einfach ziehen. Wow. Das funktioniert. Das funktioniert wirklich gut. Sagen wir einfach, dass unsere Nummer war, an die ich mich nicht mehr genau erinnere, also schauen wir uns hier 5785 an Okay. Machen wir es auf Null. Klicken Sie auf das Schlüsselbild, drücken Sie U und nehmen wir an , dass meine Animation 1 Sekunde lang sein muss , fünf, sieben, 85. Richtig, einfach. Okay. Ziemlich einfach. Lass uns einfach auf unsere Tastatur drücken. Jetzt muss ich weitermachen. Jetzt klicken wir einfach mit der rechten Maustaste hier drüben und erstellen Formen aus Text. Machen Sie weiter, ein Keyframe, machen Sie dasselbe. Gehen Sie einen Keyframe weiter, machen Sie dasselbe und machen Sie das so lange, bis wir mit allen Keyframes fertig sind Okay, diese sind also erstellt. Jetzt schalte ich meine Ebene einfach so aus, weil Sie diese Ebene in der Komposition behalten sollten, bis das Projekt nicht abgeschlossen ist, weil der Kunde möglicherweise verlangt, dass die Nummer geändert wird weil Sie diese Ebene in der Komposition behalten sollten , bis das Projekt nicht abgeschlossen ist , weil der Kunde , also können Sie das einfach tun. Und jetzt werde ich einfach die Ebenen zuschneiden. Und jetzt klicken wir einfach auf Effekt, indem wir E drücken. Wir müssen diese Schieberegler löschen. Okay. Und ich denke, dass es auch einen schnelleren Weg gibt, das zu tun. Also lass mich das versuchen. Lass uns sehen, ob es funktioniert. Ich bin mir nicht sicher, wie es gemacht werden sollte. Also vergib mir. Nein, es funktioniert. Also ja, es funktioniert, und was Sie dann tun können, ist im Grunde einfach die Keyframes so wie wir an unserem vorherigen Tab gearbeitet haben. Gehen wir zurück zur Standardeinstellung und ordnen die Ebenen dann einfach so an. Okay? Lassen Sie uns also einfach eine Vorschau unserer Animation sehen. S, es sieht wirklich gut aus. Und da wir jetzt nur noch neun oder zehn Schichten von Formebenen haben , wird das nicht nachlassen. Dadurch wird die Dateigröße nicht erhöht. Es funktioniert wirklich gut. Ich habe das mehrmals gemacht. Also das ist etwas, das ich auch unterrichten musste. Und das ist es im Grunde. Und abgesehen davon gibt es nur ein paar einfache Animationen , die ich Ihnen auch zeigen kann. Es ist nicht wirklich viel los. nur ein paar Masken zum selben Bild hinzugefügt, und dann schweben die Flaggen im Grunde einfach. Einfaches Zeug. Schauen wir uns einfach unseren nächsten Abschnitt an. Okay, also die Animation mit der gleichen Zahl. Ich habe tatsächlich dieselbe Karte aus der anderen vorherigen Animation verwendet , ihre Animation, und sie dann einfach hier hinzugefügt. Sie können sehen, dass die Animation hier hinzugefügt wurde, und ich habe nur einen Teil davon hierher gezogen. Dann gibt es nur noch diese traumhafte Pfadlinie, einige grundlegende Skalierungs- oder Trimm-Pfadanimationen auf den Linien, dann ist das im Grunde alles. Es geht nichts allzu Kompliziertes vor sich. Ziemlich einfach. Danach haben wir diese andere Animation. Welches ist das. Okay, wir werden das Problem hier beheben, damit ihr das jetzt auch wisst. Danach hatten wir dieses Problem auf der Textebene. Sie können sehen, dass ich das Feld vergrößert habe weil es ein bisschen so aussah. Also habe ich es einfach stark erhöht, um das Problem zu beheben. Okay. Einfaches Zeug, nichts allzu Kompliziertes. Die Animation ist auch ziemlich einfach. Dies wurde von Charakter zu Charakter durchgeführt , da es nicht zu viele andere Elemente gab. Also habe ich einfach den Text Shaplayer erstellt und dann einfach alles um ein Schlüsselbild nach dem anderen verschoben. Das ist es. Einfaches Zeug. Nichts allzu Kompliziertes. Und dann nur eine einfache Skalierungsanimation auf dieser Schaltfläche. Okay. Danach haben wir diesen sechsten Abschnitt , der diese Wallet-Animation ist. Ziemlich einfach gemacht, nur ein Strich drüber. Sie können sehen, dass es im Grunde maskiert ist, oder? Im Grunde hatte die Brieftasche eigentlich eine einzige Form. Also habe ich einfach den oberen Teil gelöscht und mit einem Strich neu erstellt Also musst du manchmal auch einfach ein paar kleine Änderungen am Design vornehmen Wenn Sie eine Animation ausführen. Dann gibt es nur einfache Animationen, oder? Schon wieder nichts allzu Kompliziertes. Und dann füge ich hier einfach Rotationsanimation und Skalierungsanimation hinzu. Ziemlich einfaches Zeug, nichts allzu Kompliziertes. Und dann haben wir im Grunde diesen wirklich schönen Effekt mit dem H-Effekt. Wenn das vorbei ist, passiert tatsächlich, dass dieser Frame animiert wird Okay, lassen Sie uns einfach weitermachen und einen Blick darauf werfen. Sie können sehen, dass die Opazität grundsätzlich zunimmt. Also auch hier nichts allzu Kompliziertes . Einfaches Zeug. Sehr einfach zu machen. Der Cursor animiert im Grunde nur von selbst, also unabhängig von den anderen Elementen, oder? Ziemlich einfaches Zeug, und das ist es im Grunde. Und falls Sie neugierig sind, wie die endgültige Website aussieht, lassen Sie mich Ihnen das jetzt auch zeigen. Und Sie werden in einer Minute sehen, wie optimiert die Lotterien sind. Siehst du? Jetzt öffne ich das im Inkognitor-Modus, damit du sehen kannst, wie schnell alles geladen wurde Die Animationen funktionieren wirklich gut, wirklich reibungslos, oder? Ziemlich einfaches Zeug, wirklich gut gemacht. Siehst du, wie schön das alles aussieht, oder? Einfaches Zeug. Und noch einmal ein großes Dankeschön an Jakafz für die Erstellung dieses großartigen Projekts Und es war eine wirklich großartige Zusammenarbeit. Und die prozentuale Animation diesen Abschnitten wird auch auf die gleiche Weise erstellt. Das Gleiche. Und ja, das ist es im Grunde. Das war's also für diesen Kurs. Wir sehen uns im nächsten. 6. Outro: Herzlichen Glückwunsch zum Abschluss dieses letzten Kurses. Ich hoffe, dass Sie alles gelernt haben, was ich hier gelehrt habe. Bitte üben Sie und lassen Sie mich wissen, wenn Sie Hilfe benötigen. Du kannst mich jederzeit auf Instagram erreichen . Sie können auch auf meinem LinkedIn nachschauen wenn Sie Fragen haben, wenn Sie irgendwelche Unklarheiten haben, wenn Sie Hilfe bei dem Projekt benötigen, wenden Sie sich bitte Ich würde euch gerne helfen. Bitte stellen Sie sicher, dass Sie einige Arbeiten einreichen. Und tagge mich auch, wenn du etwas wirklich Schönes kreierst. Ich würde auch gerne deine Arbeit rezensieren. Wenn es in Lottie etwas Neues zu unterrichten gibt , würde ich gerne eine weitere Klasse einrichten Wenn es etwas gibt, das ich im Unterricht verpasst habe, lass es mich bitte wissen, und vielleicht erstelle ich eine neue Aber ich glaube, dass das alles abdeckt, und jetzt bist du bereit, der beste Ein-Person-Schöpfer zu werden . Ich wünsche Ihnen allen viel Glück und viel Glück. Hoffentlich werde ich auch neue andere Dinge unterrichten, also bleiben Sie dran. Aber Lottie ist jetzt fertig und ich wünsche dir alles Gute Wir sehen uns im nächsten. Passen Sie auf sich auf. Tschüss.