Cavalry für Anfänger: So animieren Sie Benutzeroberflächen von Software/Website/App wie ein Profi

1. Einführung: Wenn Sie jemals eine Anzeige für eine Software, eine App oder eine SAS-Plattform wie Base 44 Weeks, Canva, Figma gesehen oder eine SAS-Plattform wie Base 44 Weeks, Canva, haben, ist Ihnen wahrscheinlich Alle ihre Animationen sehen sehr flüssig filmisch aus und jede Entscheidung, jede Handlung Die Animationen lassen das Produkt cool aussehen. Eine Schaltfläche wird angeklickt und andere UI-Elemente reagieren , wenn sich die Ansicht dreht Alle möglichen UI-Elemente reagieren auf Interaktionen, um auf einen Blick zu zeigen, was die Software kann Also, wie machen sie das? erstellen sie diese Animationen? Was die meisten Leute nicht wissen, ist, dass für diese Art von Animation kein riesiges Team von Leuten benötigt wird. Erfordert weder Adobe After Effects jahrelange Erfahrung im Motion-Design. Es erfordert die Kenntnis des richtigen Tools und des richtigen Ansatzes, mit denen Sie sehr schnell komplexe Zwei-D-Animationen erstellen können. Und das ist das Tool, das ich Ihnen heute beibringen werde. In diesem Kurs werden wir eine dieser Animationen von Grund auf neu erstellen, eine dieser Animationen von Grund auf neu indem wir ein kostenloses 2-D-Design - und Animationstool namens Cavalry Lass mich dir zeigen, was wir machen werden. Um Sie mit den Tools vertraut zu machen, die Cavalry zu bieten hat, beginnen wir mit einem einfachen Abonnement-Button Wir werden die systemeigenen Formwerkzeuge von Cavalry verwenden und dann ein Benachrichtigungssymbol hinzufügen , ihm einen Schlagschatten geben und dann einen Mauszeiger animieren, der sich auf einem gekrümmten Pfad bewegt und auf die Schaltfläche klickt , wodurch eine visuelle Reaktion entsteht, die Und dann gehen wir zur nächsten Ebene über, wo wir zwei Benutzeroberflächenkarten entwerfen werden, eine Benutzerprofilkarte und eine Nachrichtenkarte Und dann werden wir eine Schlagzeile entwerfen , die aussieht wie einer dieser CNBC- oder Bloomberg-Titel Sie in ihren Dokumentarfilmen sehen, und dann werden wir die gesamte Sequenz animieren Dies ist ein relativ einfaches, aber elegantes Projekt, das Ihnen einige der am häufigsten verwendeten Tools in Cavalry vorstellt am häufigsten verwendeten Tools in Cavalry Jede Technik baut auf der vorherigen auf, und am Ende haben Sie eine fertige Benutzeroberfläche, die haben Sie eine fertige Benutzeroberfläche Sie potenziellen Kunden präsentieren können sowie die Fähigkeiten, coole Animationen für Ihr eigenes SAS- oder Softwareprodukt zu erstellen coole Animationen für Ihr eigenes SAS- oder Softwareprodukt Mein Name ist Ken und ich unterrichte UX-Design für Benutzeroberflächen. Webdesign und Three-D-Modeling auf Skillshare und YouTube Das ist Kavallerie für Anfänger, der praktische Weg. Bist du bereit? Wenn du bereit bist, lass uns loslegen. 2. Kavallerie im Überblick: Nur um einen schnellen Überblick darüber zu haben , was wir uns ansehen, bevor wir anfangen Wenn Sie schon einmal eine Videobearbeitungssoftware verwendet haben, verstehen Sie wahrscheinlich bereits das meiste, worüber wir hier sprechen werden. Also, das ist natürlich die Zeichenfläche und das ist deine Szene Hier werden Sie Elemente hinzufügen und sie animieren. Und wenn Sie Elemente hinzufügen, werden sie hier im Szenenfenster angezeigt, und hier erscheinen sie als Ebenen Das sind Ebenen. Und das ist der Zeitplan. Hier verwalten Sie Farben. Wenn Sie also ein Objekt ausgewählt haben, können Sie dessen Farbe hier ändern. Aber ich benutze diese Seite selten. Ich gehe einfach zu den Attributen denn wenn Sie hier etwas ausgewählt haben, werden seine Attribute hier angezeigt und Sie können sehr viele Aspekte ändern. Wir können zum Beispiel zur Feldfarbe gehen und einfach darauf klicken und sie hier ändern. Dies ist der ausgewählte Artikel. Dies sind nur Abkürzungen, die das Kavallerie-Team hier für die häufig verwendeten Funktionen, häufig verwendeten Deformer und andere Also haben sie darüber nachgedacht, sie dem Benutzer genau hier zugänglich zu machen sie dem Benutzer genau hier zugänglich zu Das sind also Abkürzungen, und wir werden sehen , wie wir einige davon verwenden können , wenn wir an unserem Projekt arbeiten. Schließlich ist Ihnen bereits aufgefallen, dass ich zum Zeichnen dieser Rechtecke dieses Rechteckwerkzeug ausgewählt und mit dem Zeichnen begonnen Dies sind die verschiedenen Formen, die Sie zeichnen können. Und natürlich werden wir in der Klasse sehen, wie wir einige dieser Formen verwenden können , um unsere UI-Komponenten zu zeichnen. Das ist also nur ein kurzer Überblick darüber, was Sie über die Benutzeroberfläche wissen müssen. Die andere Sache, die ich mir ansehen möchte, ist , wie man einen neuen Projektordner erstellt. Ich werde also jedes Mal, wenn Sie ein neues Projekt, ein neues Cavallery-Projekt starten möchten, sicherstellen, dass sich das Projekt in einem eigenen Ordner befindet , sodass alles, woran Sie arbeiten, alles, was Sie importieren, alles, was Sie hier im Projekt speichern , in nur einem Ordner enthalten ist Der Weg, das zu tun, ist, hier zu diesem Drop-down-Menü zu gehen und „Erstellen“ zu sagen Ich gehe zu meinen beiden D-Projekten und hier werde ich einen neuen Ordner erstellen. Ich nenne es Projektname. Wählen Sie dann Ordner. Wie Sie sehen können, ist es hier bereits hervorgehoben. Sie können auch einfach doppelklicken, hineingehen und dann wählen. Jetzt hat sich das in den Projektnamen geändert. Dies ist eine Szene im Ordner mit dem Projektnamen. Wenn wir darauf klicken, lassen Sie mich das einfach schließen. Wenn ich es übertreibe, heißt es Projektbeschreibung. Es beschreibt jeden Ordner, der in dem Ordner erstellt wurde , den wir gerade erstellt haben. Wir haben einen Szenenordner erstellt, der Ordner rendert. Ein Assets-Ordner und all diese anderen Ordner. Wenn ich das schließe und Control S, Notice now sage , wird es automatisch in den Szenenordner verschoben. Das ist der Projektordner, den wir gerade erstellt haben. Wenn ich nach oben gehe, haben wir, wie Sie sehen können, einen Szenenordner. Automatisch können wir die Szene darin speichern. Wir können verschiedene Szenen haben. Wenn ich Control N für neu sage, Control N und Control S, um es zu speichern. Wir können eine zweite Szene in diesem Projektordner speichern. Wir können also mehrere Szenen speichern, wenn wir verschiedene Szenen oder Vorkompositionen für eine Gesamtszene haben möchten verschiedene Szenen oder Vorkompositionen für eine Gesamtszene Also kann ich diesem Projekt den Namen eins geben und es speichern. Jetzt haben wir zwei Szenen in diesem Projektordner. Das war's für den Moment. Dies war nur eine kurze Einführung und Überblick über die Cavalry-Benutzeroberfläche und die Erstellung eines Projektordners Lassen Sie uns in der nächsten Lektion über den Dreh- und Angelpunkt sprechen , der sehr wichtig ist. Wir sehen uns in Kürze. 3. Drehpunkt: müssen über den sogenannten Drehpunkt sprechen weil er für Animationen sehr wichtig ist und wir uns immer noch in dem Beispielprojektordner befinden, und wir uns immer noch in den wir erstellt haben. Wir schauen uns also nur ein Beispiel an. werden wir einen neuen Projektordner erstellen In der nächsten Lektion werden wir einen neuen Projektordner erstellen. Jetzt möchte ich also ein Rechteck hinzufügen. Also wähle ich einfach das Rechteck und zeichne dort etwas, zeichne dort ein anderes. Wenn ich das Auswahlwerkzeug auswähle, hat das Rechteck dieses Gizmo genau hier in der Mitte Wenn ich dieses auswähle, befindet sich der Gizmo auch lokal in der Wenn ich jedoch die beiden auswähle, indem ich die Umschalttaste gedrückt halte und die beiden Strg G auswähle. Nun, wie Sie sehen, befindet sich der Drehpunkt in der Mitte. In Ordnung. Wenn ich Strg Z rückgängig mache, wenn ich dieses Rechteck auswähle und es genau hier platziere und dann die beiden auswähle, Strg G, wirst du feststellen, dass der Drehpunkt immer noch in der Mitte des Bildschirms ist. Wenn wir also versuchen, diese Gruppe zu animieren, indem wir sie vielleicht drehen, dreht sie sich um die Mitte der Zeichenfläche, obwohl wir vielleicht möchten, dass sie sich genau hier in der Mitte der beiden dreht Das bedeutet, dass wir beim Zeichnen oder Entwerfen unserer Benutzeroberflächenelemente sehr vorsichtig sein müssen, wo wir diesen Drehpunkt platzieren müssen, wo wir diesen Drehpunkt Zeichnen oder Entwerfen unserer Benutzeroberflächenelemente Okay, wie Sie sehen können, gibt es natürlich ein Pivot-Attribut, wenn wir eine Gruppe oder sogar eine beliebige Form ausgewählt haben ein Pivot-Attribut, wenn wir eine Gruppe oder sogar eine beliebige Form ausgewählt haben. Und Sie können es verschieben, wenn ich es zum Beispiel im X verschiebe Wie Sie sehen, bewegen wir es. Wenn ich eine Gruppe auswähle, können wir auch ihren Drehpunkt verschieben. Und beachten Sie, dass es die Formen oder die Gruppe sind, die sich relativ zum Drehpunkt bewegen. Der Drehpunkt bleibt in der Mitte. Das bringt uns zu dem Schluss, den ich dir geben wollte. Wenn wir ein Benutzeroberflächenelement zeichnen, würde ich Ihnen raten, es genau hier in der Mitte zu zeichnen , denn wenn Sie verschiedene Elemente in der Zeichenfläche entwerfen und sie dann gruppieren, wird der Drehpunkt zur Mitte gehen, und Sie müssen diese Gruppe manuell in die Mitte verschieben, genauso wie wir es mit dieser Gruppe gemacht Es ist also immer am besten, diese Gruppe hier einzuzeichnen Fügen Sie einfach die Elemente hinzu, die Sie erstellen, und Sie werden sie relativ zum Gizmo genau hier in der Mitte entwerfen . Und wenn Sie sie alle gruppieren und verschieben, bewegen sie sich alle so, dass sich das Gizmo bereits in der Wir werden sehen, wie das geht , wenn wir anfangen zu zeichnen. Das war also nur ein kurzer Überblick über die Dreh- und Angelpunkte, und das müssen wir im Hinterkopf behalten. 4. Schaltfläche entwerfen: Lass uns einen Knopf zeichnen. Bevor wir das tun, lassen Sie uns ein brandneues Projekt erstellen , denn das ist jetzt ein ernstes Projekt. Also gehe ich hier zu dem Drop-down-Menü, erstelle und lass uns einfach zum übergeordneten Ordner gehen, und ich werde einen neuen Ordner erstellen. Nenn es Button. Geben Sie ein und wählen Sie dann. Ordnung, wir haben also diesen Button-Ordner und er hat all diese Ordner erstellt. Also jetzt wollen wir das nicht speichern. Ich werde einfach Control N sagen und dann verwerfen, weil wir eine neue Szene erstellen wollen Control N ist eine neue Szene, kein neues Projekt. Also verwerfen Sie diese Szene. Wir können S steuern und es wird im Szenenordner des Button-Ordners gespeichert Szenenordner des Button-Ordners Und der Name ist Button Dot CV. Also los geht's. Wir haben einen Button-Ordner und eine Button-Punkt-CV-Szene. Jetzt möchte ich zu Magnific.com wechseln , das offiziell FreePeek heißt Heutzutage nennen sie es Magnific und ich möchte zu den Aktienanlagen übergehen Das sind Vektoren. Ich möchte nach abonnieren suchen. In Ordnung, ich hatte nach einem schönen Abonnement-Button gesucht. Die Farbe sollte rot sein. Es gibt eine, die ich wirklich mag, aber diese. Ich mag diesen, aber ja, lass uns weitermachen und diesen erstellen. Also werde ich einfach das Bild JPEG herunterladen, oder du kannst einfach einen Screenshot machen. Los geht's. Jetzt, zurück in Cavalry, werde ich darauf doppelklicken Und gehe zum Download-Ordner und hier ist die Schaltfläche, die wir gerade heruntergeladen Also hier ist es. Ich werde es einfach hier abgeben. Es ist zu groß. Also kann ich die Umschalttaste gedrückt halten und auf dieses Quadrat hier klicken und nach innen ziehen , um es zu verkleinern Vielleicht diese Größe. Zoomen Sie jetzt mit einem Mausrad hinein und hier ist das Bild. Also werde ich es sperren, sodass es nicht auswählbar ist. Weil das, was wir machen wollen und es wurde zur Mitte der Zeichenfläche hinzugefügt Wenn ich also die Alt-Taste gedrückt halte hier ein Rechteck zeichnen möchte, kann ich das Rechteckwerkzeug auswählen und zeichnen und fertig Aber wenn ich es genau in der Mitte der Zeichenfläche zeichnen möchte , halte ich es gedrückt und klicke es einfach Es wird ein Rechteck hinzugefügt , das direkt am Weltursprung liegt, 0,00 in X und Y, wie Sie an den Attributen sehen können, Rechteck Position X Null, Y Null Jetzt haben wir hier also auch den primitiven Typ, unter den Attributen des Rechtecks und unter den Attributen jeder anderen Form hier, wenn ich eine Ellipse hinzufüge und die Ellipse dort zeichne Die Ellipse ist hier ausgewählt. Sie können sehen, dass wir hier den primitiven Typ haben. In diesem Abschnitt können Sie einfach die Form, die Sie gerade gezeichnet haben, hier in eine andere Form ändern, falls Sie es sich anders überlegen. Also kann ich meine Meinung ändern und sagen, ich möchte nicht, dass das eine Ellipse Ich wollte, dass es ein Rechteck ist, also kann ich hierher kommen und Rechteck sagen Und so wird es ein Rechteck. Ich kann mit dem Auswahlwerkzeug hierher kommen , das auswählen und sagen, ich wollte, dass das eine Ellipse ist, und jetzt ist es eine Ellipse In diesem Abschnitt mit primitivem Typ können Sie die Form beeinflussen, die Sie gerade als Primitiv bohren Lassen Sie mich das alles rückgängig machen und dann bleibt das hier. Wenn wir also die Größe dieses Rechtecks im X vergrößern wollen , gehen wir zur Breite genau hier über, zur primitiven Größe, zur Rechteckbreite. Und das ermöglicht uns, wenn wir zum Eckenradius gehen, können wir den Eckenradius auf diese Weise vergrößern. Wenn ich nun das Steuerelement Z rückgängig mache, waren Sie vielleicht versucht anzunehmen , dass Sie, wenn Sie die Breite dieses Rechtecks vergrößern wollen, zur Skala X und Valla wechseln müssen Aber wenn wir den Eckenradius vergrößern , sieht er gestreckt Behalte das also im Hinterkopf. Also werde ich das wiederholen dann den Radius bis zu diesem Punkt vergrößern, vielleicht 200, nur um das Ganze abzurunden Tatsächlich können wir das einfach zur Seite legen und es immer sehen Wir brauchen es dort also nicht , weil wir nicht versuchen, es zurückzuverfolgen. Also wähle ich das aus, um es zu entsperren, ziehe es zur Seite und zoome es dann hinein. Jetzt, wo wir das haben, können wir D steuern, um es zu duplizieren. Jetzt haben wir noch einen kleineren wie diesen, reduzieren Sie die Breite und die Höhe. Wir können die Farbe ändern, nur um sie zu unterscheiden. In Ordnung. Jetzt wählen wir einfach diesen äußeren aus. kann zur Füllung gehen, auswählen und ich gebe ihr diese dunkelrote Farbe Wählen Sie dann diesen kleineren aus und gehen Sie zum Feld. Lass uns ihm ein leuchtendes Rot geben. Und lassen Sie uns zum Schlag des kleineren gehen und den Schlag aktivieren. Und lass es uns auch rot machen, aber etwas dunkler. Schlaganfall. Was ist mit dort? Nein. Ja, das gefällt mir. Jetzt klicke ich auf Hold on At, weil hier alles in der Mitte ist. At und klicken Sie auf T. Wie Sie sehen können, befindet sich das Gizmo nun Wie Sie sehen können, befindet sich das Gizmo versetzt zum Text. Wir wollen den Text Gehen wir zu den Attributen des Textes, weil er hier ausgewählt ist. Gehen wir zur vertikalen Ausrichtung. Jetzt ist es im Verhältnis zum Gizmo mittig ausgerichtet. Richten wir es auch so an der Mitte aus. Und jetzt ändern wir das, um zu abonnieren. Wir können ihm diese Farbe geben. Es ist nicht weiß, sieht aus wie helle Creme. Ich liebe es. Wenn du diese Glocke hinzufügen möchtest, können wir zu Ich hatte svgple.com geöffnet gehen Sie können hierher kommen und nach einer Glocke oder Benachrichtigung suchen. Zuerst hast du an Alright gedacht. Also lass mich das einfach auswählen. Sie können die Farbe bearbeiten, bevor sie herunterladen, wählen Sie diese aus. Wenn wir wollen, dass es diese Farbe ist. Lass mich das auswählen. Gehen Sie zur Füllung, wählen Sie die Kopie aus, gehen Sie hierher, fügen Sie sie ein. Dann sagen wir, exportiere ein SVG. Also jetzt geht's los. Wir haben das SVG. Ich kann das einfach hierher ziehen und ablegen. Los geht's, oder doppelklicken Sie darauf und gehen Sie zum Download und klicken Sie darauf. Also hier haben wir die SVG-Ripple. Ich werde es hier als Asset-Ebene einfügen. Wenn ich es auswähle, kann ich es gedrückt halten und die Shift-Taste drücken und die Größe reduzieren und es so zur Seite schieben. Schieb das zur Seite. Ich glaube, das gefällt mir. Oder ist es zu groß? Eine Schicht. Du solltest das auch auswählen, ich möchte die Höhe reduzieren. Also auch dieser, reduziere die Höhe. Ich bewege es einfach mit meinem Auge, um die Größe zu beurteilen. Ich glaube, ich liebe diese Größe. Also lass uns das jetzt einfach löschen. Und jetzt haben wir einen Knopf. Drücken Sie S, um es zu speichern, und unsere Taste ist fertig. in der nächsten Lektion an, Schauen wir uns in der nächsten Lektion an, wie man einen Mauszeiger entwirft. Wir sehen uns in Kürze. 5. Entwerfen eines Mauszeigers: Jetzt ist es an der Zeit, einen Mauszeiger zu entwerfen. Jetzt weiß ich, was du denkst. Hey, Ken, warum gehst du nicht einfach zu SVG Repo und suchst nach einem Mauszeiger Mauszeiger. Wir haben so viele von ihnen. Oder einfach Cursor. Wir haben so viele von ihnen. Und das stimmt, und wir wollen eine zeichnen , die so aussieht. Und der Grund, warum wir das tun ist, dass ich nach einem Grund suche , warum wir hier lernen können , wie man das Stiftwerkzeug benutzt. also zunächst Lassen Sie uns diese also zunächst zu einer Schaltfläche gruppieren. Also habe ich sie alle ausgewählt, Strg G, wähle die Gruppe, Enter. Taste. Wenn ich nun die Gruppe auswähle und sie verschiebe, befindet sich der Drehpunkt, wie Sie sehen, immer in der Mitte. Wenn ich also die Rotation animiere, passiert sie genau in der Mitte, genau wie wir es wollen Jetzt möchten wir vielleicht, dass es an einer anderen Stelle passiert. Wir können den Drehpunkt verschieben. Lass mich das einfach rückgängig machen und es in der Mitte belassen, aber ich werde es verstecken. Fügen wir nun ein Rechteck in der Mitte hinzu. Also raus, gedrückt halten und klicken. Da haben wir's. Hineinzoomen. Fügen wir eine Zeile hinzu. Halte die Maustaste gedrückt und klicke. Da haben wir's. Jetzt gehe ich, während die Zeile ausgewählt ist , Strg D drücken, um sie zu duplizieren. Jetzt haben wir Linie und Linie eins, und ich werde Linie eins um 90 Grad drehen. Ordnung. Jetzt wähle ich diese Linie erneut aus, Strg D, und ziehe sie einfach nach unten, vielleicht bis zu der Stelle, irgendwo unten. Es muss nicht genau sein, denn wir wollen dieses Werkzeug jetzt auswählen können, das Stiftwerkzeug und sicherstellen , dass das Einrasten aktiviert ist, damit Sie so an den Ecken rasten können, dann so an dieser Linie, dann an der anderen Ecke, dann an der anderen Ecke, dann an der Stelle genau dort ausrasten und schließlich genau dort. Jetzt können all diese anderen gehen. Die anderen waren nur Richtlinien. Jetzt haben wir einen schönen, schönen Mauszeiger. Die andere Sache, die wir tun wollen, ist zum Schlag überzugehen. Und was den Verbindungsstil angeht, sagen wir rund. Okay, gehen wir zur Füllfarbe und ändern , damit wir sie hell machen können Und der Strich kann ein bisschen heller sein. Und lass uns zur Rotation gehen. Form, Drehung, sagen wir 20 Grad. Wenn Sie auf unseren Mauszeiger schauen und auf den Cursor, den wir gerade bohren, ist die Drehung fast dieselbe. 20 Grad. Lassen Sie uns es jetzt auswählen. Lass uns die Größe reduzieren. Also skalieren. Wenn ich diese Skala reduziere, wird das die X-Skala reduzieren. Aber wenn ich die Taste gedrückt halte, werde ich sowohl X als auch Y verkleinern. Ich möchte, dass es klein Ziehen wir es einfach so zur Seite. Dann lassen Sie uns die Schaltfläche einblenden. Hier ist der Mauszeiger. Da haben wir's. Also lass es uns kleiner machen. Halte dich gedrückt. Ja, das ist jetzt eine gute Größe. Ja, ich liebe es. Ich denke, das ist ein guter Ort, um das zu beenden. In der nächsten Lektion wollen wir uns ansehen, wie man dieses Setup animiert. Der Mauszeiger kommt herein und klickt auf die Schaltfläche. Wie machen wir das? Lassen Sie uns in Kürze sehen, wie das geht. 6. Animieren des Cursors: In dieser Lektion animieren wir den Mauszeiger und in der nächsten Lektion animieren wir die Schaltfläche den Mauszeiger und in der nächsten Lektion animieren wir die Schaltfläche . Machen wir weiter und machen das Wenn ich den Cursor auswähle, drücke ich hier einfach die Eingabetaste und nenne ihn einen Cursor. Wenn Sie ein Anfänger sind, können Sie einen Cursor animieren , indem Sie ihn vielleicht ziehen Lass mich ihn einfach so von der Seite ziehen. Dann gehen wir zur Position und animieren das und dann legen wir gleich am Anfang einen Keyframe für die beiden Und dann, vielleicht bis zu diesem Punkt, bringst du es genau dorthin Und jetzt, wenn ich spiele. Das ist ein Mausfluch. Animation. Aber das Problem ist, wenn Sie mir zusehen, wie ich den Mauszeiger über den Bildschirm bewege, bewegen Sie Ihren Mauszeiger nie in einer supergeraden Linie. Es scheint immer gekrümmt zu sein wenn Sie auf natürliche Weise arbeiten Also wollen wir diesen Mauszeiger gekrümmt bewegen . Also, wie machst du das? Wir benutzen einen Pfad. Lassen Sie mich einfach diese Schlüsselbilder entfernen zum Anfang zurückkehren. Und jetzt wollen wir den Stift nehmen und den Pfad zeichnen, dem der Mauszeiger folgen soll Also wenn ich darauf klicke und vielleicht dort Escape Vielleicht kann ich darauf doppelklicken und das dann zu dieser Stelle mitnehmen . Dann V. Jetzt haben wir einen Pfad. Wie bekommen wir die Maus auf den Pfad? Wir verwenden einen Pfadfinder , um den Pfad zu finden. Also werde ich einfach hierher gehen und Pathfinder sagen. Treten Sie ein. Und bei den Pathfinder-Attributen werden Sie feststellen, dass wir hier eine Eingabeform haben Dieses Feld fragt im Pathfinder, dieses Feld fragt: Wo ist der Pfad? Zeig mir den Pfad In Ordnung, also lass uns dir den Weg zeigen. Also ziehe ich einfach unsere bearbeitbare Rasur hierher, das ist der Pfad Lassen Sie mich ihn eingeben und in Pfad umbenennen. Nun, diesen Pfad müssen wir für dieses Feld angeben, in dem gefragt wird , wo der Pfad ist. Also werde ich das in diese Eingabeform ziehen. Wie Sie jetzt sehen können, steht dort Pfad, der Name, den wir unserem Pfad gegeben haben. Jetzt weiß der Pathfinder also, welchen Pfad wir verwenden möchten. Also wollen wir diesem Cursor im Position-Attribut sagen : Hey, weißt du was? Folgen Sie diesem Pfad, der vom Pathfinder bereitgestellt wird. Also wollen wir zum Pathfinder kommen und ihn mit der Maus in die Position ziehen und verbinden Wir bestimmen also die Position des Mauszeigers. Anstatt diese Positionen selbst manuell festzulegen, sagen wir, positionieren Sie sich, Ihren Mauszeiger so wo der Pfad Ihnen sagt, der Pathfinder es Ihnen sagt Stellen Sie also auf diese Weise eine Verbindung zum Pathfinder her. Und wie Sie sehen können, ist die Maus dorthin gesprungen wo der Pfadfinder ihr gesagt hat, dass der Pfad ist Jetzt können wir auf dem Cursor nichts animieren, können wir auf dem Cursor nichts animieren weil er jetzt vom Pfadfinder gesteuert wird. Das heißt , um den Mauszeiger zu animieren , müssen wir ein Attribut des Pfadfinders animieren, nämlich die Reise weil er jetzt vom Pfadfinder gesteuert wird. Das heißt , um den Mauszeiger zu animieren , müssen wir ein Attribut des Pfadfinders animieren, nämlich die Reise. Weil du es sehen kannst, aber jetzt folgt es diesem Pfad. Also müssen wir nur zum ersten Keyframe gehen , Null, genau dort Lassen Sie uns nun einen Keyframe erstellen. Und dann lass mich vielleicht einfach spielen. Ich möchte, dass die Maus dorthin geht. Erhöhen wir das also bis zu diesem Punkt, 99,5. Und jetzt wurde automatisch ein weiterer Keyframe hinzugefügt. Jetzt kommt es also auf diese Weise. Jetzt können wir den Pfad hinzufügen, den Pfad selbst. Er ist versteckt, aber die Maus weiß, wo der Pfad ist. Also wenn ich es spiele, aber jetzt merke, dass es sehr linear reinkommt Es hat nicht diesen Sinn für Animation, diese Elastizität. Wir müssen die Elastizität hinzufügen, die Animationen besser aussehen lässt. Wir müssen also vom Zeiteditor zum Diagrammeditor wechseln, die Umschalttaste gedrückt halten und die Höhe reduzieren, die Strg-Taste gedrückt halten, um die Ansicht zu vergrößern. Wählen Sie beide aus, halten Sie die Taste gedrückt und klicken Sie auf eine davon, um daraus Bezier-Kurve zu Es war eine lineare Kurve. Jetzt ist es eine Bezier-Kurve. die beiden ausgewählt sind, kann ich die Umschalttaste gedrückt halten, damit sie sich nur in einer geraden Linie bewegen Aber was wir tun wollen, ist diese S-Form auf diese Weise zu erstellen. Das bedeutet also, dass die Animation langsam beginnt, dann plötzlich zunimmt und dann langsam auf diese Weise verlangsamt wird. Also lass uns das sehen. Wenn ich spiele, kannst du das sehen? Also, lasst uns zurück zum Time Editor wechseln. Lass es uns einfach spielen. Ich mag es. Lassen Sie mich einfach die Zeit mit Control K reduzieren , um den Kompositionseditor aufzurufen, falls ich flüchte. Wir können hier auch zur Komposition und zu den Kompositionseinstellungen gehen. Wir können dies auf 20 reduzieren, Frame-Bereich 20. Wir haben also einen kürzeren Zeitplan. Also spiel das. Also ich denke, das ist eine sehr natürliche Mauszeigerbewegung. In der nächsten Lektion wollen wir uns ansehen, wie man die Schaltfläche animiert, wenn sie angeklickt wird, denn im Moment kann man nicht erkennen, ob die Schaltfläche angeklickt wurde Wir sehen uns in Kürze. Geh nirgendwohin. 7. Animieren der Schaltfläche Klicken Sie: Öffnet alle. Willkommen zurück. Jetzt ist es an der Zeit, die Schaltfläche selbst zu animieren. Lassen Sie mich einfach spielen, um zu sehen , wo es animiert werden soll. Also genau hier, genau hier. Also müssen wir die Dauer des Projekts verlängern, vielleicht bis zu 60. Das sind alles 60. Halte es gedrückt, um es zu erweitern und zusammenzuziehen. Lass mich jetzt nochmal spielen. Genau da. Also möchte ich die Schaltfläche selbst auswählen, die Button-Gruppe. Denken Sie daran, es ist eine Gruppe mit vielen Dingen. Wir animieren die Gruppe selbst. Und ich möchte die Y-Position animieren. Also füge ich dort einen Keyframe hinzu. Und der Keyframe wird genau hier hinzugefügt. Wenn ich es also spiele, möchte ich diese Kopie kopieren und direkt dort einfügen, weil es in der Mitte etwas nach unten bewegt wird. Also sagen wir auf der Y-Achse 15. Es wird also an der normalen Position beginnen und an der normalen Position enden, aber in der Mitte geht es auf der Y-Achse etwas nach unten. Lass uns das einfach spielen. Lassen Sie mich alle auswählen und sie etwas zurückziehen. So wie das. Da haben wir's. Also, eine weitere Sache, um dem Ganzen etwas Realismus zu verleihen , ist, zum Diagrammeditor zu gehen und dieselbe Behandlung vorzunehmen, die wir den anderen Keyframes gegeben haben Halten Sie hier also die Umschalttaste gedrückt, um die Höhe zu reduzieren , und wählen Sie alle aus. Halte durch. Halten Sie die Umschalttaste gedrückt, klicken und ziehen Sie, um diese S-Kurve zu bilden . In Ordnung. Eins noch. Lass uns hierher gehen. Und ich möchte, dass wir nach Pixa Bay gehen. Pixel Bay-Soundeffekte. Weil wir diesen Klicksound hinzufügen wollen. Ich hatte einen heruntergeladen, kann mich aber nicht erinnern , wo er ist. Also erkunde. Nein, lass uns einfach zu Soundeffekten gehen. Dann suche ich nach Click. Wie Sie sehen können, hatte ich zuvor nach Click gesucht . Ist es das? In Ordnung, ich lade einfach den ersten herunter. Aber wähle den, den du am meisten magst. Da haben wir's. Also werde ich es einfach hierher ziehen. Und jetzt, hier ist es der Mausklick auf den Universal-Feldcomputer. Also werde ich es irgendwo hierher ziehen und dort ablegen. Wo ist es? Da haben wir's. Jetzt ziehe ich es und platziere es direkt unter der Stelle , an der das Klicken passiert. Lass es uns von Anfang an spielen. Einfach so. Mir gefallen die Ergebnisse, aber das ist erst der Anfang. Das ist natürlich ein Beispiel und ein Einstieg in das, was wir in den kommenden Lektionen tun werden. Ich wollte, dass wir uns mit dem Animieren von Komponenten vertraut machen. Ich hoffe, Sie haben jetzt das Selbstvertrauen, mit den nächsten Lektionen fortzufahren , in denen wir zunächst eine Benutzerprofilkarte entwerfen Wir sehen uns in Kürze. Und noch etwas für den Fall, dass Sie die Lautstärke Ihres Audios regulieren möchten Genau wie jedes andere Element hier hat Audio Attribute, und eines der Attribute hier ist die Lautstärke. Sie können es also auf jeden gewünschten Pegel reduzieren. Normalerweise gehe ich bei Dingen, die ich subtil halten möchte, auf minus 20 hoch. Lass mich das einfach spielen . Einfach so. Spielen Sie einfach mit den Attributen herum und schauen Sie, was Sie ändern und den Klicksound verbessern möchten. Also ich denke, das ist ein guter Ort, um das zu beenden. In der nächsten Lektion entwerfen wir eine Benutzerprofilkarte. Wir sehen uns in Kürze. 8. Benutzerprofilkarte entwerfen: Nun, da wir mit dieser Schaltfläche fertig sind, weil wir sie als Beispiel verwendet haben, ist es an der Zeit, ein brandneues Projekt zu erstellen. Also gehe ich einfach hier hin, erstelle und gehe zu meinen beiden D Projects-Ordnern. Ich werde diesen Projektordner auch zur Verfügung stellen , falls Sie ihn untersuchen möchten. Aber jetzt werde ich ihn einfach hier erstellen. App, UI-Animation, weil wir hier alle UI-Komponenten enthalten , die wir für den Rest der Klasse animieren Also gib ein, wähle und das ist natürlich in einem anderen Projekt, also sage ich einfach Control N für eine neue Szene Und jetzt können wir diese erste Szene als Benutzerprofilkarte speichern . Lass mich diesen Namen einfach hierher kopieren. Benutzerprofilkarte. Speichern Sie das. Das Erste ist natürlich, die Inspiration einzubringen, wenn wir die Benutzeroberfläche bereits haben. Wenn Sie eine Benutzeroberfläche animieren, basiert sie natürlich auf einer echten App, Software oder Website Deshalb benötigen wir einen Screenshot davon Also werde ich darauf doppelklicken. Ich habe einige UI-Elemente heruntergeladen. Von Magnific. Lass mich ganz schnell danach suchen und zurückkommen. In Ordnung, wir sind also zurück Also gehe ich jetzt in den Projektordner. Dies ist unser Projektordner, und das sind natürlich die Ordner, die erstellt wurden. Einer der automatisch erstellten Ordner war Assets. Ich gehe hier rein und füge die Benutzeroberfläche ein, die wir verwenden sollen. Dann werde ich doppelklicken. Oh, warte, wir sind schon hier drin. Lassen Sie mich einfach auf die beiden D-Projekte eingehen. Assets, hier ist die Benutzeroberfläche , die wir verwenden sollten. Also werde ich es hierher ziehen und dort ablegen, Umschalttaste gedrückt halten und ziehen. Die Elemente, die wir wollen, sind diese und diese Nachrichten-Benutzeroberfläche, und wir werden auch diese Nachrichtenüberschrift erstellen. Jetzt, wo wir das hier haben, lassen Sie mich es einfach ziehen und zur Seite legen damit wir es beobachten können, während wir es hier zeichnen. 9. Benutzerprofilkarte entwerfen: Ordnung. Halten Sie jetzt die Alt-Taste gedrückt und klicken Sie auf das Rechteck. Lass uns die Höhen erhöhen. Und die Breite. Also sagen wir 750 mal 550? Sagen wir bis 600. Ja, so. Und denk dran, es ist genau in der Mitte. Es befindet sich in der Mitte der Zeichenfläche. Und da wollen wir es haben. In Ordnung, das ist störend. Also lass es mich einfach auswählen. Dann bleib hier draußen. Ja, so. Zoomen Sie rein. Jetzt wollen wir das auswählen und zum Eckenradius gehen. Falten Sie den Eckenradius bis zu diesem Punkt und ändern Sie die Farbe Und wie Sie sehen können, haben wir einen violetten Hintergrund. Klicken Sie also auf diese Hintergrundform. Der Hintergrund ist eine Form wie all diese anderen Formen. Doppelklicken Sie darauf, und Sie können sie ziehen und hinten platzieren oder einfach die normalen Tastenkombinationen von Adobe Illustrator verwenden Drücken Sie die Umschalttaste in der linken Klammer , um sie nach hinten zu verschieben. Eine weitere Tastenkombination ist V für das Auswahlwerkzeug oder A für die direkte Auswahl, die als Form zwei bearbeiten bezeichnet wird. Hier arbeiten also alle Abkürzungen, die Sie gewohnt sind. Also ist es hinten. Gehen wir nun, solange sie noch ausgewählt ist, zur Füllfarbe und ändern sie in diese violette Ich mag lila. Es ist auch bläulich. Oder wir können einfach das Eyedropper-Tool verwenden, um dies zu testen, anstatt zu viel Zeit zu verschwenden Da haben wir's. Beim Heranzoomen wähle ich das aus und verwende die Pipette, um Zeit zu sparen, und wähle dann das Lassen Sie uns nun diesen Benutzerprofiltext erstellen. Also wähle ich einfach das Textwerkzeug aus und klicke dort auf Benutzerprofil. Benutzerprofil. Wählen Sie das Auswahlwerkzeug aus. Halten Sie die Umschalttaste gedrückt, klicken Sie darauf und ändern Sie die Größe. Jetzt können wir hier reingehen, und ich mag es, es so am Gizmo auszurichten Vielleicht dieser Punkt. Wir können es auch fett machen. Ich will es schwarz haben. Das ist dicker als fett. Und unserer ist ein bisschen größer. Wir können die Größe also weiterhin auf diese Weise ändern oder einfach die Schriftgröße anstelle der Skala verwenden , aber es spielt keine Rolle , was wir wollen. Als Nächstes wollen wir dieses Menü erstellen. Also werde ich die Alt-Taste gedrückt halten und auch auf die Ellipse klicken und ich werde auf den Duplikator klicken, um eine Duplikation davon zu erstellen Ich gehe zum automatisch ausgewählten Duplikator und wechsle zu linear und wechsle zu linear und vergrößere die Größe, um ihn so abzugrenzen Dann können wir die Größe dieses Dings reduzieren. Einfach so. Und wir können das auf vertikal ändern. Wenn wir zur Seite klicken, ist dies tatsächlich nicht gesperrt. Also lass mich ihn sperren, den Hintergrund. Also müssen wir das rauslassen. Lassen Sie mich heranzoomen. Im Vergleich zu diesem anderen müssen wir etwas Abstand halten. Also, solange es noch ausgewählt ist, vergrößern Sie es. Ja, ich mag es. Aber die Kreise sind immer noch größer. Wir können also auch einfach die Ellipse selbst auswählen und bei gedrückter Taste verkleinern, um die Größe jeder einzelnen Form zu reduzieren Gehen wir zum Duplikator. Platziere das da. Jetzt müssen wir hier sehr schnell etwas organisieren. Was ist das? Das ist die Karte. Geben Sie ein, Kartenhintergrund oder Karte BG. Text ist Benutzerprofil. Text, die Ellipse. Nun, das ist die gepunktete Menü-Ellipsenform, nur damit wir wissen, was es ist Es ist die ursprüngliche Form, die wir gezeichnet haben und die wir jetzt mit dem Duplikator dupliziert haben jetzt mit dem Duplikator dupliziert Dieser Duplikator kann also in einen Duplikator für gepunktete Menüs umbenannt werden gepunktete Menüs umbenannt So können wir wissen, wofür es ein Duplikator ist. Und wir können das immer einfach dem Duplikator überordnen , weil es das ist, was der Duplikator dupliziert Es kann also ein Kind des Duplikators sein. Was sonst? Ich denke, für den Moment ist das gut genug. Wir können sie auch alle in einer Benutzerprofilgruppe gruppieren, aber das werden wir später tun. Lassen Sie uns also diesen Adam Sally erstellen. Gedrückt halten, während das ausgewählt ist, diese Texte oder eine beliebige Form, gedrückt halten und ziehen, wird sie dupliziert Also mache ich einen Doppelklick darauf und Adam wird wild. Da haben wir's. Ich werde die Größe erhöhen. Ja. 10. Benutzerprofilkarte entwerfen: Was den Avata angeht, können Sie gleich hier zu unserer Website zurückkehren Suchen Sie zum SVG Repo nach Avatar. Oder wenn Sie ein Benutzerprofilbild haben, verwenden Sie Ihr Bild. Benutze also Avatar. Wie Sie sehen können, ist der, für den ich mich in meinem Beispiel entschieden habe , dieser. Also werde ich das einfach auswählen. Sie müssen den Vektor nicht bearbeiten, also laden Sie ihn herunter und ich kann ihn dort per Drag & Drop hineinziehen. Dann kann ich es als Asset-Ebene per Drag & Drop dorthin ziehen. Und während es ausgewählt ist, halten Sie Shift A gedrückt, um die Größe zu reduzieren. Lass mich sehen, es ist ein guter Vergleich. Ordnung. Lassen Sie uns jetzt die Sterne erstellen, die Fünf-Sterne-Bewertung. Also werde ich die Alt-Taste gedrückt halten und auf das Objekt klicken, es ziehen und dort platzieren. Halte Alt Shift gedrückt, einfach so. Kann es ziehen und genau dort platzieren. Ordnung. Bevor wir das tun, sollten wir es zunächst duplizieren. Duplikatoren funktionieren am besten, wenn Sie mit dem Weltursprung 0,00 beginnen Also das hätten wir tun sollen, es so duplizieren Wechseln Sie dann zu linear und erhöhen Sie diesen Wert auf fünf. Und lassen Sie uns die Größe erhöhen, um sie voneinander zu trennen, sie vollständig voneinander abzugrenzen. Dann reduzieren wir die Größe des Duplikators selbst. Wir schauen es uns nur an. Wir versuchen nicht, perfekt oder genau so zu sein. Wir lernen gerade die Konzepte. Wir benutzen die Maus genau dort. Wir können sie weiter voneinander trennen, also vergrößern Sie sie. Und wir können den Dreh- und Angelpunkt zu diesem Zweck verschieben. Wenn wir die Sterne von dieser Seite aus animieren wollten, würden wir den Drehpunkt auf diese Weise an den Anfang verschieben Und wenn wir dann irgendeine Animation machen würden, würde sie sich auf diesen Drehpunkt beziehen, auch wenn es sich um eine Animation Damit haben wir meiner Meinung nach jetzt eine gute Sternebewertung. Wir können gehen und die Farbe ändern. Das ist also der Avatar. Das ist eine Sternform. Also Home, Fünf-Sterne-Bewertung. Form. Und das ist der Fünf-Sterne-Rating-Duplikator Also können wir das darunter platzieren. Es ist nicht wichtig , das zu tun. Wir organisieren es nur so , dass ich das zusammenbrechen kann , denn das ist es, woran wir gerade wirklich interessiert sind. Aber wenn Sie detaillierte, sehr spezifische Änderungen am Stern selbst vornehmen möchten , können wir das tun Wir können zum Beispiel zur Füllung gehen und die Farbe in dieses Violett ändern Ich habe es auf Anhieb fast hingekriegt, also habe ich einfach diese Farbe ausgewählt Gehen wir einfach zurück und füllen die Farbe. Nein, wir hatten das. Lass uns einfach die Tropfenpipette benutzen. Kopieren Sie das. Gehen wir auf die Flucht. Warum geht das nicht weg? Ordnung. Nun, lass uns hier reingehen und das aktivieren. Lass uns hineinzoomen. Wenn wir zum gemeinsamen Stil übergehen und rund sagen, vergrößern wir den Rand so. Fügen Sie dann die violette Farbe ein, um sie runder zu machen. Jetzt müssen wir also die Größe des Duplikators weiter reduzieren, indem wir ihn einfach so gedrückt halten Ich mag es. Jetzt, wenn ich die Taste gedrückt halte, kann ich das ziehen. Natürlich können wir das Ganze verkleinern und es auf normale Doppelcliquen und meine E-Mail-Adresse unter email.com umstellen normale Doppelcliquen und meine E-Mail-Adresse unter email.com diese Option ausgewählt ist, drücke ich Alt-Ziehen und Alt-Ziehen erneut Doppelklicken Sie auf Geben Sie die Telefonnummer ein plus 25407001, zwei, drei, vier, fünf, sechs Doppelklicken Sie auf die Mombasa Road in Nairobi. Mombasa-Straße. Jetzt müssen wir nur noch nach Symbolen von diesem Ort suchen , SBG Repo, SBG Repo, Mir gefällt das, aber wir wollen die Farbe in dieses Violett ändern die Farbe in dieses Also werde ich das auswählen. Nein, wählen Sie diese Form selbst aus, gehen Sie hierher, wählen Sie diesen Farbcode, gehen Sie hier rein, bearbeiten Sie, fügen Sie die Farbe dort ein und exportieren Sie dann das SVG. Ziehe das SVG und platziere es hier. Hier ist es. Lassen Sie es uns einfach dort als Asset-Ebene ablegen. Wählen Sie es aus. Halte die Taste gedrückt, All-Shift. Da haben wir's. Also machen wir dasselbe für Telefon und Standort. Smartphone. SVG exportieren. Lass es uns hier ablegen. Asset-Ebene, wählen Sie sie aus. Aus irgendeinem Grund. Oh, warte. Ich habe es an der falschen Stelle fallen lassen. Das tut mir leid. Ich hätte es außerhalb der E-Mail fallen lassen sollen. Aber es fällt in die E-Mail, also werde ich es so nach draußen ziehen. In Ordnung, jetzt Wie groß ist diese E-Mail? 0,047. Also 0,047 und 0,047 Ja, wir sind nah dran. Standort. Geh und lass es gleich da unten fallen. Es gibt eine Asset-Ebene. Ja, es ist nicht in diesen Symbolen. Bei Schicht 0,470 0,047. 0,047. Wie Sie sehen können, ist das Entwerfen von Benutzeroberflächen in Cavalry mit diesen Adobe Illustrator-ähnlichen Tools sehr einfach Es ist sehr einfach, wenn Sie bereits Grafikdesign-Tools verwendet Lass uns die runterholen. Ordnung. Also sind wir fast da. Lassen Sie uns die Knöpfe zeichnen und die Breite erhöhen. I Bevor wir es verschieben, lassen Sie uns zuerst den Text und alles fertig stellen. Erhöhen Sie also den Eckenradius auf 30. Halten Sie die Taste gedrückt und klicken Sie dann, um Text hinzuzufügen. Richten wir es vertikal zur Mitte aus und richten wir es horizontal in der Mitte aus. Gib ihm diese Farbe. Geben wir ihm jetzt Weiß. Reduziere die Größe. Doppelklicken Sie. Folgen. Ich denke, die Schriftgröße ist immer noch groß. Ja, sagen wir, 24, Auswahl zwei. Solange es noch ausgewählt ist, halten Sie die Umschalttaste gedrückt, um beide auszuwählen und sie dort zu platzieren. Solange sie noch ausgewählt sind, halten Sie die Taste gedrückt. In Ordnung, warum funktioniert es nicht? Liegt es daran, dass sie keine Gruppe sind? Ich versuche sie zu duplizieren. Also wie dem auch sei, wähle das Rechteck aus. Beim Ziehen. Wählen Sie den Text aus. Beim Ziehen. Warum wähle ich das aus? Lass mich es einfach sperren. Lass uns jetzt sehen. Ja, so. Ja, bei Drag. Doppelklicken Sie darauf. Nachricht. Ich wähle das aus. Lass uns fühlen gehen. Lassen Sie eine Zwei fallen und wählen Sie das aus. Wählen Sie die zweite aus, gehen Sie zur Farbe und machen Sie sie heller. Wir können ihm einen Farbverlauf geben, aber ich möchte die Dinge vorerst einfach halten. Lassen Sie uns den Text auswählen, zur Farbe wechseln und ihn dunkler machen. Nicht schwarz, sondern dunkel. Und da haben wir's. Ich denke, wir haben selbst eine nette Karte. Ich möchte diese beiden auswählen, die Umschalttaste gedrückt halten, um beide auszuwählen, und sie dann nach unten drücken. Und ich denke, wir haben eine nette Benutzeroberfläche. Bevor wir weitermachen, möchte ich diese auswählen und sie mit Control G gruppieren. Und wie Sie sehen, sollten wir sie jetzt in der Mitte fertig erstellt haben, aber kein Problem, wir können die Drehpunkte verschieben. Also, wo ist der Drehpunkt auf der Y-Achse. Und dann verschieben wir jetzt den Drehpunkt selbst, denn was wir animieren, ist der Drehpunkt Wählen Sie dieses und dieses Steuerelement G. Lassen Sie uns auch den Drehpunkt verschieben Und lassen Sie uns ihn wieder nach unten verschieben. Wählen Sie nun alle aus, einschließlich dieses Kartenhintergrunds. Steuerung G. Jetzt können wir diese Karte als Ganzes verschieben und sie als Karte animieren Aber wenn wir alles animieren was sich innerhalb der Gruppe befindet, ist das eigentlich eine Lassen Sie mich es eingeben und in Benutzerprofilkarte umbenennen. Was auch immer sich in der Benutzerprofilkarte befindet , ist alles, was wir hatten. Jetzt hatten wir also diese Gruppe namens Nachrichtenkarte Enter. Nachrichtenschaltfläche und diese zweite Gruppe hier, Enter. Schaltfläche „Folgen“. Wir können jetzt auch die Schaltflächen innerhalb der Gruppe animieren. Es ist also immer gut, diesen Drehpunkt genau dort zu haben. Nun, der Drehpunkt dieser anderen ist nicht wirklich wichtig, weil wir die Schaltflächen und die Karte animieren Schaltflächen und die Karte Dies ist bereits ein Duplikator, also werden wir ihn als Duplikator animieren Ich denke, das ist ein guter Ort, um diese Lektion zu beenden. Ich habe gelernt, etwas Komplexeres als einen Knopf zu entwerfen. In der nächsten Lektion werden Sie die Nachrichtenkarte entwerfen, denn denken Sie daran, dass wir gesagt haben, dass wir mehrere Dinge entwerfen müssen. Das ist das nächste, was wir entwerfen werden. Das ist in der Tat eine Übung für dich. Folgen Sie den gleichen Prinzipien, denen wir Gestaltung gefolgt sind, um dies zu entwerfen. Wir sehen uns in Kürze. 11. Mitteilungskarte entwerfen: Jetzt ist es an der Zeit, die Nachrichtenkarte oder die Chat-Karte zu entwerfen , diese Karte genau hier. Jetzt haben wir das schon erstellt und es hat seinen Gizmo genau in der Mitte Warum also nicht einfach duplizieren? Also werde ich es zusammenklappen, Benutzerprofilkarte, dann Steuerung D, und es wird ein Duplikat namens Benutzerprofilkarte mit allem darin erstellt ein Duplikat namens Benutzerprofilkarte . Aber wir brauchen nicht alles, denn wie Sie sehen, die Referenz hier keine Schaltfläche. Warum also nicht löschen? Lassen Sie mich zunächst Karte eins auswählen. Ich werde die Originalkarte ausblenden, dann diese auswählen und eingeben. Dann nenne es die Nachrichtenkarte. Erweitere es, kollabiere all das. Wir wollen es loswerden. Tatsächlich werden wir diese beiden verwenden, weil wir diese als eine der Chat-Blasen und diese andere verwenden können . Sie diese Option auswählen, geben Sie die erste Chat-Blase ein und die andere Eingabetaste. Hut Blase zwei. Wir können all diese anderen Details entfernen. Mal sehen, wie es aussieht. Wir könnten verwenden, lassen Sie uns all diese Symbole entfernen. Entferne den Avatar, oder er hat den Avatar. Also wählen wir den Avatar aus und verschieben ihn nach oben. Halten Sie die Umschalttaste gedrückt , um sich in einer geraden Linie zu bewegen. Halten Sie die Umschalttaste gedrückt, um die Größe zu ändern. Benutzerprofil. Solange es noch ausgewählt ist, halten Sie es gedrückt und ziehen Sie es. Doppelklicken Sie darauf. Steuerung A, alles auswählen. Online, ich glaube, da steht online. Das ist gewagt. Wir wollen es regelmäßig haben und die Größe reduzieren. Und lass es uns runterdrücken. Halten Sie die Strg-Taste gedrückt, um sich in kleinen Schritten zu bewegen, drücken Sie sie nach unten Lass uns sehen. Streichen Sie diese Fünf-Sterne-Bewertung. Karte BG ist okay. Tatsächlich müssen wir das kennzeichnen. Treten Sie ein. Nutzername. Und hier soll Adam Savaging als Benutzername stehen Dann ist das hier der Online-Text. Es sollte auch der Text des Benutzernamens sein. Online-Text. Ich habe bereits online gelesen. Gehen wir jetzt zum Avatar. Dann haben wir das gepunktete Menü. Das ist okay. Chat-Blase eins. Kann es hier hochziehen. Beachten Sie jetzt, ob wir es erweitern. Oh, das ist Blase zwei. Wenn wir es erweitern, wenn wir zur rechteckigen Form auf dem Eckradius gehen , können wir von „alle“ zu „ individuell“ wechseln und hier die Werte auf 20 ändern. 20 und 20. Dadurch entsteht eine Art Sprechblasenform. wir es erneut auswählen, können wir die Höhe erhöhen, den Text auswählen und den gewünschten Text eingeben. Lassen Sie mich sehen, ob ich hier etwas Text finden kann. Also kopiere das, füge es dort ein. Jetzt kommt es als einzelner Text, also lösche ich ihn einfach und wähle stattdessen ein Textwerkzeug aus, klicke hier rein und ziehe, um ein Textfeld zu erstellen , in das ich jetzt meinen gesamten Text einfügen kann. Wo ist es? Warum ist es da raufgegangen? Also lass uns wieder hier rein gehen. Text. Einfügen. Ja, es sollte hier reingeklebt werden Also werde ich einfach etwas Text entfernen. Wir wollen nur etwas. Richten wir es links aus und ändern die Feldfarbe auf Weiß. Drücken Sie es manuell mit den Pfeiltasten und los geht's, wir haben eine Sprechblase. Anstatt Zeit mit dieser anderen hier zu verschwenden, löschen wir sie und wählen dann dieses Steuerelement Oh, warte Dieser Text, den wir gerade hinzugefügt haben, sollte sich in der zweiten Chat-Blase befinden , um diese Gruppe zu bilden Wenn wir nun die zweite Blase kontrollieren, wird sie eine neue Blase wie diese bilden. Lassen Sie uns sie erweitern. Die Form. Hier drinnen sollen es fünf und 20 sein. Dann die Hintergrundfarbe, wir können das probieren, lassen Sie uns das probieren. Also tu es. Genau da. Wählen Sie den Text aus und ändern Sie die Farbe in Dunkelgrau, nicht in Schwarz, Dunkelgrau. Das ist eine nette Sprechblase. Ordnung, Sie können den Text ändern, um etwas anderes zu sagen , oder ihn einfach so lassen, wie er ist Lass mich das einfach ändern. Jetzt kann ich wieder Sprechblase zwei auswählen, D umschalten und sie dann nach unten ziehen und dann Sprechblase drei. Drücken Sie D und ziehen Sie es herunter. Control S. Jetzt könnten wir etwas hinzufügen, lass mich das auswählen, Control D, und es nach unten ziehen. Und lassen Sie uns den Text entfernen, erweitern und löschen. Wählen Sie das Rechteck aus. Wir wollen den Eingabebereich, dieses Textfeld, erstellen. Wenn Sie das Rechteck auswählen, gehen Sie ebenfalls zu diesem 20. Gehen wir zur Füllfarbe und machen sie dunkler. Gib ihm vielleicht einen Rand , aber auch sehr schwach. Nein, es ist zu dunkel. Also zuallererst etwas leichter. In Ordnung, mein Projekt hängt. In Ordnung, jetzt hängt mein Projekt. Lassen Sie mich es neu starten und ich bin in Kürze zurück. 12. Mitteilungskarte entwerfen: Und willkommen zurück. Jetzt musste ich Cavalry neu starten, nachdem es eingefroren war, also lass mich einfach Control O drücken, um unsere Szene wieder zu öffnen Und wir haben diese Szene Benutzerprofilkarte genannt. Aber wir haben bereits gesehen, dass wir hier sogar schon die Nachrichtenkarte erstellen. Lassen Sie uns diesen Namen einfach in App-UI-Animation ändern , da sie alle Karten enthalten wird . Wir werden nicht jede Karte als einzelne Szene erstellen , aber es ist möglich. Also lass mich einfach darauf klicken. Lassen Sie mich einfach das Feld fünf erweitern und wir wollen den Hintergrund duplizieren. Also wähle ich Strg D aus . Ich werde die Strichfarbe ändern. Zu einem sehr schwachen, aber etwas dunkleren Farbton. Immer noch hell. Also will ich wieder hier rein. Das gefällt mir. Wenn wir es also auswählen, drücken wir es mit den Pfeiltasten nach unten. Und lassen Sie uns von dieser Sprechblasenform zu allen Eckradien von 30 wechseln allen Eckradien , sodass alles rund ist, einfach so Ich möchte, dass wir an dieser Stelle eine Sache tun: Wenn ich das Bild zur Seite ziehe, wähle das Kartenrechteck, Karte BG, aus und wir möchten einen Schlagschatten darauf anwenden Wie wenden wir einen Schlagschatten an? Ein Schlagschatten ist ein Effekt, und Filter sind das, was wir in Cavalry Effekte nennen Wenn Sie einen Schlagschatten, eine Unschärfe oder all diese Arten von Effekten anwenden möchten, verwenden Sie Filter Also werde ich auf der Karte BG auf PAS klicken. Plus auf den Filtern, dann gehe ich zu Schlagschatten. Wie Sie jetzt sehen können, haben wir einen Schlagschatten, und der Schlagschatten wird genau dort hinzugefügt, also werde ich ihn auswählen. Alles, was du in Cavalry hinzufügst, ist wie ein Knoten. Deshalb erscheint es hier einzeln. Wenn Sie in After Effects einen Effekt anwenden, wird er nicht einmal als Ebene angezeigt, da es sich nicht um einen Knoten handelt, sondern hier ist es ein Knoten. Beim Schlagschatten können wir also mit der Opazität herumspielen. Kann ihn weniger sichtbar machen. Wir können es verteilen. Lassen Sie uns einfach Alt gedrückt halten oder Alt nicht gedrückt halten, schauen wir, wohin es führt. Stärke der Unschärfe, kann es verwischen. Ja, ich mag es. Verwischen Sie es. Reduzieren wir das Alpha. Vielleicht können wir im X die positive Seite verschieben . Da haben wir's. Das Gute daran, dass Effekte, Filter und Deformer einzelne Knoten sind ist, dass Sie sie wiederverwenden können Wir können denselben Schlagschatten für den Hintergrund der Benutzerprofilkarte Ich kann das einfach herausnehmen und es außerhalb aller platzieren. Jetzt haben wir die Nachrichtenkarte und die Benutzerprofilkarte. Lassen Sie mich die Nachrichtenkarte auswählen und sie so zur Seite schieben. Dann verstecke die Benutzerprofilkarte, auf die wir gestoßen sind. Es hatte seinen eigenen Hintergrund, Karte BG. Also können wir zu diesem Schlagschatten kommen und ihn auf die Karte BG ziehen. Filter. Ja, genau so. Oder lass mich das einfach rückgängig machen. Wenn die Karte BG selbst ausgewählt ist, können wir zum Schlagschatten zurückkehren. Und weil der Schlagschatten, wie Sie bereits gesehen haben, ein Filter ist. Und wenn wir dieser Karte BG einen Schlagschatten hinzufügen wollten, würden wir ihn auswählen und zu den Filtern gehen. Wir können einfach zu diesem Filter gehen , der bereits hinzugefügt wurde, und ihn in das Filterfeld dieser Karte ziehen . Einfach so, und schon jetzt zeigt es den Effekt des Schlagschattens. Das ist es also. Ich denke, wir sind bereit, mit dem nächsten Schritt fortzufahren, nämlich der Gestaltung der Nachrichtenüberschrift bevor wir mit der Animation beginnen. Also werde ich dich in Kürze sehen. 13. Mitteilungskarte entwerfen: Eine Sache, an die ich mich gerade erinnert habe, ist dass es sich nicht um eine Textblase handelt, sondern um die Ladeschaltflächen , die anzeigen, dass jemand tippt. Also warum nicht hier reingehen mit einer Nachrichtenkarte. Und das ist Chat Bubble Five. Und tatsächlich haben wir immer noch diesen Textbereich hier drin. Platzieren wir es auf der Nachrichtenkarte und außerhalb der Chat-Blase, sodass die Chat-Blase genau das ist. Aber jetzt wollen wir diesen Text entfernen. Und wir wollen dieses gepunktete Menü duplizieren und hier platzieren Also Nachrichtenkarte, gepunktetes Menü, Control D, um es zu duplizieren Ich werde das als Enter-Effekt für die Eingabe von gepunktetem Text bezeichnen Eingabe von gepunktetem Text Effekt-Duplikator Enter. Jetzt können wir es also nach unten ziehen. Und weil es ein Duplikator ist, denken Sie daran, dass es diese Verteilung hat , deren Richtung wir ändern können , wir können sie horizontal ändern Jetzt ist es hinter dieser Sprechblase. Platzieren wir es also über der Sprechblase. Rechts oben rechts unter rechteckiger Form. Genau davor. Jetzt ist das Sprechblase fünf. Wenn ich also das Rechteck auswähle, reduzieren wir die Breite und Höhe. Und lass es uns zur Seite schieben. Halten Sie die Umschalttaste gedrückt, um es auf einer geraden Linie zu bewegen es auf einer geraden Linie Ich werde einen gepunkteten Duplikator auswählen. Ich denke, wir sollten die Form dieser Kreise etwas vergrößern, nach unten drücken, aber auch die Größe vergrößern, um sie voneinander abzugrenzen Ich denke, die Formskala ist zu groß. Also vielleicht 1.8. Nein, das ist zu groß. Und das ist auch zu groß. Also vielleicht 800. Und das vielleicht 1,5 h es nochmal auswähle. Ich finde, das ist eine gute Größe. Jetzt werden wir es natürlich animieren, aber im Moment möchte ich immer noch die Intensität dieser dunklen Farbe reduzieren Lassen Sie mich jetzt einfach den Effekt der gepunkteten Eingabe erweitern die Ellipse selbst auswählen und zur Feldfarbe wechseln Wir wollen die Opazität der Feldfarbe reduzieren, die Alpha-Opazität reduzieren Vielleicht an diesen Ort. Wir werden es animieren. Mach dir keine Sorgen Aber vorerst denke ich, dass das ein guter Ort ist, um das zu beenden. In der nächsten Lektion erstellen wir die Schlagzeile, bevor wir zur Animation übergehen. Wir sehen uns also in Kürze. 14. Schlagzeile von Design-Nachrichten: Jetzt ist es an der Zeit, die Nachrichtenüberschrift zu gestalten. Jetzt sind wir mit diesem Screenshot schon fertig, also werde ich ihn einfach löschen, diese beiden auswählen und die Umschalttaste gedrückt halten, um die Größe zu reduzieren. Und ich werde sie dort platzieren. Kein Problem. Es ist nicht wirklich wichtig. Also lass das jetzt zusammenbrechen. Also haben wir zwei Karten. Wir haben einen Schlagschatten , den sie teilen, und wir haben einen Hintergrund. Wir wollen diese beiden verstecken. Drücken Sie S, um das zu speichern. Jetzt wollen wir genau hier eine Schlagzeile erstellen und dabei den gleichen Prinzipien folgen und sicherstellen, dass das Gizmo genau in der Mitte ist Also wähle ich einfach das Textwerkzeug und ziehe, um ein Textfeld zu erstellen Und ich habe hier eine Beispielüberschrift, fünf wichtigsten technischen Fähigkeiten, die derzeit gefragt Wechseln wir zum Auswahltool. Ich werde die Größe erhöhen. Lass uns zu einer anderen Schriftart wechseln. Der Anführer eins. Mutig. Sie können gewünschte Schriftart wählen. Lassen Sie uns den Zeilenabstand reduzieren. Ich glaube, wir sind fertig. Wir können die Schrift jederzeit ändern. Lass mich sehen, was mit Monster Axt ist. Aber ich will Schwarz. Sehr dick. Ja, so etwas in der Art. Wenn ich darauf doppelklicke, können wir es ziehen, um die Breite zu vergrößern. Ich glaube, ich mag diese Form jetzt. Gehen Sie also zurück zu Auswahl zwei. Solange es noch ausgewählt ist, ziehe ich es heraus und doppelklicke dort hinein, Strg A , und gebe kleineres Unterthema oder eine Unterüberschrift Kopiere das. Okay, es ist zu groß, also reduzieren wir die Größe Ich will nur einen Satz. So etwas in der Art. Wenn ich die Shift-Taste gedrückt halte, kann ich es in einer geraden Linie nach unten ziehen es in einer geraden Linie nach unten Und solange es noch ausgewählt ist, kann ich es erneut ziehen, um es zu duplizieren, und dort doppelt klicken, Strg A, Datum, vielleicht eine Spalte, Auswahlwerkzeug Und das Textfeld ist zu groß, also verkleinern Sie es. In der Tat sollte ich das löschen und einfach das auswählen und klicken , um ein einzeiliges Textbuch anstelle eines Absatzlehrbuchs zu erstellen ein einzeiliges Textbuch anstelle eines Absatzlehrbuchs Lassen Sie uns das jetzt in Datum und eine Spalte ändern. Der Blogbeitrag wurde ausgeschrieben. Ziehen Sie einen Doppelklick darauf. Welches Datum? 29. Mai 2026 Und dafür werden wir regulär verwenden. Für diesen werden wir auch Regular verwenden. Lassen wir es jetzt einfach fett stehen. Ich verschiebe das Datum. Geschrieben von Alt-Drag Halten Sie die Umschalttaste gedrückt, um sich in einer geraden Linie zu bewegen. In Ordnung, das war mir nicht möglich. Sagen wir, Michelle Lin oder so. Ich will nicht, dass es schwarz ist, also machen wir es fett. Mutig. Ich wähle jetzt alles aus. Wir können es gruppieren, eingeben und es Nachrichtenüberschrift nennen. Wir können den Drehpunkt auch verschieben wenn uns nicht gefällt, wo er ist, vielleicht wollen wir ihn dort haben. Eine weitere Sache, die wir hinzufügen können, sind diese Highlights, fünf wichtigsten technischen Fähigkeiten. Ja, sagen wir das. Und solange es noch ausgewählt ist, ziehe ich hohe Nachfrage, wähle diese Seite aus und ziehe. Also wollen wir den Textmarker. Solange sie noch ausgewählt sind, gehe ich zur Deckkraft über und reduziere die Deckkraft auf Und jetzt sind das die Strike Through- oder Highlighter-Effekte, die wir zusätzlich zum Text animieren Lassen Sie uns das also einfach reduzieren. Nehmen wir an, Sie verwenden eine Markierung, die nicht den gesamten Text abdeckt. Aber wir werden diesen Text animieren , diese Highlights animieren Lassen Sie uns das sogar in einen grünen Textmarker ändern. Oder welche Farbe auch immer Sie verwenden möchten. Das ist es vorerst. Ich denke, das ist ein guter Ort, um das zu beenden. Ich wollte, dass wir die Nachrichtenüberschrift erstellen und nicht vergessen, diese Formen der Gruppe mit den Schlagzeilen hinzuzufügen , sodass Sie alles verschieben, wenn Sie die Gruppe verschieben. Wenn Sie die Gruppe animieren, animieren Sie alles. Steuerungen. 15. Mauszeiger: Bevor wir zur Animation übergehen, benötigen wir einen Mauszeiger. Und da es sich um ein neues Projekt handelt, haben wir nicht den Mauszeiger, den wir zuvor erstellt haben. Jetzt können wir den Mauszeiger als Vorkomposition oder als vorkomponiertes Asset importieren und ihn verwenden, aber wir haben jetzt keine Zeit, über Precomps zu sprechen Wir müssen also erneut einen Mauszeiger erstellen, aber das liegt bei Ihnen . Das ist deine Übung. Erstellen Sie einen Mauszeiger, indem den Schritten folgen, die wir zuvor in den Tastenlektionen beschrieben haben, und erstellen Sie einen schönen Mauszeiger, den wir in unserer Animation verwenden können. Wir sehen uns in der nächsten Lektion. 16. Animieren des Cursors: Wie Sie sehen, habe ich jetzt bereits meinen eigenen Mauszeiger erstellt, und es ist Zeit, mit der Animation zu beginnen Also lass mich einfach die Schlagzeile verstecken. Und wie Sie sehen können, haben wir genau das. Ich möchte es kleiner machen. Also wähle ich es aus und halte die Taste gedrückt, um die Umschalttaste zu wechseln, weil wir alles auf diesem Bildschirm unterbringen und dann alles animieren wollen diesem Bildschirm unterbringen und dann alles animieren Also will ich es da runter in die Ecke schieben. Und ich möchte die anderen beiden aufdecken. Wir können das hier platzieren. Lassen Sie uns sie sogar nach oben und zur Seite schieben. Wählen wir sie alle aus, außer dem Mauszeiger, und verkleinern wir sie einfach so , weil Sie möchten. Wir möchten, dass jeder von ihnen genug Platz hat, um so auf den Bildschirm zu passen, ohne dass der andere angezeigt wird. Also wir wollen das irgendwo hier und das irgendwo hier. Wir werden das Arrangement in Kürze bereinigen. Wir wollten nur einen ungefähren Ort haben, an dem sich die Maus animiert von Ort zu Ort bewegen kann . Nun, das sollte genau das Gegenteil sein. Und jetzt wollen wir über die Reise des Mauszeigers nachdenken . Wie wird er sich an jedem beliebigen Punkt fortbewegen und für wie lange? Das ist jetzt also unser Job. Der erste Schritt besteht natürlich darin, den Pfad zu erstellen , den die Maus von Anfang bis Ende durchlaufen wird, und dann werden wir jeden einzelnen Teil, an dem sie mit einem Element interagiert, zeitlich Teil, an dem sie mit einem Element interagiert Also, sagen wir, lassen Sie mich den Pent auswählen. Wir möchten, dass der Mauszeiger hierher kommt und dann mit der Maus über die Sternebewertung fährt und darauf klickt Es wird mit einem Benutzerprofil ohne Klassifizierung beginnen einem Benutzerprofil ohne Klassifizierung bei dem nur die Sterne einen Umriss haben Und wenn sie dann angeklickt werden, erhalten sie eine Feldfarbe Dann geht die Maus hier runter zur Nachrichtenschaltfläche und klickt darauf. Dann geh hier hin. sehen wir uns diese drei Buttons animiert an und gehen dann zu dieser Stelle. Der Pfad, den wir wollen, ist also in etwa so. Es muss nicht so sein. Vielleicht bis zu dieser Stelle, und dann zögerst du ein bisschen, klickst dann auf die Fünf-Sterne-Bewertung gehst dann zur Nachrichtenschaltfläche, aber wir wollen, dass es eine gebogene Bewegung ist. Dann können wir diese Kurve einfach fortsetzen. Der Mauszeiger kann sich zu dieser Stelle bewegen. Nachdem wir einen Moment dort geblieben sind, können wir zu diesem Punkt navigieren. Dann flieht. Das ist also der Pfad, den der Mauszeiger nehmen wird. Ordnung, lassen Sie uns den Mauszeiger, die Form, die Eingabetaste, den Mauszeiger und den Pfad umbenennen Eingabetaste, den Mauszeiger und den Pfad Ja, nennen wir es einfach Pfad und wählen auch den Mauszeiger und auch den Mauszeiger Strg G. Jetzt haben wir sie als Gruppe, und ich möchte die Eingabetaste drücken und sie Cursor nennen Wenn wir also expandieren, haben wir den Mauszeiger und den Pfad in einer Gruppe. Lassen Sie uns nun auch einen Pathfinder erstellen und hinzufügen. Denken Sie daran, wir brauchen einen Pathfinder. Hier drin, und der Pfadfinder fragt uns: Wo ist der Pfad, den du benutzen willst? Also hier ist der Pfad. Also ziehen wir diesen Pfad hierher. Jetzt kennt es diesen Pfad und das Positionsattribut des Mauszeigers muss vom Pathfinder gesteuert werden Ziehen wir nun den Pathfinder an die Position des Mauszeigers Nun, da wir hier ganz am Anfang stehen, können wir einen Keyframe für die Reise des Pfadfinders setzen Und lassen Sie uns das einfach abspielen , um zu sehen, wohin der Mauszeiger zu diesem Punkt gelangen soll, vielleicht an dieser Zu diesem Zeitpunkt sollte der Mauszeiger also zu dieser Stelle gefahren sein. Und wie Sie sehen können, wurde automatisch ein Keyframe erstellt Jetzt wollen wir gleichzeitig diesen Pfad bearbeiten, damit der Mauszeiger nicht zu hoch ist Der Mauszeiger befindet sich zu hoch über der Sternebewertung. Wir können also zur Direktauswahl gehen und den Pfad bearbeiten. Wir können also diesen Punkt auswählen, die Umschalttaste gedrückt halten , diesen Punkt auswählen oder einfach diesen Punkt auswählen und ihn dort platzieren. Wir wollen, dass es dorthin zeigt. Gleichzeitig möchte ich aber auch diesen Cursor auswählen und die Größe reduzieren. Es ist zu groß. Dies wird überprüft, um sicherzustellen , dass beide nur eingeschränkt zusammenarbeiten können Und wenn ich erneut zum Direktauswahl-Tool gehe, wähle ich diesen Punkt aus. Genau dort. Das sind also nur winzige Anpassungen Sie sich fragen würden, wie Sie sie vornehmen sollen. Ich versuche dir nur zu zeigen, wie das geht. Jetzt, an diesem Punkt, wollen wir nicht, dass der Mauszeiger genau da ist. Ich möchte es ein bisschen zurückziehen. Wenn wir zum Pathfinder gehen, befinden wir uns, wie Sie sehen können, auf dem grünen Keyframe Das heißt, wir befinden uns auf dem Keyframe und können den Keyframe-Wert bearbeiten Wir können hierher zurückkehren. Wir wollen es dort haben. Dann wollen wir für einen Moment hier verweilen. Vielleicht bis zu diesem Punkt, lass uns gehen. Also kann ich das kopieren und dort einfügen. Das heißt, dieser Wert wird an diese Stelle kopiert und bleibt dort, bevor er etwas anderes tut. Gehen wir jetzt vielleicht zu dieser Stelle und setzen das vielleicht bis zu diesem Punkt fort. Das setzt also voraus, dass Sie auf die Fünf-Sterne-Bewertung klicken. Es kommt also so, verzögert sich, bewegt sich dann und klickt auf die Fünf-Sterne-Bewertung. Jetzt wollen wir diesen letzten Keyframe kopieren , weil wir wollen, dass er dort für einen Moment bleibt und ihn dort einfügen Diese beiden Werte sind hier also identisch. Es wird sich also dort verzögern, nachdem Sie darauf geklickt haben. Warte dort für einen Moment. Und dann können wir von hier aus anfangen, nach unten zu gehen. Mal sehen, wie lange ich möchte, dass es von dort nach unten bis zu dieser Stelle dauert. Wenn es also 160 erreicht, sollte es bei 36 sein, sagen wir 55 45. Ja, genau da. Ja, so wird es kommen. Verspätet da. Überprüfe die Sternebewertung und gehe dann vorher zur Nachrichtenschaltfläche. Okay, lassen Sie uns das für einen Moment verschieben, denn wir wollen es verzögern, wenn wir darauf klicken Also wird es dort ankommen und sich dann verzögern. Dort klicken wir darauf und beginnen dann, uns zu bewegen. Also klicken wir vielleicht bei 200 drauf. Also sagen wir nur, dieser Wert dieser Wert ist derselbe wie dieser Wert. Zwischen diesem Punkt und diesem Punkt sollte der Mauszeiger seine Position also nicht ändern. Aber danach können wir anfangen, uns zu bewegen. Wir verschieben es jetzt bis zu diesem Punkt. Also müssen wir die Zeit hier verlängern. Gehen wir also zu den Kompositionseinstellungen. Lass uns 1.000 draus machen. 1.000. Halten Sie die Taste gedrückt, um die Ansicht zu verkleinern. Und jetzt, wie Sie sehen können, haben wir mehr Platz. Ich kann sie alle auswählen, bis zum Ende gehen und die Ansicht verkleinern, um sie zu vergrößern. Dort drüben, um das Highlight am Ende zu sehen und jetzt zum Ende zu ziehen. Da drüben. Jetzt sagen wir, wenn es da ist, klicken wir, dann fängt es an, sich zu bewegen. Gehen wir also zum Pathfinder und setzen das fort. Vielleicht dieser Ort Kopieren wir diesen Wert und lassen wir ihn für eine Sekunde warten. Fügen Sie es dann ein, bevor wir endlich zum Text der Nachrichtenüberschrift übergehen. Fügen wir also einen Keyframe für die Nachrichtenüberschrift hinzu. Genau da. Spar dir das. Wenn ich also die Taste gedrückt halte und mit dem Mausrad herauszoome, gehe ich zurück zum Anfang. Zoomen Sie hier heraus. Klicken Sie auf die Mausnachricht, bewegen Sie sich dorthin und sehen Sie sich die drei Schaltflächen an. Genau. Sagen wir, bis zu 450. Drücken Sie also K, um die Kompositionseinstellungen 450 oder vielleicht sogar 400 aufzurufen . Genau. Flucht. Da haben wir's. Nimm das. In Ordnung, lass uns ohne spielen. Lass uns den Pfad verstecken. Wo ist der Pfad? Lass es uns verstecken. Lass uns das spielen. Genau. Ich liebe es. Gehen wir zu 360, Control K. Da ist noch zu viel Zeit übrig. 360. Ja, Escape. Ja, Control S. Was jetzt noch übrig ist, müssen wir auswählen. Lassen Sie uns zum Diagrammeditor wechseln. Und wir wollen zum Pathfinder gehen . Denken Sie daran, dass wir die Reise animiert haben. Wir wollen hierher kommen, die Umschalttaste gedrückt halten , um die Höhe zu verringern alle auswählen, die Maustaste gedrückt halten, auf einen von ihnen klicken und das Ganze vergrößern Halten Sie die Umschalttaste gedrückt und lassen Sie uns überall eine schöne Reihe von S-Kurven erstellen . Das bedeutet, dass sich der Mauszeiger in besseren Animationen bewegt. Lass uns einfach sehen , was hier passiert. Lass uns gehen. Ja. Genau. Also wird es langsam, dann schnell und dann langsam berührt. Ordnung. Wir müssen einiges animieren. Wir haben die Fünf-Sterne-Bewertung auch nicht animiert. Wenn darauf geklickt wird, sollte es sich irgendwie verhalten. Wenn der Mauszeiger über diese lila Taste fährt, muss sie einige Hover-Effekte zeigen. Es muss reagieren Und wenn es dann hier ankommt, muss es auch schweben All diese Effekte, wir brauchen diese Reaktionen. Aber bevor wir das tun, lassen Sie uns zunächst die Kamera animieren Wir sehen uns in der nächsten Lektion. 17. Animieren der Kamera: Jetzt ist es an der Zeit, die Kamera zu animieren. Schauen wir uns also an, wie das geht. Zuallererst möchte ich hier den Pathfinder und den Cursor zusammenklappen. Was haben wir sonst noch? Lassen Sie mich einfach den Schlagschatten nach unten ziehen , sodass wir alle Formen oben hier und diese anderen Helfer dort unten haben . Im Moment animieren wir also die Kamera. Also ich möchte sagen plus Kamera. Und jetzt haben wir eine Kamera. Und damit die Kamera funktioniert, müssen wir hier alles auf 2,5 D umrechnen . Lassen Sie uns also all diese Kästchen ankreuzen. Nein, ja, einschließlich des Hintergrunds weil wir wollen, dass sich der Hintergrund zusammen mit allem bewegt, wenn wir die Kamera bewegen. Nun, hier ist die Kamera. Das haben wir ausgewählt, und wir können die Dinge verschieben. Also wollen wir uns das zum Beispiel nicht ansehen. Ich will Freiform, das ist der Typ, den ich will. In zukünftigen Lektionen oder in zukünftigen Kursen werde ich Ihnen zeigen, wie man diese anderen Typen verwendet, aber vorerst werden wir freien Schaum verwenden Dadurch können wir uns einfach bewegen und auf diese Weise sehr einfach navigieren. Und Sie werden feststellen, wenn sich die Kamera jetzt bewegt. Nehmen wir an, wir halten die Kamera in der Hand und bewegen uns in der Welt. Die Welt bewegt sich nicht. Wir bewegen uns. Die Kamera sieht was sie sieht, und wir animieren, was die Kameras sehen Also wollen wir diese weiße Farbe nicht. Also müssen wir in den Hintergrund gehen und ihn vergrößern. Also skalieren Sie es. Ich werde das überprüfen und einfach die Größe erhöhen. Das ist okay. Also, ich will uns, weil das 2,5 D ist, lass uns zur Kamera gehen. Das sind 2,5 D. Wir können die Z-Achse so vergrößern und das Ganze so bewegen. Zoomen Sie so und so hinein. Vielleicht bis zu dieser Stelle. Jetzt sind wir ganz am Anfang, also können wir gleich hier einen Keyframe setzen Nun, da die Kamera ausgewählt und wir wollen natürlich sichergehen, dass all diese drei, ist und wir wollen natürlich sichergehen, dass all diese drei, wenn ich die Taste gedrückt halte, ein Keyframe für die X-, Y- und Z-Achse festgelegt haben , sodass die X-, Y - und Z-Achse wissen, dass wir hier an diesem Punkt beginnen Deshalb haben wir die Keyframes. Lassen Sie uns jetzt ein bisschen weitermachen. Wie Sie sehen können, ist die Maus jetzt reingekommen . Jetzt ist es genau da. Dies gibt uns die Möglichkeit, diese Keyframes zu kopieren, kopieren und einzufügen, sodass wir sie vergrößern können, wenn wir sie bewegen , um auf die Fünf-Sterne-Bewertung zu klicken Zuallererst ist es an dieser Stelle genau da Lassen Sie uns das sogar ein bisschen vorantreiben, genau da. Also möchte ich diese Keyframes genau dorthin ziehen. Lassen Sie uns das sogar ein bisschen nach hinten verschieben. Jetzt müssen wir uns bewegen, um an diesem Punkt heranzuzoomen. Also in der Z-Achse, also lassen Sie uns in der Z-Achse hineinziehen. X-Achse und Y-Achse. X-Achse ein bisschen. Halten Sie die Strg-Taste gedrückt, um sich in kleineren Schritten zu bewegen. Und jetzt wollen wir einen Moment hier bleiben. Ich wähle diese Kopie aus und gehe dann ein bisschen weiter, bis wir darauf klicken. Jetzt gehen wir davon aus, dass wir zu diesem Zeitpunkt darauf klicken und das einfügen. für die ganze Zeit hier für die ganze Zeit die gleichen Werte ein, sodass wir uns nicht in der Kamera bewegen müssen. Lass uns das einfach spielen und sehen. Also von hier nach hier bewegen wir die Maus, um zu gehen und darauf zu klicken. Wir müssen die Kamera bis zu diesem Punkt verzögern. Also lass mich einfach auf die Kopie klicken und sie dort einfügen. Das heißt, wir werden für diesen Moment warten, bevor wir ausziehen. Also lass uns jetzt ausziehen. Also in der Z-Achse und in der Y-Achse wieder Z-Achse. Y-Achse. Ich denke , das ist ein guter Ort. Sag das, Control. Ich werde auch die X-Achse kopieren und dort einfügen, weil sie im verbleibenden Teil der Timeline auch animiert wird wir in die Zukunft gehen , wenn wir in die Zukunft gehen. Wir möchten also, dass es auch weiß, dass es seine Position und seinen Achsenwert beibehalten soll , bis er geändert wird. Also werden wir es jetzt auch hier für einen Moment verschieben. Bis sich der Mauszeiger bewegt, denn irgendwann wird hier auf die Schaltfläche geklickt Nehmen wir an, zu diesem Zeitpunkt wird darauf geklickt. Zu diesem Zeitpunkt hätte er also dieselbe Position beibehalten sollen Fügen wir dieselben Positionen hier ein. Und wenn darauf geklickt wird, gehen wir jetzt zur anderen Stelle auf der anderen Karte Lassen Sie uns diese also tatsächlich weiter nach außen ziehen. Drücken Sie S, um zu speichern. Gehen wir zurück und spielen das von Anfang an ab. Mm hmm. Warten Sie dort, klicken Sie, dann bewegen Also fangen wir jetzt an, uns hierher zu bewegen. Wir fangen an, uns von hier aus zu bewegen, und wenn wir an diesem Punkt angelangt sind, wollen wir sehen, was wir haben. Wenn wir an diesem Punkt angelangt sind, haben wir ihn und lassen uns auch das Z etwas vergrößern. Genau, so. Nachdem wir hier einen Moment gewartet haben, wird auf die Schaltfläche geklickt Dann folgen wir weiter , wohin der Mauszeiger geht Wir kommen davor an. Dann warten wir einen Moment, kopieren das, bis es Zeit ist, umzuziehen. Fügen wir es also genau dort bevor wir zum Titel übergehen. Also Strg S und dann lass uns das spielen. Nachricht angeklickt. Hier sehen wir uns den Effekt der Nachrichteneingabe an. Dann lasst uns von hier aus weiterziehen und sehen, was wir haben. Das Z verschieben Und lassen Sie uns hineinzoomen. X. Ich denke, das ist ein guter Ort. Jetzt haben wir das. Wir haben hier einen Moment verspätet, dann gehen wir zur Schlagzeile über, und da entspannen wir uns. Oder sollen wir uns langsam bewegen? Was ist, wenn wir uns schneller bewegen? Ja, schneller ist besser. Ja, lass es uns wieder dorthin verschieben. Ordnung, also lass es uns jetzt von Anfang an spielen . Spiel das Klicken Sie auf die Startnachricht Adam Savaging. Wir können sehen, wie sie antworten. Dann lies das. Dort werden wir den Highlighter-Effekt animieren Highlighter-Effekt animieren Lassen Sie uns noch eine wichtige Sache tun. Wie Sie sehen können, sieht die Animation sehr langweilig und linear aus. Wir möchten der Animation ein federndes, elastisches Animationsgefühl verleihen. Also diese federnde Lockerung. Also, wie üblich, wählen wir all diese Shift-Taste gedrückt, um die Höhe dort zu reduzieren aus und halten die Shift-Taste gedrückt, um die Höhe dort zu reduzieren. Wählen Sie alle aus. Halten Sie die Taste gedrückt und klicken Sie auf eine von ihnen, um sie in Bézier-Kurven Halten Sie die Umschalttaste gedrückt. Und lassen Sie uns ein paar schöne Kurven wie diese erstellen. S-Formen. Ordnung, jetzt zurück zum Timer und lass es uns von vorne spielen und C. Ja. Sieht sehr professionell aus. Ich liebe es. Stellen Sie sich jetzt vor, wir fügen Musik und Soundeffekte hinzu. Es wird episch werden. Lassen Sie uns in der nächsten Lektion sehen, wie Sie diese anderen Elemente jetzt animieren Wir sehen uns in Kürze. 18. Animieren der Benutzerprofilkarte: Jetzt ist es an der Zeit, die Reaktionen beim Klicken oder Schweben des Mauszeigers zu animieren Klicken oder Schweben des Mauszeigers Wir beginnen also mit der Benutzerprofilkarte, die das ist Und das Erste, was wir hier sehen, ist, dass der Mauszeiger hierher kommt und sich der Sternebewertung nähert. Lassen Sie uns also die Sternebewertung animieren. Es ist auf der Benutzerprofilkarte. Duplikator mit fünf Sternen. Nun wollen wir diesen Duplikator mit fünf Sternen duplizieren, weil wir einen brauchen, der keine Füllung hat, und einen, der eine Füllung hat Lass es mich dir zeigen. Wenn das ausgewählt ist, und denken Sie daran, dass wir die fünf Sterne, den Stern selbst, die Sternform, in den Duplikator legen , nur damit wir sie als eine Sache bewegen können Wir wollen also den Duplikator mit fünf Sternen und Control D auswählen . Jetzt haben wir zwei davon Ich gebe das ein und sage: „ Füllen und auswählen“, Füllen und auswählen“ Strich“ eingeben und sagen Das wird der mit dem Strich sein. Ich werde das erweitern und in das Feld hier gehen und die Füllung deaktivieren. Ich habe nur einen Schlaganfall. Jetzt müssen wir uns nur noch in der Zeitleiste bewegen. Bevor der Mauszeiger zur Sternebewertung kommt. Lassen Sie uns also hier den auswählen, der ein Gefühl vermittelt, gehen wir zum Anfang und wählen diesen Griff aus. Und im Grunde sagen wir von diesem Moment bis zu diesem Moment, einfach diese Fünf-Sterne-Bewertung. Aber wenn wir an diesem Punkt angelangt sind, stellen Sie denjenigen vor, der das Gefühl hat. Also haben wir eigentlich nichts animiert. Wir haben gerade einen von ihnen weiter in die Zukunft verlegt. Das erzeugt also den Effekt, dass es seine Farbe ändert, wenn wir mit der Maus darüber Ich möchte die Alt-Taste gedrückt halten, mit einem Mausrad hierher zoomen und das auswählen Dort sollte es beginnen. In Ordnung, schnappen wir uns das so. In Ordnung, also halten Sie Alt gedrückt und die Maus wird gedrückt, um die Ansicht zu verkleinern. Also lass uns das spielen und sehen. So wie das. Ich liebe es. Das nächste, was wir hier tun werden, ist an diesen Punkt zu kommen. Wenn der Mauszeiger diese lila Taste erreicht, sollte sich die Farbe ändern. Das ist also die Follow-Schaltfläche im Benutzerprofil. Hier ist sie. Also erweitere den Follow-Button. Für die rechteckige Form. Wir wissen, dass wir an diesem Punkt die Farbe ändern wollen. Also rechteckig. Farbe füllen. Wir halten die Maustaste gedrückt und klicken darauf. An diesem Punkt sagen wir also, dass die Farbe dieses Rechtecks zu diesem Zeitpunkt dieselbe Farbe haben sollte . Aber jetzt gehen wir etwas zurück. Tatsächlich wollen wir es, ich will es genau dort haben. Dort wollen wir, dass es diese Farbe hat. Aber wenn es zum nächsten Bild in der Schaltfläche selbst wechselt, muss es eine andere Farbe haben. Und bevor wir das tun, kümmern wir uns zunächst darum, ob der Mauszeiger die Taste verlässt. Es ist also immer noch in der Taste, immer noch in der Taste, außerhalb der Taste. Also an diesem Punkt sollte es auch diese Farbe sein, die normale Farbe, Paste. Aber jetzt, dazwischen hier, sollte es eine andere Farbe haben. Also welche Farbe. Geben wir ihm ein dunkleres Violett. Automatisch wurden einige Keyframes eingeführt. An diesem Punkt also lila, hellviolett, dunkel, dann wieder hell. Also lass uns das spielen und sehen. Es erzeugt also diesen Schwebeeffekt. Ich liebe es. Wir wollen dasselbe für die Nachrichtenschaltfläche tun. also kurz vor diesem Punkt Lassen Sie mich also kurz vor diesem Punkt zusammenklappen und das und erweitern Sie die Nachrichtenschaltfläche, das Rechteck hier. An dieser Stelle sagen wir also, dass wir wollen, dass die Farbe dieses Rechtecks diese Farbe hat. Und wenn wir an dem Punkt angelangt sind, an dem der Mauszeiger auf die Schaltfläche zeigt, legen wir einen weiteren Keyframe also die Taste gedrückt halten, setzen wir einen weiteren Keyframe, aber machen wir ihn etwas dunkler So wie das. Und danach, wenn der Mauszeiger die Taste verlässt, muss er natürlich zur Farbe zurückkehren. Also lass uns das kopieren. Und lassen Sie uns ein wenig vorwärts gehen. Da wird es sich verzögern. Sagen wir, an dieser Stelle, an dieser Stelle, fügen Sie ein. Wir haben also diesen Schwebeeffekt, den Übereffekt. Und wenn es da drüben ist, geben wir ihm jetzt auch diese Positionsanimation Reduzieren Sie das Rechteck, wählen Sie die Nachrichtenschaltfläche als Ganzes und lassen Sie uns die Position an diesem Punkt animieren Gehen wir also zurück und klicken an dieser Stelle darauf Also genau da, lassen Sie uns das erweitern. Kopiere das, füge es ein. Jetzt, zwischendurch, drück es runter. Also so. Dann fangen wir an, uns zu bewegen. Dann lass uns gehen. Abspielen. Exakt. Genau hier wollen wir die Punkte animieren, und genau das werden wir in der nächsten Lektion tun Wir sehen uns in Kürze. 19. Animieren der Nachrichtenkarte: Jetzt ist es an der Zeit zu sehen, wie man animiert Lassen Sie mich einfach den Bildschirm mitbringen Lass mich einfach F drücken, um es zu füllen. Dann wollen wir sehen, wie man diese drei Punkte genau hier animiert Das ist also die Nachrichtenkarte. Ich werde es erweitern. Und ich glaube, diese drei Punkte wurden zusammen mit diesem gruppiert. Ich habe vergessen, sie zu trennen weil ich danach gesucht und hier gefunden habe. Und doch ist dieses Rechteck, Form Sechs, dieses Texteria. Also ziehe ich das und lege es in die Hutblase fünf, weil das ist Hutblase fünf, was ich eigentlich Punkttippeffekt nennen sollte , weil das keine Sprechblase ist Wenn wir es jetzt erweitern, werden wir den Duplikator finden, nach dem wir gesucht haben Dieser Duplikator hat drei Punkte. Wir wollen also diese drei Punkte animieren, und das spezifische Attribut, das wir animieren wollen ist die Opazität, sodass in dieser Sekunde der erste Punkt heller als der zweite und der dritte am dunkelsten ist zweite und der In der nächsten Sekunde ist der nächste Punkt heller oder blasser und weiter entlang der Zeitleiste Also wollen wir die Opazität abwechseln . Also, wie machen wir das? Eine gute Möglichkeit, Werte oder Daten innerhalb von Cavalry zu wechseln , ist die Verwendung des Oszillators Ein Oszillator ist ein Deformer, und wir werden sehen, wie man ihn Aber wenn wir einen Deformer auf jedes Element in einem Duplikator oder in einer Gruppe anwenden wollen , die auf diese Weise dupliziert wurde, müssen wir über den Submsh-Deformer auf sie zugreifen also der Duplikator ausgewählt ist, gehe ich zu den Deformern und wähle den Submsh-Deformer Wenn also der Duplikator ausgewählt ist, gehe ich zu den Deformern und wähle den Submsh-Deformer aus. Also wähle ich jetzt das Sub-Mesh aus, und das Das Sub-Mesh ist ein Deformer , der einfach jedes Objekt in einem Duplikator auswählt und das tut, was Sie dem Duplikator gesagt haben Wenn wir also eine Gruppe von Punkten haben, wählt das Sub-Mesh das erste Objekt im Duplikator aus und tut, was Sie ihm gesagt haben Dann geht es wieder los, wählt das zweite Objekt im Duplikator aus und wendet das an, was Sie ihm gesagt haben Dann geht es zum dritten Objekt im Duplikator und wendet das an, was Sie ihm gesagt haben also Submsh ausgewählt ist, gehen wir zum Feld Farbe über Und was sagen wir den Submern, mit jedem Objekt zu tun? Das ist das Alpha-Feld. Bei Alpha dreht sich alles um Opazität. Wir möchten dazu sagen, wir einen Oszillator hinzu Also genau hier werde ich Oszillator sagen. Und jetzt wähle ich das Sub-Mesh aus und ziehe den Oszillator in den Alpha-Kanal Jetzt gehe ich in den Oszillator. Und wenn wir das spielen, werden Sie sehen, dass etwas passiert, aber es bewegt sich zu schnell Kannst du sie sehen? Wir wollen also zunächst den Höchstwert und auch den Minimalwert erhöhen Höchstwert und auch den . Wir wollen nicht, dass es zu dunkel ist. es jetzt oszilliert, der niedrigste Wert, den es erreichen kann, was die Opazität angeht, 21 Wie Sie jetzt sehen können, schwankt sie zwischen 21 und 48. Wenn ich dem vielleicht 70 oder 80 geben kann, wird es auf der höheren Seite dunkler So wie das. Das Gute an Deformern ist, dass Sie sie nicht mit Keyframes versehen müssen Sie geschehen einfach automatisch, wie Sie sehen können Wir haben keine Keyframes hinzugefügt, aber sie sind animierend Aber das Problem ist, wenn wir das abspielen, passiert es zu schnell. Es blinkt und es scheint so, als ob alle Punkte gleichzeitig blinken Was wir also tun wollen, ist hier eine Staffelung hinzuzufügen. Nun, wenn wir das spielen, aber sie bewegen sich schnell. Gehen wir also zur Frequenz und sagen 0,1. Lass uns das versuchen. Spiel das. Okay, es ist zu langsam. 0,3. 0,4. Ja, so. Wir können sogar 0,5 sagen. Da haben wir's. Das war das einzige, was wir auf der Nachrichtenkarte animieren sollten auf der Nachrichtenkarte animieren Als Nächstes werden wir in der nächsten Lektion diese Highlighter-Effekte animieren Wir sehen uns also in Kürze. 20. Animieren der Nachrichtenüberschrift: In dieser Lektion wollen wir nun sehen, wie dieser Highlighter-Effekt animiert werden Das ist also die Schlagzeile. Das werde ich erweitern. Und das waren die letzten beiden Formen, die wir gezeichnet haben. Also drücke ich die Eingabetaste und benenne es um in Highlighter per Enter, Highlighter, Lower, damit ich zwischen den beiden unterscheiden kann Nun wollen wir diesen Highlighter auswählen, zuerst oben, und ich möchte ihm einen Align-Deformer hinzufügen Und bevor ich ihn hinzufüge, können wir diese Felder animieren, wenn ich Highlighter oben sage und zur Größenskala übergehe können wir diese Felder animieren Wir können die Skala animieren. Aber das Problem ist, es wird immer von der Mitte aus wachsen, aber wir wollen, dass es von dieser Seite nach rechts wächst, genauso wie Sie einen Satz hervorheben würden Also, wie machst du das? Wir wollen das aufeinander abstimmen. Wir wollen einen sogenannten Align-Deformer verwenden, um zu sagen, von dieser Seite aus wachsen oder sich so verhalten, wie Sie sich von dieser Seite aus verhalten werden dieser Textmarker ausgewählt ist, gehe ich zum Ausrichten des Deformers über Die Ausrichtung wird hier hinzugefügt. Also wie immer kann ich diesen Highlighter einfach zum Align hinzufügen diesen Highlighter einfach zum Align Und oder ich kann diese Ausrichtung zum Highlighter hinzufügen. Nun, diese Ausrichtung hier, ich kann sie verwenden, um Dinge nach links oder rechts zu verschieben Wenn ich das nun so drücke und den Textmarker selbst auswähle, bedeutet das, dass wir ihn im X nach oben oder unten skalieren wir jetzt von dieser Seite aus skalieren Was ich jetzt tun kann, ist, ihn genau hier im X zu positionieren , fünf technische Fähigkeiten von dort aus, die Skala bis zum Ende zu erhöhen Also möchte ich sehen, von wo aus ich es spielen werde. Also werde ich das spielen. Also wird es animiert und wenn es soweit ist, verzögert es sich für eine Sekunde, dann fängt es an, von hier aus zu zeichnen Also möchte ich einen Keyframe genau hier auf dem Textmarker platzieren genau hier auf dem Skalieren Sie also zunächst und legen Sie einen Keyframe fest. Und was die Skala angeht, möchte ich eigentlich, dass ich meine Pfeiltaste nach unten drücken lasse, bis sie verschwindet. Zu diesem Zeitpunkt ist die Skala im X also Null. Wenn ich jetzt spiele, wollte ich schon den ganzen Highlighter gezeichnet haben Also lass es uns zeichnen. Also von hier bis hier wird es das zeichnen. Mal sehen, spielen. Genau. Dann müssen wir von hier aus dasselbe mit diesem zweiten Textmarker Ich wähle den unteren aus und gehe zu Deformers Align. Wo ist Align? Ich werde es unter den Textmarker legen, an dem es ausgerichtet ist , sodass ich es einfach zusammenklappen und erweitern kann Aber jetzt wählen wir die Ausrichtung aus und verschieben das Ganze bis zum Ende. Wählen Sie nun den Textmarker selbst aus. Also müssen wir es hier positionieren. Und jetzt können wir nur die Skala mit Keyframes versehen. Also Keyframes für die Skala erstellen. An diesem Punkt Null. Und dann an diesem Punkt eins. Genau. Was wir also tun müssen, ist auch das auszuweiten. Halten Sie die Strg-Taste gedrückt, wählen Sie das aus, wechseln Sie zum Diagrammeditor, verschieben Sie die Taste, scrollen Sie nach unten und wählen Sie diese aus. Halten Sie die Umschalttaste gedrückt. Lass uns das ziehen. Halten Sie die Umschalttaste gedrückt, um die Höhe zu reduzieren und zu vergrößern. Und jetzt lass uns hierher zurückkehren und spielen und sehen, was passiert. Es ist ein Rap, mein Freund. Das Einzige, was jetzt noch übrig ist, sind Soundeffekte. Wir wollen etwas Hintergrundmusik und Klickgeräusche und all das. Lass uns das in der nächsten Lektion machen. 21. Soundeffekte hinzufügen: Jetzt ist es an der Zeit, unserem Projekt etwas Sound hinzuzufügen. Also möchte ich zu unserer Lieblingswebsite für Ressourcen zurückkehren , und sie heißt Pixel Bay. Neben Soundeffekten bieten sie auch kostenlose Musik. Also werde ich Musik wählen. Und Sie können wählen, welche Art von Sound Sie möchten. Sagen wir also Ambient-Technologie. Wählen Sie jetzt hier einen Soundtrack aus und laden Sie ihn herunter. Nun, eine Sache, die ich gerne mache, ist, mir das anzusehen. Ich lade gerne nur Inhalte herunter , die über diesen Content ID Shield verfügen, und dafür gibt es einen guten Grund. Wenn ich das auf einem neuen Tab öffne, wird die Inhalts-ID registriert. Und wenn ich sage, lade das kostenlos , kann ich ein Lizenzzertifikat herunterladen. Also habe ich den Beat. Also habe ich das Instrument und die Lizenz. Wenn ich die Lizenz öffne, hier ist sie. Dies ist die Lizenz, nach der du in YouTube gefragt wirst . Falls du dein Video veröffentlichst und es einen Content-ID-Hinweis gibt, wirst du aufgefordert, nachzuweisen , dass du die Erlaubnis hast, diesen Sound zu verwenden. Und das werden Sie uns zur Verfügung stellen. Es gibt eine Stelle, an der du einfügen wirst. Es ist sehr einfach, sehr leicht, ein paar Minuten Zeit. Es gibt hier viele, viele andere Instrumente ohne solche Lizenz, und sie sind für Sie völlig kostenlos zu benutzen Das Problem ist, manchmal benutzt du das und du wirst vielleicht für nichts markiert Aber irgendwann in der Zukunft wachst du vielleicht eines Morgens auf und stellst fest, dass es einen Hinweis auf eine Inhalts-ID-Verletzung gibt Hinweis auf eine Inhalts-ID-Verletzung auf diesem Instrument basiert, und dass es nirgends eine Lizenz zum Herunterladen gibt Sie müssen also das Video herunterladen oder Wege finden , den Abschnitt zu entfernen, in dem der Song abgespielt wird. Vermeiden Sie es also, Instrumentals ohne Inhalts-ID zu verwenden. Kehren wir zu den Soundeffekten zurück. Und ich möchte nach einem bereits heruntergeladenen Klicksound suchen. Wir wollen auch ein SSH herunterladen, ein paar SSH-Sounds . Okay, meine Lautstärke ist leiser, also lass mich das einfach abspielen Ja. Halte also Ausschau nach Sounds, die abgespielt werden sich die Dinge im Video bewegen. Das sind die Dinge , die den Klang großartig klingen lassen. Ich komme zurück, um dir zu zeigen, was ich herunterladen konnte . Wir sehen uns in Kürze. Wie Sie sehen können, konnte ich einige Soundeffekte und ein Hintergrundinstrument herunterladen . Also werde ich sie einfach in diesen Ordner ziehen. Und jetzt werden sie als Gruppe importiert. Wenn ich es erweitere, sind alle meine Sounds in einer Gruppe. Fangen wir also mit dem Hauptsound an. Oh, warte. Das ist an einem anderen Ort. Lass mich einfach darauf doppelklicken. Lassen Sie mich das zusammenklappen und darauf doppelklicken. Das ist also der Song, den ich als Hintergrundtrack verwenden möchte . Ich werde es da reinziehen. Und ich werde es unter den Hintergrund ziehen , außerhalb des Hintergrunds, aber darunter. Ich möchte, dass der Boom genau hier beginnt. Nein, genau hier. Ja, so. Jetzt brauchen wir einen Mausklick genau hier. Tatsächlich benötigen wir genau hier einen Mausklick, wenn wir eine Fünf-Sterne-Bewertung vergeben. Platzieren wir es also einfach genau dort. Dann drücke D, um es zu duplizieren. Mach weiter. Genau da brauchen wir auch genau dort. Also lass uns das spielen. Ordnung. Lass uns einen Swoosh hinzufügen Ja, so. Schau dir das an. Wir können hier einen langsameren haben. War der andere Sohn. Nehmen Sie sich Zeit, um es perfekt zu machen. Ja, lass uns das sehen. Wir werden die Lautstärke regulieren. Mach dir keine Sorgen. Ja. Ja, jetzt wir von hier nach hier driften, brauchen wir noch einen Lass uns das einfach duplizieren und gleich hier platzieren. Im Moment versuchen wir also nicht, perfekt zu sein. Drücken Sie noch einmal D , um den Vorgang abzuschließen. Da haben wir's. Dann sind die Höhepunkte endlich Sound. Wo ist es? Ist es am Anfang? Ja. Control D. Ordnung. Jetzt, genau hier, muss ich für einen Moment die Lautstärke meines Lautsprechers erhöhen , um den Ton zu regulieren. Also gib mir nur einen Moment. Ich möchte den Sound ausbalancieren. Diese Übersetzung ist also zu laut. Negativ 16. Sagen wir negativ zehn. Es sollte also auch minus 20 sein. Oh, es sollte negativ zehn sein, negativ 20, negativ zehn, negativ 20, negativ 20, wahrscheinlich negativ 20, und diese jeweils minus 15. In Ordnung, fangen wir mit dem Gespräch an. Sagen wir auch minus 20. Siehst du, nein, ich denke immer noch negativ 20, negativ 30. Immer noch zu laut. Ja. Also habe ich mit der Lautstärke jedes Sounds herumgespielt und ich glaube, mir gefällt, was wir gerade haben. Es ist nicht perfekt, aber es ist viel besser. Nehmen Sie sich also Zeit und spielen Sie hier mit der Lautstärkeregelung herum . Arbeiten Sie die meiste Zeit im Negativen, weil alles Positive, alles, was in der Nähe von eins und höher liegt, zu laut ist Wie Sie sehen können, sind die meisten von mir hier negativ 20, negativ 16, negativ zehn, minus 20, in den negativen Zehnern Also Control S. Ich werde das sagen, und wir sind jetzt mit dem Sound fertig. Jetzt, da wir mit dem gesamten Design und der Animation fertig sind, ist es an der Zeit, unser Video zu exportieren. Wie machen wir das? Lass es uns in der nächsten Lektion herausfinden. Wir sehen uns in Kürze. 22. Exportieren: Das Projekt ist fast fertig, aber wir müssen es exportieren, um es mit anderen zu teilen. Wie machen wir das? Als Erstes müssen wir also sicherstellen, dass unser Farbraum zumindest für mich auf den Farbraum eingestellt ist. Was funktioniert, ist der Farbraum Rec sieben oh neun. Wenn Sie dies nun aktivieren und hier auf einen anderen Wert ändern, erhalten Sie möglicherweise nicht die erwarteten Ergebnisse. Zuallererst haben sich alle unsere Farben hier geändert, allein aufgrund der Tatsache, dass wir das Farbmanagement aktiviert haben. Das war lila. Jetzt ist es blau. Also habe ich in Cavalry nicht viel mit Farbmanagement herumgespielt in Cavalry nicht viel mit Farbmanagement Ich habe erst seit weniger als einem Monat mit der Software herumgespielt weniger als einem Monat mit der Software Deshalb bin ich hier, um mehr darüber zu erfahren. Ich habe also festgestellt, dass es für mich funktioniert, das zu deaktivieren. Stellen Sie dieses Nein ein, gehen Sie hierher und stellen Sie das auf Rot sieben auf neun, deaktivieren Sie das. Gehen Sie dann zum Rendermanager. Wählen wir also die aktuelle Komposition und wir werden alle Standardeinstellungen sehen. Ich ändere hier nicht viele Dinge, vielleicht den Namen der Animation der Kompositions-Benutzeroberfläche. Und der Ordner für automatisches Rendern ist der automatisch erstellte Render-Ordner, der erstellt wurde, als wir die UI-Animation, Renderings, erstellt haben Denken Sie daran. Sonst noch was hier? Natürlich können Sie vor dem Rendern jederzeit zu den Kompositionseinstellungen gehen und den Frame-Bereich ändern, aber das wird auch ändern, wo Ihre Keyframes funktionieren, weil Ihr Pfad und alles, was Sie erstellt haben, auf dieser Größe der Timeline basieren . Wenn Sie die Timeline erweitern, bedeutet das, dass sich all diese Keyframes jetzt nicht mehr genau dort befinden, wo sie waren. Sie sind leicht falsch. Also wie dem auch sei, lass uns weitermachen und exportieren oder rendern. Ich denke, wir sind gut. Ich drücke also einfach die Eingabetaste. Gehen wir zu Format. Im Moment ist das Format P vier. Das werde ich exportieren. Lass uns auf Rendern klicken. Das ist eigentlich der Zielordner. Wir können ihn öffnen. Jetzt, wo es fertig ist, öffnen wir den Zielordner und da ist unser Video. Lass es uns spielen und hier, was wir haben. Lass mich einfach die Lautstärke erhöhen. Oh, es läuft auf meinem zweiten Bildschirm. Lass es mich einfach herbringen. In Ordnung. Ordnung. Ich freue mich sehr darauf zu spielen. Lass uns gehen. Lass uns gehen. Lass uns ein Spiel beginnen, Mann. Ich liebe es. Also los geht's. Ich denke, das ist ein guter Ort, um diese Lektion zu beenden. Ich habe noch ein paar abschließende Gedanken und die nächsten Schritte, die ich empfehlen würde. Wir sehen uns also in der nächsten und letzten Lektion. Geh nirgendwohin. 23. Nächste Schritte: Und damit ist deine erste Kavallerie-Animation abgeschlossen. Sie sind von einer leeren Komposition zu einer vollständig animierten Benutzeroberflächenszene übergegangen einer vollständig animierten Benutzeroberflächenszene mit einem Cursor, der sich wie eine echte Maus bewegt, Tasten, die auf Klicks reagieren, Hover-Effekten, einer filmischen Kamera zwischen verschiedenen Karten und Benutzeroberflächenelementen, einer Tippanzeige und einer Schlagzeile mit animierten Textmarkereffekten Deshalb möchte ich nur gratulieren, dass Sie es so weit gebracht Besitzen Sie jetzt die Fähigkeiten, um in Zukunft Ihre eigenen Animationen zu erstellen . Wenn du eine App, Software oder Website mit Vibe-Code oder Vibe-Technik erstellst , kannst du sie jetzt mit schönen animierten Videos bewerben, mit freundlicher Genehmigung von Weitere Kurse kommen bald. Ich habe vor, mich eingehender mit datengesteuerten Animationen, Bewegungsgrafiken für YouTube und schließlich vollständigen Produktanimationen zu befassen. Wenn du benachrichtigt werden möchtest, wenn ich eine neue Klasse auf Cavalry einstelle, folge mir direkt hier auf Skillshare und bleib auf dem Skillshare und Wenn dir dieser Kurs gefällt, lass mich wissen, was du davon hältst . Was hat dir daran gefallen? Und hoffentlich, was möchtest du vielleicht , dass ich in der nächsten Klasse behandeln soll. Sie wissen das vielleicht nicht, aber Ihre Bewertung ist der beste Weg, um mir mitzuteilen, wie ich als Kavallerielehrer abschneide, und sie hilft auch anderen Schülern wissen, ob dieser Kurs ihnen helfen kann Hinterlassen Sie also eine Bewertung und teilen Sie mir Ihre Meinung mit. Mein Name ist Ken, und ich möchte mich nur bei Ihnen dafür bedanken, dass Sie von der ersten bis zur letzten Lektion bei mir geblieben sind. Gehen Sie jetzt raus und animieren Sie etwas Fantastisches. Wir sehen uns in der nächsten Klasse. Frieden.