Figma Motion Masterclass: Erstellen Sie professionelle UI-Animationen

1. Willkommen zum Kurs und was Sie aufbauen werden
: Hallo und willkommen zur Figma Motion Master Class. Wenn du schon einmal wunderschöne Benutzeroberflächen entworfen hast und dir gewünscht , sie mit flüssigen Animationen und Interaktionen zum Leben zu erwecken , dann ist dieser Kurs genau das Richtige für dich Hallo. Mein Name ist Ahmed Al Hassan und ich bin ein UIUX-Designer mit mehr als fünf Jahren Erfahrung in der Entwicklung digitaler Produkte, interaktiver Schnittstellen und Designsysteme Und im Laufe meiner Karriere habe ich eine sehr wichtige Sache gelernt, nämlich dass großartige Benutzeroberflächen nicht nur fühlen sie sich intuitiv und durchdachtes Motion-Design fühlen sie sich intuitiv und interaktiv Und genau das werde ich dir in diesem Kurs zeigen Zunächst werden wir verstehen, was Figma Motion eigentlich ist und wie es in einen modernen Designprozess oder Arbeitsablauf passen kann einen modernen Designprozess oder Arbeitsablauf Erstellen von Dateien, das Vorbereiten von Ebenen, deren Organisation und deren Einrichtung sodass wir unsere Animationen für sie erstellen können Von dort aus werden wir damit beginnen, unsere Animationen Schritt für Schritt zu erstellen, und dazu gehören auch Animationen, die sich auf Größe, Position und Opazität beziehen auf Größe, Position und Opazität Es wird sich auf das Timing und die Lockerung beziehen. Wir werden auch die häufigsten Fehler beim Motion-Design besprechen und darüber , wie kleinste Anpassungen dazu beitragen können diese Animationen dramatisch zu verbessern sie ausgefeilter und natürlicher wirken zu Schließlich erfahren Sie, wie Sie Ihre Dateien und Videos in verschiedene Formate wie Geschenke, MP Fours, Web und SVG exportieren Videos in verschiedene Formate wie Geschenke, MP Fours, Web und Am wichtigsten ist, dass Sie sie in Ihrem Portfolio für Präsentationen, Entwicklung oder für was auch immer Sie sie verwenden möchten, verwenden Am Ende dieses Kurses werden Sie lernen, wie Sie professionell aussehende Benutzeroberflächenanimationen entwerfen professionell aussehende Benutzeroberflächenanimationen die Ihren Designs Persönlichkeit, Klarheit und Feinschliff verleihen . Lass uns anfangen. 2. Was ist Figma Motion?: Hallo und willkommen zum allerersten Figma-Motion-Kurs. Also werde ich dir durch diese sehr schnell ausgeführte Bewegung nur eine kurze Vorstellung davon geben , was Figma-Bewegung ist, okay Lassen Sie uns also sehen, wie dieses Bewegungsdesign aussieht, und das war's Es wird sich nur ein bisschen wiederholen, aber das ist Figma-Bewegung Und was Sie gerade gesehen haben, wenn Sie mit Figma selbst vertraut sind wahrscheinlich Das ist ein extrem neues Feature, falls ihr es euch irgendwann im Jahr 2026 anhört, und das ist im Grunde ein Sie wissen das wahrscheinlich schon, aber falls Sie es nicht wissen, ist Figma ein Designprogramm, das sehr allgemein ausgedrückt werden kann Die meiste Zeit wird es für UIUX-Designzwecke verwendet Es wird für das Webdesign, für das App-Design, für die Erstellung jeder Art von Bildschirm und jeder Art von Wireframe-Prototyp In den letzten Jahren wurde es jedoch um viele verschiedene Dinge erweitert Erstellung von Grafiken, Grafikdesigns, Postern sowie Präsentationen jetzt auch für soziale Medien und vieles mehr verwendet werden. Mit diesem neuen Update können Sie diese Grafiken jetzt erstellen, und das ist nicht nur eine Spielerei Okay? Lass mich dir das sagen. Figma Motion ist eine brandneue Funktion. Es ist immer noch auf den Beinen, würde ich sagen, es ist noch in einem frühen Stadium, aber es wird erweitert, es wird daran gearbeitet und erweitert, um ein umfassenderes Feature zu werden. Gehen wir also ein bisschen zurück und besprechen, was es bewirkt. Falls Sie also nicht wissen was Motion Design ist, was wir gerade hier gesehen haben, gibt es Ihnen im Grunde eine Zeitleiste und ermöglicht es Ihnen, verschiedene Animationen zu erstellen. Sie arbeiten nicht nur mit Bildern wie diesen Textelementen, sondern diese Textelemente selbst können im Laufe der Zeit animiert werden Das ist nichts völlig Neues, muss ich sagen. Das haben wir bei anderen Programmen wie Photoshop beobachtet. Es hat auch eine Zeitleiste. Es ist nicht gerade eine Videobearbeitungssoftware. Es ist eher eine Fotobearbeitungssoftware. Es heißt Photoshop, aber diese Funktion ist eingebaut. Das macht Adobe oft. Es integriert viele Funktionen in ihre Programme. Sie können in fast allen ihren Programmen drei D machen, Sie können in etwa drei D modellieren. Sie können einige Animationen und so weiter machen, es gibt viel Tiefe Aber bisher hat FigMa versucht, es minimal zu halten, und so haben sie jetzt, als sie diese Funktion entwickelt haben, wirklich viele Türen geöffnet In diesem Kurs werden wir also darüber sprechen, wie wir diese neue Funktion nutzen können , um wunderschöne und flüssige Animationen zu erstellen wunderschöne und flüssige Animationen Diese Animationen können wir als Videos exportieren. Wir können sie als Geschenke exportieren. der Zeit eine Menge Wir werden mit der Zeit eine Menge besprechen, und ich werde dir beibringen, und ich werde dir beibringen wie du das in deine integrieren kannst, nur damit du weißt, dass das komplett neu ist. Die Leute fangen gerade erst an, etwas darüber zu lernen, und deshalb verschaffst du dir absolut einen Vorteil. Sie haben einen Vorsprung wenn Sie sich diesen Kurs anhören, Sie nehmen alles auf, und damit haben Sie, wie gesagt, den Vorteil, ein Designer zu sein, der sich mit haben Sie, wie gesagt, den Vorteil, ein Designer zu sein, den neuesten Funktionen auskennt und sie auch in sein UIO-Hix-Design integrieren kann Lassen Sie uns ohne weitere Umschweife loslegen. 3. Wie sich Bewegungen in den Design-Workflow einfügen lassen: Bevor wir beginnen und bevor ich Ihnen die Oberfläche dieser neuen Funktion, Figma Motion, zeige , möchte ich erläutern, wie Sie diese Funktion verwenden und wie Sie sie in Ihren bestehenden Arbeitsablauf integrieren können sie in Ihren bestehenden Arbeitsablauf integrieren Ich gehe also davon aus, dass Sie bereits ein begeisterter Nutzer von Figma sind Ob Sie es für Ihr Grafikdesign verwenden, ob Sie es für Webdesign App-Design verwenden, spielt keine Rolle Aber du bist da, du weißt, wie es läuft, du weißt, wie es funktioniert. Mit diesen Informationen würde ich davon ausgehen, dass Sie wissen, dass Sie, wenn Sie auf Figma sind verschiedene Arten von Dokumenten erstellen können Figma Motion ist also kein neuer Dokumenttyp. habe ich ehrlich gesagt gedacht, als sie das Feature zum ersten Mal vorgestellt haben, als sie es zum ersten Mal angekündigt Ich dachte, es hätte eine völlig andere Oberfläche und wäre völlig unabhängig von den Designtools , die wir kennen. Falls Sie sie nicht kennen, haben Sie hier die Designdatei, nur eine normale Designdatei. Sie haben eine FIG-Jam-Datei, in der Sie mit Ihren Kollegen jammen können, Sie können verschiedene Ideen brainstormen, frei gestalten, ohne sich zu sehr zu belasten, und Sie können auch Folien und Präsentationen erstellen, im Grunde die Alternative Sie haben Figma Make, eine eigene Art von KI, was auch sehr interessant ist Figma Buzz, das ist für soziale Medien, Figma-Seite, ich werde dich nicht langweilen Im Grunde genommen wird die Art und Weise, wie Sie ab jetzt hauptsächlich darauf zugreifen werden, über das Design erfolgen Wenn Sie weitermachen und ein Designdokument öffnen , wie ich es hier bereits getan habe, befinden Sie sich natürlich im Entwurfsmodus. Ich hoffe, dass Sie damit auch vertraut sind. Aber nur für den Fall, dass Sie es nicht schon früher sind, es muss vor ein paar Jahren gewesen sein, sie haben diese neuen Modi im Grunde eingeführt. Anstatt also nur diese Tools zu haben, völlig anderer Modus mit unterschiedlichen Tools. Und du hattest auch den Dev-Modus. Wir haben das schon lange, um ehrlich zu sein. Sie haben diese Funktionen, diese verschiedenen Modi, und jetzt ist Figma Motion nur ein weiterer dieser Modi Und denken Sie daran, dass sich dies immer noch in der Beta-Form befindet. Wir werden also viele Bugs sehen, wir werden viele Probleme sehen . Aber lassen Sie uns jetzt darauf zurückkommen. So greifen Sie darauf zu, aber wie verwenden Sie es? Oder wofür würdest du es verwenden? Nun, wie ich schon sagte, werde ich Ihnen im Kurs verschiedene Beispiele oder verschiedene Kreationen zeigen , was wir damit machen könnten. Aber im Wesentlichen wird das, was wir früher mit Komponenten und Komponentenanimationen gemacht haben, mit dieser neuen Kreation jetzt viel einfacher. Anstatt also eine Komponente erstellen zu müssen und dann jede Komponentenvariante als Keyframes zu verwenden , werden wir in der Lage sein, Dinge flexibler zu verschieben , und es gibt unterschiedliche Verwendungsmöglichkeiten dafür Wenn Sie beispielsweise eine Benachrichtigungsanimation erstellen möchten , möchten Sie, dass sie so angezeigt wird, als ob sich jemand auf einem Bildschirm befindet und plötzlich eine Benachrichtigung erhält. Das willst du zeigen. Vielleicht möchtest du deinen Prototyp teilen, nicht auf normale interaktive Weise über Figma, sondern als Video Sie möchten es in dem Flow, dem Sie folgen möchten, genau so zeigen , wie Sie es möchten Ich persönlich hatte das Gefühl, dass ich es persönlich bei meinen eigenen Kunden anwenden musste bei meinen eigenen Kunden anwenden ist, dass sie manchmal nicht in der Lage sind, sich darin zurechtzufinden. Ältere Kunden, Leute, die nicht so technisch versiert sind, können Figma nicht wirklich nutzen Sie wissen nicht, wie man es benutzt. Sie werden überwältigt Sie einfach durch den Anwendungsfall oder den Benutzerablauf zu führen, indem Sie daraus ein Video machen , ist eine Möglichkeit, dies zu tun Aber abgesehen davon war es nicht unmöglich, diese unterschiedlichen und einzigartigen Animationen zu erstellen diese unterschiedlichen und einzigartigen Animationen . Früher haben wir das alle gemacht, aber jetzt ist es einfach viel einfacher, das zu tun. Das ist eine Möglichkeit, es zu tun. Sie können Benachrichtigungen machen. Sie können verschiedene Animationen im Hintergrund machen, genauso wie jemand gerade einen Prototyp durchläuft. Du könntest viele verschiedene Dinge tun. Du kannst sogar so etwas wie ein Video machen , als ob es ein echtes Video wäre, aber es ist eigentlich nur eine Animation, die du auf Figma aufgebaut hast Es gibt viele verschiedene Beispiele, aber die gute Nachricht ist, dass Sie nicht weit gehen müssen, Sie müssen alles daran setzen, es in Ihren Arbeitsablauf zu integrieren , weil es bereits da ist Es ist verfügbar, es ist auf Ihrem Computer, es ist auf Ihrer Figma-Datei Sie müssen dafür keine weitere Datei erstellen. Sie müssen nur in diesen Modus wechseln. Also hier ist ein Beispiel, das ich Ihnen zeigen möchte , von etwas, das ich gemacht habe, als ich die Ankündigung zu dieser Funktion gesehen habe die Ankündigung zu dieser Funktion sobald sie veröffentlicht wurde, und es tut mir leid, dass es so oft wiederholt wurde, aber es ist im Grunde eine sehr einfache Idee Es sieht einfach aus, es sieht sauber und glatt aus, und das ist etwas, das mit normalem Figma so schwer zu bewerkstelligen gewesen wäre mit normalem Figma so schwer zu bewerkstelligen Im Moment sind wir mit dieser fortschrittlicheren Funktion in der Lage, diese flüssig aussehenden Animationen zu erstellen , ohne unsere Designdokumente durcheinander bringen Hier ist eine Menge los. Wir haben Animationen der Position, der Größe, des Maßstabs sowie der Opazität und so weiter Und das ist das Coole daran. Sie können viele komplexe Dinge tun, ohne sich Gedanken über die Formalität machen zu müssen Sie können es einfach wie ein normales Videobearbeitungsprogramm behandeln ein normales Videobearbeitungsprogramm Wie gesagt, um das Ganze abzuschließen, müssen Sie sich nicht die Mühe machen, diese Funktion in Ihren Workflow zu integrieren . Es ist schon da. Es ist genau da, wo Sie es haben wollen, wo Sie wissen, wie man es findet, und es ist nicht so kompliziert. Aber du musst es trotzdem lernen, und genau aus diesem Grund schaust du dir diesen Kurs an. Lass uns anfangen. 4. Navigieren in der Benutzeroberfläche und Einrichten der Projektdatei
: Ordnung. Willkommen zurück. In dieser Lektion werden wir uns mit der Benutzeroberfläche vertraut machen und eine Projektdatei einrichten. Wie ich bereits in den vorherigen Lektionen erwähnt habe, Sie sich dafür keine Mühe geben, sondern es ist werden Sie sich dafür keine Mühe geben, sondern es ist etwas, bei dem Sie etwas bereits wissen, wo Sie es finden können. Was bedeutet das? Du wirst weitermachen, Figma öffnen und zu Design gehen Klicken Sie einfach auf Design und Sie öffnen eine normale klassische Designprojektdatei Also einfach so, wir haben einen kostenlosen Entwurf. Sie benötigen zumindest vorerst kein Pro-Abonnement oder ähnliches , um auf diese Funktion zuzugreifen, okay? Sie können also bereits darauf zugreifen, aber ich bin mir sicher, dass sie einige Dinge hinzufügen werden, die für Pro-Mitgliedschaften gesperrt sind , aber das ist ein anderes Thema für einen anderen Tag Jetzt, wo du hier bist, könntest du mir sagen, wo Figma Motion ist Es ist genau hier. Wenn du zu deiner Werkzeugleiste da unten gehst, wirst du dort navigieren. Sie werden nicht zum Zeichnen gehen, nicht in den Dev-Modus, Sie werden zu Figma Motion wechseln Wie ich bereits sagte, ist es immer noch in der Beta-Phase, also ist es immer noch auf dem Weg dorthin gibt es nur sehr wenige Möglichkeiten ehrlich zu sein, gibt es nur sehr wenige Möglichkeiten , sich darüber zu verwirren Bevor wir anfangen, musst du wissen, dass du etwas brauchst, woran du arbeiten Sie benötigen eine Datei, Sie benötigen ein Objekt, Sie benötigen eine Ebene, um loszulegen. Ich werde weitermachen und einen iPhone 16-Bildschirm hinzufügen , einfach so, Sie sehen, dass die Dinge angefangen haben zu funktionieren, nur um Ihnen den Unterschied zu zeigen. Als ich zurückging und weitermachte, war es hier leer und jetzt wurde es voll, was dir sagt, okay, da ist etwas los, etwas fängt an. Lass uns weitermachen und einen Artikel erstellen. Es könnte ein Text sein, es könnte ein Objekt sein. Ich werde einfach hier drüben ein Quadrat erstellen und ihm eine Farbe geben. Rot. Und dann hole ich mir das Texttool und schreibe Hello World. In Ordnung. Also, jetzt, wo wir das haben, werden wir es zentrieren. Ordnung. Perfekt. Jetzt haben wir diese Artikel, aber sie werden hier nicht angezeigt , oder? Das ist so schade. Nun, die Sache ist, um die Dinge einfacher zu machen, wird hier nicht alles angezeigt. Das ist nur für Dinge, die tatsächlich Bewegung haben, animiert sind. Dieser Bereich ist nur für Objektebenen reserviert , die bereits Animationen enthalten. Andernfalls werden Sie die Ebenen genau hier in diesem Bereich sehen , genau wie Sie es gewohnt sind. Damit hier etwas angezeigt wird, müssen wir zu diesem Bereich im Animationsbereich gehen, wie auch immer Sie ihn nennen möchten, der neu ist, und Sie werden eine Animation hinzufügen. Und das können Sie natürlich nur sehen , wenn Sie Figma Motion sind Stellen Sie also bitte sicher, dass Sie sich im Bewegungsmodus befinden. Also, jetzt, wo wir das hinzugefügt haben und ich werde noch nicht auf die Animation eingehen, aber sie hat uns schon eine Positionsanimation gegeben, okay? So etwas wie eine Folienanimation. Und jetzt haben wir plötzlich einen Gegenstand. Machen wir uns mit diesem Dashboard mit dieser Oberfläche vertraut, okay? Wir haben hier einen Artikel mit der Aufschrift T, es ist ein Symbol für Text, und wir haben Hello World. Wir können also diese Animation oder den gesamten Text entfernen, und Sie können sehen, dass dort Position steht. Das sagt dir also , welche Animationen dieser Text hat. Was ist nun, wenn wir uns entscheiden, eine andere Art von Animation hinzuzufügen? Also ging es jetzt weiter und fügte eine maßstabsgetreue Animation hinzu. Also wurde es kleiner. Jetzt kannst du unter Hello World sehen, dass wir dort zwei verschiedene Animationen eingefügt haben. Wir können sie schließen oder wir können sie öffnen und zeigen. Hier haben Sie Position, Sie haben Maßstab und jeder hat seinen eigenen, ich bin mir nicht sicher, wie Sie das genau nennen würden, aber es hat seinen eigenen Block, sagen wir, mit dem Sie herumspielen können. Da ist der allgemeine Block. Dieser Bereich, dieses Objekt, es bewegt alles mit sich. Wenn wir die Animationen sehr kurz machen, sowohl was die Position als auch den Maßstab angeht, wird sich das ändern. Aber wenn du bei einer davon die Position änderst, ändert das nichts an den anderen. Auf diese Weise wird sich die Position ändern, und dann wird sich die Größe immer noch ändern. Die Skalierungsanimation wird zur gleichen Zeit stattfinden und umgekehrt. Wir können es kleiner machen und den Standort weiter ändern. Das ist etwas Cooles daran. Sie haben keine sehr komplexe Oberfläche. Es ist etwas vereinfacht und wenn Sie mit all diesen, mehreren Animationen fertig sind , können Sie sie einfach entfernen und dann sehen Sie nur noch diesen einen Slot. Hier haben wir unsere Zeitleiste, diese ganze Sache, mit der wir herumgespielt haben, und sie zeigt dir die Uhrzeit. Hier haben Sie, glaube ich, 200 Millisekunden, 400 Millisekunden, 600, 800 und 1.000 600 Im Grunde können Sie auch mit dieser Funktion hier herauszoomen, Timeline-Zoom, Sie können es einfach verkleinern Sie können es mit dieser Funktion kleiner oder größer machen, oder Sie können einfach die Strg-Taste gedrückt halten und nach oben oder unten scrollen, und das erledigt es dann für Sie. Wenn Sie bereits Redakteur sind, kennen Sie sich wahrscheinlich damit aus, es ist nicht so anders. Wir haben auch diese Option zum Ausklappen der Timeline , mit der all diese Dinge direkt darunter in der Timeline entfernt werden. Wenn Sie sich hier also nur auf den Frame konzentrieren möchten und nicht viel Platz haben , dann tun Sie das. Aber wenn du auf die Details eingehen willst, dann willst du alles um dich herum sehen. Dann haben wir den Play-Button. Genau hier. Stattdessen können Sie auch einfach die Leertaste drücken. Das mache ich gerne. Genau hier haben wir einige Optionen, automatische Keyframes einzuschalten Darüber werden wir etwas später sprechen. Und hier haben wir die aktuelle Uhrzeit. Erkläre es ganz einfach. Es ist die Zeit, in der du dich gerade befindest, ob du bei einer Sekunde oder zwei Sekunden bist. Und hier hast du natürlich deine maximale Zeit, die Dauer der gesamten Animation, die du hast. Im Moment ist sie auf 2000 festgelegt. Wir können es 3.000 machen und die Einheit ist Millisekunden. Sie können das also entweder tun oder Sie können es von hier aus erweitern. Okay? Nun, das wird es zum Laufen bringen. Auch wenn es keine Animation gibt, läuft sie bis zum Ende. Ordnung. Dann haben wir natürlich die Loop-Option. ist standardmäßig aktiviert, aber Sie können sie entfernen, und wenn Sie sie einmal entfernt haben, wird sie nicht mehr wiederholt. Sobald es zu Ende ist, wird es einfach aufhören. Aber normalerweise möchten Sie, dass Ihre Animationen bei der Arbeit immer wieder wiederholt werden. Sie können sicherstellen, dass sie sehr gut aussehen Wir haben aber auch eine dritte Option, die Ping Pong genannt wird Das ist eine sehr interessante Option, aber sie dauert im Grunde bis zum Ende und nimmt es zurück und so weiter und so fort Es ist wie Tischtennis zu spielen, was sehr interessant ist Ich habe das in keinem anderen Programm gesehen, um ehrlich zu sein. Ich bin mir nicht sicher, ob es nur zum Spaß ist oder ob es tatsächlich einen Zweck erfüllt, aber ich kann mir vorstellen, dass es irgendwie helfen kann. Sie haben die Option Ebenen reduzieren. Wenn Sie mehrere Ebenen haben und sie alle geöffnet sind und alle mehrere Animationen haben, wäre es sehr nützlich, wenn Sie alle Ebenen zusammenklappen könnten. Das wird unser Freund sein. Für den Rest des Kurses unser Zeitplan. So werden wir das ganze Panel nennen. Denken Sie jedoch daran, dass dieser neue Animationsbereich auch sehr relevant ist , da wir dort unsere Animation hinzufügen werden. Nur um dies weiter zu veranschaulichen Wenn wir eine Animation für dieses Rechteck hinzufügen, werden wir hier die beiden Objekte sehen. Wie Sie sehen können, können Sie sie reduzieren, Sie können sie öffnen und jede Animation darunter anzeigen, oder wir haben beide geöffnet, wir können alle Ebenen zusammenklappen und wir können sicherstellen , dass sie so ausgerichtet werden, wie wir es oder wir haben beide geöffnet, wir können alle Ebenen zusammenklappen und wir können sicherstellen , dass sie so ausgerichtet wollen und wie wir es für geeignet halten. Nun, es gibt viel über dieses Tool zu lernen und zu entdecken, aber um ehrlich zu sein, anstatt Ihnen alles zu erzählen und Sie zu überwältigen, möchte ich, dass Sie diese Reise mit mir unternehmen und so lernen, wie wir es tun , denn das ist die absolut beste Art zu lernen. In den nächsten Lektionen werden wir mehr über Details sprechen und wir werden noch viel mehr tun und dadurch mehr lernen. Vielen Dank fürs Zuhören und wir sehen uns in der nächsten Lektion. 5. Entwerfen der Schnittstellenkomponenten
: Willkommen zurück. In dieser Lektion werden wir mit der Erstellung dieser Animationen beginnen und den ersten Schritt machen . Aber bevor wir beginnen und Animationen erstellen, müssen wir zuerst unsere Ebenen einrichten, unser Design und unsere Benutzeroberfläche einrichten. Und natürlich müssen wir unsere Animation sehr sauber und flüssig erstellen , damit sie, wenn wir eine Animation erstellen wollen, reibungslos und ohne Komplikationen funktioniert. Deshalb werden wir heute eine Toast-Benachrichtigung erstellen. Es mag andere Namen haben, aber es ist ein Banner und es wird dir die Benachrichtigung zeigen Ich habe dir schon ein Beispiel gezeigt , wie das aussieht, okay? Die Information, die wir damit vermitteln müssen, ist, dass es ein Bild geben wird , es wird einen Namen geben und einige Informationen, vielleicht eine Nachricht, über welche Art von Benachrichtigung ich unterwegs entscheiden werde. Lassen Sie uns weitermachen und mit der Erstellung beginnen. Wir werden damit beginnen, einen Rahmen zu erstellen , den ich hier bereits erstellt habe. Wir werden es vorerst füllen und dann werden wir ihm einige runde Ecken geben. Nun, ich bleibe nicht bei einem bestimmten Stil oder einer bestimmten Art von Design wie dem Design von Apple oder Android oder ähnlichem. Ich werde etwas Eigenes kreieren. Also behalte das im Hinterkopf. In Ordnung. Also, jetzt haben wir die abgerundeten Ecken, und dann werden wir ein Bild platzieren. Also mache ich daraus auch einen Rahmen und halte die Shift-Taste gedrückt. Ich werde es füllen, eine rötliche, nur für den Moment. Ich werde ihm auch abgerundete Ecken geben und versuchen, ihn perfekt zu platzieren, richtig? Da haben wir es. Und dann werde ich ein Textelement holen und dann etwas Text schreiben. Der Text sollte also etwas kleiner sein. Also lass uns vielleicht 16 machen. 14, und dann geben wir hier etwas ein. Also diese Sache könnte sein, ich meine, welche Art von Benachrichtigung bekommen wir eigentlich? Nehmen wir an, es ist eine Nachricht von jemandem, also heißt diese Person JACOB und sie schickt uns eine Nachricht. Okay? Eine Sache, die Sie auch wissen sollten ist, von welcher Art von App das gesendet wird? Was wir also tun könnten, ist, das auch aufzuschreiben. Wir könnten also nur den Namen aufschreiben , der zum Beispiel Wettap ist Und dann haben wir eine Nachricht von Jacob. Wir ändern die Farbe, machen sie gräulich und dann fangen wir an, den Inhalt der Nachricht einzugeben den Inhalt der Nachricht Da es also nicht genug Platz gibt, werden wir nur ein paar Punkte setzen. Da haben wir das. Lassen Sie uns versuchen , es zu testen und zu sehen, wie es auf einem echten Telefon aussieht. Ich werde ein Gerät auf 16 setzen, iPhone 16, da haben wir es. Ich kann mir vorstellen, dass wir es auch nach rechts und links erweitern können . Das wäre kein Problem. Lass uns weitermachen und es verlängern. Damit wir mehr schreiben können. Also dann haben wir ein gewisses Maß an Fertigstellung. Ich bin Punkt, Punkt, Punkt. Also hier haben wir eine nette kleine Struktur. Wir könnten damit herumspielen, es ein bisschen besser ausrichten und sehen, wie es aussehen könnte. Wir könnten auch andere Elemente wie dieses vergrößern. Aber ich finde es eigentlich völlig okay, wenn es so aussieht. In Ordnung. Und dann möchten wir vielleicht ein Bild von Jacob hier hinzufügen. Jede Art von Bild würde also für jede Art von Person geeignet sein. Also hier haben wir ein Bild, also werde ich es einfach aufnehmen. Ich werde es kopieren und hier einfügen. Das ist Jacob, er sendet es von seinem Handy aus. Er schickt uns eine Nachricht oder so. Er hat dieses sehr künstlerische, nette kleine Bild hier, kann ein bisschen gruselig aussehen, aber das ist richtig Dann gehen wir noch einen Schritt weiter zeigen vielleicht sogar, von wem diese Nachricht oder von welcher Plattform sie gesendet wird Wir haben bereits WhatsApp gesagt, aber vielleicht könnten wir das Symbol von WhatsApp hinzufügen. Wir könnten dieses Foto auch ein wenig vergrößern. Es liegt ganz bei uns. Aber du möchtest sicherstellen, dass die Entfernung von oben und unten gleich ist die Entfernung von oben und unten , oder? Alles klar? Also hier haben wir das Logo als Bild als PNG. Also werde ich es nehmen. Ich kürze es ein bisschen. Da haben wir's. Und ich werde es hier auf den Rahmen bringen. Um es kleiner zu machen. Ich werde es in diesen Frame einfügen, aber ich werde den Clip-Inhalt entfernen. Das wäre ein nettes kleines Arrangement bei dem wir es hier aufhängen, und dann können Sie sehen, dass direkt daneben WhatsApp steht . Es ist nett. Entweder das oder wir nehmen das Ganze, nehmen es hier raus und schreiben WhatsApp einfach so Vielleicht das Logo etwas kleiner machen. Wir könnten das auch komplett in diese Richtung nach rechts treiben. Das ist auch eine Möglichkeit, wie wir es tun könnten. Ich denke, auf diese Weise sparen wir viel mehr Platz, weil wir Dinge nicht auf eine Weise stapeln müssen und dann wäre dieser Bereich völlig leer. Im Moment spielen wir mit dem Layout herum und schauen, was funktioniert und was nicht. Wir müssen diese Dinge aufeinander abstimmen. Ich wähle diese aus und füge sie zusammen in ein automatisches Layout ein, und dann füge ich sie in ein automatisches Layout mit diesem ein, sodass sie auf derselben Ebene ausgerichtet sind. Ich füge sie dann in ein automatisches Layout mit diesem Textelement ein und stelle sicher, dass es sich nicht um Zufallswerte handelt, sondern dass sie auf der Skala Vier, Acht, 60 und so weiter ein automatisches Layout mit diesem Textelement ein und stelle sicher, dass es sich nicht um Zufallswerte handelt, liegen könnten Skala Vier, Acht, 60 und Hier haben Sie sie auf einem Auto, also ist der Abstand hier automatisch zwischen ihnen, und diese haben zwei oder es könnten Es liegt an uns. Aber ich mache zwei draus, zwei sind okay. Am Ende haben wir dann dieses ganze Layout. Wir haben diesen ganzen Rahmen. Wir können es auch zu einem automatischen Layout machen und dann haben wir das Bild. Wir haben das zusammen, und wir müssen es nur richtig ausrichten. Also werde ich es nach links ausrichten lassen und es vielleicht acht geben , und los geht's. Und einfach so haben wir eine nette kleine Benachrichtigung. Aber ich bin nicht besonders glücklich mit allem, was hier vor sich geht Lassen Sie mich den Abstand etwas anders gestalten. Und was Sie tun können, ist, ich meine, Sie können das Ganze etwas kleiner machen, und was wir tun können, lassen Sie uns damit herumspielen. Also, was den Abstand nach oben und unten angeht, werde ich daraus vier und vier machen. Nein 44, vier und vier. Okay? Und dann werde ich dafür sorgen, dass es das Seitenverhältnis festlegt, dass es den Container füllt. Und dann können wir im Grunde entscheiden, wie groß dieses Ding sein soll, und das Bild wird entsprechend skaliert Jetzt möchte ich noch einen Schritt weiter gehen und mich eingehender mit dem Design befassen Deshalb möchte ich hier die Opazität verringern, um hier einen schönen kleinen transparenten Effekt zu erzielen. Also das ist wirklich nett, und das ist etwas , was Apple oft macht, und viele Benutzeroberflächen heutzutage, viele Softwares tun, sie wollen sicherstellen, dass man einen Teil des Hintergrunds sehen kann, aber wir können ihn nicht vollständig transparent machen, einfach so, weißt du Und dann hat der Text einige Probleme in Bezug auf die Lesbarkeit Wir werden also bauen, wir werden keinen Shader hinzufügen, sondern einen Glaseffekt oder einen Hintergrundunschärfeeffekt Wir können hier einen Glaseffekt ausprobieren, auch wenn uns das Probleme bereiten könnte, wenn es darum geht, diese Animation zu erstellen und so weiter auch wenn uns das Probleme bereiten könnte, wenn es darum geht diese Animation zu erstellen und Im Moment sieht das ein bisschen glasig aus. Lass es uns testen. Wie Sie sehen können, ist das ziemlich glasig. Was wirklich nett ist. Und es ist immer noch bis zu einem gewissen Grad lesbar. Ich würde sagen, dass dieser Text hier entweder schwarz oder vollständig weiß sein muss, aber es macht auch keinen Sinn, ihn vollständig weiß zu machen, wenn der andere Text schwarz ist. Also werde ich ihn schwarz machen, aber ich werde ihm 50 oder 75% geben, was ein bisschen besser ist als das, was wir hatten, nicht perfekt, aber besser. Also gut, jetzt haben wir es. Du kannst auch herumspielen, ein paar Schatten hinzufügen, so einen Schatten fallen lassen. Mach 15 draus. Also tun wir einfach so , als wäre das eine Benachrichtigung, die jemand bekommen hat Nehmen wir an, es ist hier in der Mitte und wir schreiben die Uhr Das sind also nur ein paar Hintergrundinformationen, und dann haben wir hier unsere Benachrichtigung. Jetzt, wo wir das gebaut haben, können wir damit herumspielen und sicherstellen , dass es für uns geeignet ist, es zu animieren Jetzt haben wir etwas , mit dem wir arbeiten können, oder? 6. Ebenen für Animationen organisieren
: Ordnung, willkommen zurück. Jetzt , wo wir diese Ebenen haben, haben wir diese Ebenen erstellt, diese verschiedenen Designelemente, diese verschiedenen Designelemente, und wir haben ein nettes kleines Benachrichtigungs-Toast-Toast-Benachrichtigungs-Setup im Gange Es funktioniert. Es sieht gut aus. Aber es gibt eine Sache. Wenn wir das animieren wollen, könnten wir Probleme mit ein oder zwei Dingen haben Und ich würde sagen, das Problem liegt im Layout und der Organisation dieser Ebenen Um das besser zu veranschaulichen, habe ich hier zwei Versionen. Eine davon hat automatische Layouts, während die andere keine automatischen Layouts hat. Es wird im Grunde genommen einfach weggelassen , nur als normaler Rahmen ohne automatisches Layout. Ich hoffe, du kennst es. Falls Sie das nicht sind, können wir mit Autolayouts bestimmte Abstände wie Seitenränder und Innenabstände einrichten und Dinge einrichten und sie auf eine bestimmte Weise organisieren , sodass es schneller und automatischer funktioniert. Um zu verdeutlichen, was ich meine Wenn wir uns beide ansehen, sehen sie identisch aus Sie sind genau gleich oder fast genau. Aber es gibt einen Unterschied. Einer von ihnen hat automatisches Layout und einer von ihnen hat automatisches Layout. Wir können dies also testen, indem wir die Größe ändern. Und wie Sie bei diesem sehen können, die Dinge überall, wenn Sie die Größe ändern sind die Dinge überall, wenn Sie die Größe ändern. Sie sind nicht richtig eingerichtet. Natürlich können wir das schön und ordentlich einrichten, aber es kann ein bisschen schwierig sein, oder? Wie Sie sehen können, ist der Text auf eine bestimmte Weise umbrochen, und es kann viel schief gehen Wenn Sie das selbst versuchen, könnte es noch schlimmer sein. Während wir das mit diesem machen, sieht es etwas organisierter aus, oder? Wir können es sogar so einrichten, dass es ein bisschen anders ist. Es könnte sogar besser aussehen, wenn wir es so machen, zum Beispiel sieht es sehr glatt aus und es hat eine flüssige Animation. Während dieser Version braucht es etwas Arbeit. Insbesondere arbeiten wir hier mit Frames. Wenn du mit Gruppen arbeitest oder wenn du gar keine Gruppe hattest, du mit Objekten, Ebenen und so weiter arbeitest , wäre das viel schlimmer gewesen Der Schlüssel dabei ist, Ihre Ebenen richtig zu erstellen und zu organisieren, bevor Sie beginnen, damit Sie eine flüssige und schöne Animation haben, Sie nicht herumlaufen und rennen müssen, nur um sicherzugehen, dass sie perfekt ist. Okay? Der Weg, das zu tun, besteht also, wie gesagt, darin, automatische Layouts zu erstellen. Wie können Sie also Elemente, die nahe beieinander liegen, auf diese Weise zusammenfügen. Sie können die gewünschten Objekte mit der rechten Maustaste gedrückt halten und dann zur Rahmenauswahl wechseln oder Autoayout direkt hinzufügen Sie fügen direkt ein Autolayout hinzu, und dann fügen Sie hier ein Autolayout hinzu Und dann werden Sie das Ganze zum automatischen Layout machen, indem Sie hier klicken Und dann wird es ein bisschen komisch aussehen . Also wirst du es anpassen. Sie werden zum Beispiel acht schreiben, Sie werden rechts etwas mehr Abstand hinzufügen, und Sie können diese Füllung machen, wenn Sie möchten. Es liegt an dir. Es sieht immer noch ein bisschen problematisch aus, weil wir die Füllung hier hinzugefügt haben, wir können sie einfach umarmen Und dann, wie du siehst, sieht es viel besser aus, wenn du die Shift-Taste gedrückt hältst und die Größe änderst. Und das macht den gesamten Prozess im Grunde viel einfacher, wenn es um Animationen geht Sie haben Ihre gesamten Ebenen organisiert. Sie müssen sich keine Sorgen um sie machen. Und jetzt fangen wir mit Animate an. 7. Erstellen der ersten Animation: Willkommen zurück. In dieser Lektion werden wir unsere allererste Animation erstellen , und ich muss dir sagen, dass ich sie für dich spoilern muss. Das ist gar nicht so aufregend. Es ist nicht die schwierigste Sache der Welt. Und vor allem, wenn Sie mit Videobearbeitungsprogrammen vertraut sind , wird dies ein Spaziergang im Park sein . Lass uns anfangen. Wie machen wir das? Jetzt gibt es viele verschiedene Animationen und verschiedene Quellen, die wir untersuchen werden. Aber zuerst lernen wir uns zurecht. Jetzt wissen wir es bereits, um mit dem Animieren zu beginnen Wenn Sie hier nach etwas über Animationen suchen , werden Sie es nicht finden Der erste Schritt, den Sie tun werden, ist, in den Bewegungs- oder Bewegungsmodus zu wechseln . Sobald Sie darin sind, befinden Sie sich jetzt im Animationsworkflow oder Arbeitsbereich Jetzt bist du also hier. Du hast Dinge herausgefunden. Du gehst zum rechten Bereich und gehst zum Animationsbereich hier, dem Abschnitt. Sie haben also zwei Möglichkeiten. Sie können zu Animationen gehen. Das bietet Ihnen also eine Reihe von Animationen mit vielen verschiedenen Optionen. Wenn Sie mit PowerPoint oder einer anderen Art von Software zur Erstellung von Präsentationen vertraut sind , es hier auch eine ähnliche Registerkarte mit Animationen. Oder Sie können weitermachen und einfach auf das Plus klicken. Jetzt das Plus, lassen Sie uns zurückspulen. Du klickst auf das Plus. Es wird dir sofort eine Animation geben. Es wird wahrscheinlich eine Positionsanimation sein und es ist eine normale. Das ist der einfachste Weg , eine Animation zu erstellen. Aber wie gesagt, wie ich bereits erwähnt habe, können Sie dies alternativ tun indem Sie hier hingehen und eine Animation auswählen. Jetzt können Sie sich für die grundlegenden Optionen entscheiden . Du kannst sagen: Hey, ich möchte eine machen auf Position, Skalierung, Drehung, Größe und Deckkraft bezieht Drehung, Größe und Deckkraft Es gibt Burstgnit , das sind Voreinstellungen. So nennen wir sie, und sind im Grunde Animationen, die bereits dafür eingerichtet sind, dass sie Bewegungsarten, verschiedene Arten von Geschwindigkeiten und so weiter haben verschiedene Arten von Das ist eine sehr wichtige Sache, die du verstehen musst. Animation geht es nicht nur darum , von Punkt A nach Punkt B zu gehen. Wir könnten es auch so behandeln, aber an diesem Punkt wären wir keine guten Motion-Designer. An diesem Punkt sollten Sie genau das anstreben. Sie sollten versuchen, ein gutes Motion-Design auf die Beine zu stellen. das zu erreichen, müssen Sie verstehen, dass gute Animationen kaum mehr sind als nur Bewegungen, einfach von Punkt A nach Punkt B gehen. Aber es geht darum, wie Sie am Anfang von Punkt A zu einem berauschenden Gefühl kommen zu einem berauschenden Gefühl Entspannen Sie sich am Ende? Wirst du am Ende langsamer? Oder vielleicht machst du alles rückwärts. Du beschleunigst am Anfang sehr schnell und dann verlangsamst du in der Mitte, du genießt den Moment und dann beschleunigst du am Ende Du beendest es mit einem Knall. Es gibt viele Möglichkeiten, das zu tun. Vielleicht fängst du langsam an und gehst schnell und dann langsam und dann schnell und dann langsam. Es gibt viele verschiedene Möglichkeiten, dies zu tun, aber das Wichtigste ist, dass es eine Idee geben sollte , manchmal gibt es sogar einen Sprung. Das ist etwas, worüber du lernen wirst, wenn es um Animationen geht, es gibt einen Bounce, oder Es ist sehr üblich, dass, sagen wir, wenn die Animation läuft, diese kleine Benachrichtigung kommt und dann nach rechts und dann wieder zurückgeht, sie springt wie ein Ball Es trifft und kommt ein bisschen zurück. All diese Faktoren vermitteln einen Eindruck. Wenn Sie eine App mit niedlichen kleinen Charakteren erstellen , die nette kleine Bewegungen haben. Es ist sinnvoll, sie federnd zu gestalten. Hüpfen macht Spaß Andererseits sollte das Erstellen einer Animation, die sich hochwertig und elegant anfühlen sollte , langsamer sein. Genau darüber werden wir in der nächsten Lektion lernen Im Moment haben wir unsere erste Animation erstellt. In der nächsten Lektion werden wir die verschiedenen Arten von Animationen untersuchen. 8. Animieren von Position, Skalierung und Deckkraft: O Willkommen zurück. Also das Wichtigste zuerst In der letzten Lektion haben wir gelernt, wie man eine Animation erstellt, aber wir konnten sie nicht testen, oder? Lassen Sie uns also weitermachen und versuchen, es zu testen. Ich werde einfach auf Plus klicken. Ich werde mir die erste Animation holen und ich werde nichts daran ändern, okay? Wie wir bereits gelernt haben, können wir es testen, dieses kleine Timing-Ding durchgehen , und Sie klicken einfach auf die Leertaste und dann sehen Sie sich eine Vorschau an, wie es aussieht, und es wird einfach in einer Schleife laufen . Wie Sie sehen können, handelt es sich also um Bewegung. Es ist nichts Besonderes. Es ist nicht verrückt. Aber offensichtlich ist es nicht gut. Von hier aus geht es einfach weiter. Das ist also eine Art von Bewegung, und wenn wir auf die Details eingehen, wenn Sie darauf klicken, stehen Ihnen viele Optionen zur Verfügung. Lasst euch nicht überwältigen. Es ist nicht so kompliziert Die Art der Bewegung wird für uns als Slide-In ausgewählt . Das heißt, es handelt sich um eine Animation vom Typ „Eingang“. Das Objekt tritt in das Sichtfeld ein. Es könnte auch herausgeschoben werden. Es würde also dort beginnen, wo es ist, und dann würde es nach links gehen. Okay? Also das ist eine Sache, die wir einrichten können. Es kann auch benutzerdefiniert sein. Es könnte rauf, runter, rechts, links gehen, was auch immer wir wollen. Aber gehen wir zurück zur Folie, denn das ist es, was wir anstreben. Sie können wählen, von wo aus sie eingefügt werden soll. Ist es links, von rechts, von oben links? Aber bleiben wir bei links. Die Benachrichtigung kommt von links nach rechts. Hier, wo es interessant wird, können wir auch die Entfernung bestimmen. Wenn du mit der Maus hierher fährst, kannst du sie auch einfach ziehen und du kannst den Abstand vergrößern Also lass uns ein bisschen mehr machen, bis es außer Sichtweite ist. Und wie Sie sehen können, funktioniert es jetzt viel besser. Also ist es außer Sichtweite und dann kommt es ins Bild. Also gut, wir haben noch ein paar weitere Optionen , die wir etwas später untersuchen werden. Für den Moment ist das genug für uns. Das ist eine nette kleine Positionsanimation. Was haben wir sonst noch? Sobald wir auf Plus klicken, bekommen wir verschiedene Arten von Animationen wie Skalierung, oder? Die Skala wird also zunehmen oder abnehmen, mal sehen. Wenn wir es uns in der Vorschau ansehen, scheint es also kleiner zu werden Sie können also darauf klicken und sehen, was hier steht. Es heißt also, dass es skaliert, oder? Es kommt also in den Frame und dann skaliert es. Aber es scheint kleiner zu werden. Testen wir es also und machen wir es zu 200%. Also ja, das heißt, es waren 200%. Es kommt in den Frame und dann wird es zu 100%. Wir können es auch ändern und skalieren. Dann geht es von 100% und dann skaliert es auf 200%. Wir haben also so ziemlich die gleiche Logik, was Art und Menge angeht Und das ist wirklich nett , weil es Sinn macht. Sie können auch einfach auf diese vier Kreise klicken und wählen , welchen Sie möchten. Sie können es rotieren lassen. Mal sehen, wie das aussieht. Muss lustig sein. Perfekt. Also das alles, sie können momentan ein bisschen albern aussehen, aber sie sollten nicht so benutzt werden Du solltest bewusster über sie nachdenken. Und für jeden Animationstyp oder für jeden Szenentyp eines Anwendungsfalls sollten Sie eine andere Animation haben. Sie sollten also verstehen , dass die Rotation für diesen Anwendungsfall nicht wirklich funktioniert, für einen anderen jedoch vielleicht. Wir haben auch Seiten. Also, welche Größe hat es , verändert die Dinge. Größe funktioniert. Du könntest sagen: Hey, Maßstab und Größe sind dasselbe. Aber wenn es um Figma geht, ist es das nicht. Was es hier macht, ist, dass es nur den Rahmen selbst ausdehnt , oder? Also nehme ich es einfach mit und strecke es aus. Das ist es, was es tut. Was die Waage bewirkt, ist , dass sie sie auf eine andere Art ausdehnt. Es ist, als ob Sie auf K geklickt hätten. Gehen wir zurück zum normalen Editor und klicken Sie auf K. Was K macht, ermöglicht es Ihnen, zu skalieren Es öffnet sich ein Tool , mit dem Sie es skalieren und gleichzeitig die Skalierung aller Elemente beibehalten können. Alles würde genau auf die gleiche Weise skaliert werden, aber nur viel größer Aber wenn wir es mit der normalen machen würden, wenn du V drückst, hättest du die normale Maus und auf diese Weise kannst du sie skalieren, das Bild könnte größer werden, aber der Text würde nicht und es ist ungünstig platziert Das ist ein Unterschied. Kommen wir nun zurück zu den Animationen, es gibt noch viel mehr zu entdecken. Es gibt Undurchsichtigkeit. Und wie ich bereits erwähnt habe, gibt es all diese Voreinstellungen , die wir hier haben Lass uns weitermachen und eine davon ausprobieren. Ich verstecke die Position vorerst wo und lass uns platzen. Wie Sie sehen können, wurden durch das Hinzufügen von Burst mehrere Animationen hinzugefügt. genau zu sein, wurden vier hinzugefügt, und sie sind alle mit unterschiedlichen Geschwindigkeiten und Dingen und Grafiken voreingestellt Geschwindigkeiten und Dingen und Grafiken , die etwas verwirrend sein können. Ich habe Opazität, Drehung, Skalierung und Position hinzugefügt. Wie Sie sehen können, sind sie auch alle Zeiten unterschiedlich . Und es sieht einfach so aus. Das Schöne an diesen ist, dass sie Ihnen viel Zeit sparen, wenn Sie keine Zeit haben und einfach etwas Schnelles und etwas Fertiges wollen. Aber wenn du etwas mit deinen eigenen Händen machen willst, dann würde ich empfehlen, weiter zu lernen, und genau das werden wir und genau das werden wir in den nächsten Lektionen tun. Danke fürs Zuschauen Wir sehen uns in der nächsten Lektion. 9. Zeitplan, Dauer und Erleichterung: In Ordnung, also willkommen zurück. Also, jetzt, wo wir eine Animation eingestellt haben, richtig? Wir haben gelernt, wie man eine Animation erstellt. Wir haben gelernt, eine der Voreinstellungen zu verwenden oder mit verschiedenen Arten von Animationen herumzuspielen und diese Zeitleiste zu verwenden und zu navigieren und verstehen, wie sie funktioniert, oder? Wir haben das alles gemacht, aber jetzt ist es an der Zeit, über die Details zu sprechen Wenn Sie also auf Position gehen, richtig, wir haben darüber gesprochen, dass es mehrere Faktoren oder mehrere Variablen gibt , mit denen wir herumspielen können, wenn Sie dürfen. Bei einigen dieser Variablen handelt es sich um den Typ, also die Art der Bewegung, ob es sich nun um ein Hineinschieben oder ein Herausrutschen oder um eine benutzerdefinierte Bewegung handelt, dann haben wir die Richtung. Wir haben sowohl darüber als auch über die Entfernung gesprochen. Worüber wir nicht gesprochen haben, ist die Verzögerung, Dauer und Lockerung. Okay? Und es ist nicht so einfach, darüber zu sprechen. Nun ja, klar, Verzögerung ist einfach. Es bedeutet nur, um wie viel sich diese Art von Animation verzögern wird. Also können wir das umschalten. Es ist nicht so schwierig. Wie Sie sehen können, können wir es, Sie wissen schon, nach oben schieben und Sie können sehen, dass die Animation verzögert wird, oder? So einfach wie, du weißt schon, so einfach es klingt, es verzögert sich einfach, oder? Es ist nicht mehr und nicht weniger. Aber wir haben etwas, weißt du, wir haben etwas mehr. Wenn wir also dieses Element erneut auswählen und zur Animation gehen, gibt es auch die Dauer, was sich auch sehr einfach anhört, oder? Sie haben hier also 500 Millisekunden. Dann können wir das verdoppeln und tausend sagen und dann wird die Animation einfach langsamer wird die Animation einfach langsamer . Das ist keine Überraschung. Das ist auch sehr einfach. Wo es etwas kompliziert oder herausfordernd werden kann , ist die Lockerung. Zum Glück ist es jetzt mit anderen Programmen schwieriger Mit Figma wurde es für die Benutzer mit diesen Voreinstellungen vereinfacht oder für die Benutzer mit diesen Voreinstellungen vereinfacht Auch hier haben Sie diese verschiedenen Voreinstellungen. Ich denke, standardmäßig ist es als Easure Out eingestellt, aber es gibt viele verschiedene Typen Es gibt den linearen Typ, der die normale Art der Bewegung ist. Es ist eine Bewegung, die linear ist. Sie ändert sich nicht, sie beschleunigt nicht , sie bremst nicht ab Es ist einfach konstant, oder? Also, wenn es ein Auto gibt, das 10 Meilen pro Stunde, 10 Kilometer/Stunde fährt, es fährt einfach weiter mit exakt der gleichen Geschwindigkeit, oder ? 10 Kilometer/Stunde fährt, es fährt einfach weiter mit exakt der gleichen Geschwindigkeit, oder 10 Meilen pro Stunde, 10 Kilometer/Stunde fährt, es fährt einfach weiter mit exakt der gleichen Geschwindigkeit, oder ? Stell es dir wie ein Auto Wenn Sie sagen, entspannen Sie sich, was passiert, ist, dass dieses Auto mit der gleichen Geschwindigkeit , bei 10 Kilometern bleibt und dann am Ende startet, bei 10 Kilometern bleibt und dann am Ende langsamer wird, genau wie ein normales Auto, oder Du drückst nicht einfach plötzlich auf die Bremse, sondern du fängst an, langsamer zu werden, um abzubremsen, Das ist also genau das, was passiert. Es geht und dann lässt es nach. Es tut mir leid, das war lockerer. Wir haben uns entspannt. Da haben wir es. Also, wie Sie sehen können, ist es so , als ob es reingekommen ist und angefangen hat zu parken, einfach langsamer Okay? Wir haben verschiedene Typen. Es gibt Leichtigkeit rein und Entspannung raus. Leichtigkeit rein ist also am Anfang. Also, wenn du anfängst, fängt es an, das Auto fährt an. Es fängt langsam an und dann berauscht es, wird schneller. Und in diesem Fall lässt es nicht nach, aber wir Schauen wir uns also an, wie es aussieht. Also das sieht aus wie ein normales Auto. Es fängt langsam an und nimmt dann Fahrt auf, und dann endet es auch langsam. So funktioniert es normalerweise. Jetzt haben wir viele verschiedene Optionen, bei denen wir sogenannte Grenzen einführen Also machen Sie es sich zum Beispiel gemütlich. Also hier hast du ein gewisses Gleichgewicht. Also geht es rein und dann geht es etwas zu weit nach rechts und dann geht es zurück. Es ist eine Art Gleichgewicht, und genau das soll sein, weißt du, was passieren sollte. Sie haben auch viele verschiedene Voreinstellungen. Also mach weiter, du weißt schon, versuche sie zu erkunden, versuche zu verstehen, was am besten ist Und das Tolle daran ist, dass Sie diese benutzerdefinierten Optionen haben. Sie können also sagen, lassen Sie uns benutzerdefiniert machen, und dann können Sie es anpassen. Nun, ich würde dir nicht raten, gleich damit anzufangen, zu spielen, wenn du nicht damit vertraut bist weil das ein bisschen kompliziert sein kann. Aber wenn Sie möchten, wenn Sie es tatsächlich ausprobieren möchten , lassen Sie es mich ganz schnell erklären. Okay, Sie haben also zwei verschiedene Möglichkeiten. Sie haben eine Kurve und Sie haben eine Feder. Der Frühling hat mehr mit Sprüngen und so weiter zu tun. Okay? Also lass es uns mit dem Frühling testen. Sie haben diesen sehr schnellen Sprung. Sie können die Geschwindigkeit bestimmen, Sie können viele verschiedene Dinge tun Aber im Grunde genommen richten Sie dieselbe Animation auf unterschiedliche Weise ein. Also dieser hat auch einen Bounce, aber es ist eine andere Art von Bounce Mal sehen, wie es mit dem Frühling aussieht. Es sieht also aus wie eine Quelle, wie eine echte Quelle, die zurückspringt Sie haben also verschiedene Bewegungsarten. So wie du das machst, hast du diese Linie. Sobald es diese Linie überquert, wird es zu einem Sprung. Wenn wir es also unter dieser Linie belassen, gibt es einen sehr, sehr leichten Sprung, wie Sie sehen können, sehr geringfügig, und das liegt daran, dass wir ihn nicht sehen können Wenn wir also versuchen, es zu verringern, ist das so viel, wie wir es verringern können. Es hat also Null. Hat fast keine Grenzen, okay? Das ist also quasi wie ein Frühling. Wie gesagt, das mit dem Bounce muss man sich überlegen. Der Bounce ist drin, und du kannst zum Beispiel unendlich viele Bounces wie diesen erzeugen, was verrückt ist, aber du kannst es hier grafisch sehen Es ist also wie eine Quelle. Sie können also entscheiden, wie viele Bounces es nach rechts und links haben wird, indem Sie diesen Betrag erhöhen Und wenn du einmal einen hast, ist das verrückt. Gehen wir jetzt ein bisschen zurück zur Kurve. Kurve ist, wenn es ausgefallener wird. Du kannst immer noch einen Sprung machen, aber es wird ein bisschen schicker Also, wie Sie sehen können, haben wir jetzt einen Sprung. Es dreht sich alles um diese beiden wie diese Kurve, richtig? Und Sie haben hier zwei Möglichkeiten, zwei Kurven. Und sie entscheiden viele Dinge, wie Sie sehen können. Wie gesagt, die Kurve geht über die Linie, es wird ein Sprung sein. Versuchen wir also, das wegzulegen. Leg das zum Beispiel so hin , los geht's. Jetzt sollten wir also keine Grenzen haben, aber wie Sie sehen können, ist es eher linear, und das liegt daran, dass es wie eine gerade Linie aussieht, oder Also, wie wäre es, wenn wir es uns gleich etwas leichter machen, okay? Also, Lockerung bedeutet, das ist die Geschwindigkeit, mit der es zunehmen wird Damit es langsam an Fahrt aufnehmen kann. So machen wir es lockerer, okay? So und dann nimmt es Fahrt auf. Also lass uns sehen. Da haben wir's. Und dann nahm es sehr schnell Fahrt auf. Jetzt können wir das Gegenteil machen. Wir können es überstürzen lassen, indem wir das Gegenteil tun. Siehst du das? Dann dasselbe hier, wenn wir wollen, dass es nachlässt, müssen wir es so ausdrücken. Wenn wir also wollen, dass es nachlässt, schauen wir uns an, wie es aussieht. Also, wie Sie sehen können, hat es sich sehr schnell entwickelt. Es hat nicht nachgelassen, aber es hat stark nachgelassen. Lassen Sie uns jetzt das Gegenteil tun. Was jetzt passieren wird, ist, dass es sehr schnell einzieht und dann in der Mitte langsamer wird und dann bis zum Ende an Fahrt gewinnt. Also, wie Sie sehen können, sehr schnell und dann langsam und dann schnell. Und dann endete die Animation sehr schnell. Ich meine, wenn wir es so einrichten, dass es nicht wiederholt wird, dann sieht es so aus. Aber hier ist es ein bisschen zu schnell. Also lass es uns so machen. Das ist es. Damit wir das Gegenteil tun können. Wir können es schaffen, wenn wir es so machen und das hier so. Dann haben wir eher ein Gefühl von Leichtigkeit. Also wie du siehst, ist es nicht so steil und in der Mitte wird es richtig steil, richtig schnell und dann langsamer. Okay. Siehst du also. Und einfach so ging es weiter. Weißt du, ich habe nachgelassen und es hat nachgelassen. Leg das alles zur Seite und frag dich, wofür ist das? Warum mache ich das? Was ist der Zweck davon? Und lass mich dir die Antwort sagen. Die Antwort liegt im Grunde in der Wirkung, die Sie zu erwecken versuchen, dem Eindruck. Versuchen Sie, einen eleganten, sanften Eindruck zu erwecken? Dann würde ich Ihnen empfehlen, diese Entspannungsanimationen zu verwenden weil Sie zeigen möchten, dass die Dinge elegant sind, dass die Dinge gruselig sind. Es gibt viel Innovation, Geschwindigkeit und Action, aber es gibt auch eine Verlangsamung Wissen Sie, und das verleiht jeder Marke, welcher Bewegung Sie auch immer Ausdruck verleihen möchten , eine gewisse Eleganz Bewegung Sie auch immer Ausdruck verleihen möchten , eine gewisse Und wenn du dich dann für den Frühling entscheidest, sich der Frühling eher lustig und fühlt sich der Frühling eher lustig und karikaturhaft an Es ist nicht wirklich so schlimm, aber es sagt dir irgendwie: Hey, wir haben alle Spaß Es muss nicht so glatt und schön und sanft sein, sondern es kann federnd sein. Es kann Spaß machen Stellen Sie sich das wie Animationsfiguren vor, Zeichentrickfilme, sie springen und hüpfen überall hin und das ist genau das, was Sie tun Sie haben hüpfende Animationen. Ich finde es wirklich cool, wenn es auf die richtige Art eingerichtet ist , für den richtigen Kunden oder für die richtige, du weißt schon, Identität Sie mussten sich also fragen, welche Art von Marke oder welche Art von Website oder App Sie erstellen? Sollen die Animationen lustig, karikaturhaft und freundlich aussehen oder sollten sie sanfter und eleganter und, du weißt schon, von hoher Also musst du irgendwie darüber nachdenken. Und natürlich hat jede Person ihren eigenen Stil. Manche Leute entspannen sich, entspannen sich, manche Leute entspannen sich einfach. Also machen die Leute viele verschiedene Dinge. Denken Sie also darüber nach, Ihren eigenen Stil zu kreieren oder einen bestimmten Stil für die Marke zu entwickeln, an der Sie gerade arbeiten. Und wenn es bereits Stop-Motions und Videos und Animationen gibt , die sich auf die Marke beziehen, dann können Sie vielleicht versuchen, den Stil von dort aus zu finden und einfach den gleichen Stil fortzusetzen Erklären Sie also ganz einfach, wie Sie die Bewegung bei der Dauer, der Lockerung und der Verzögerung Ihrer Animationen ändern können die Bewegung bei der Dauer, der Lockerung und der Verzögerung Ihrer Animationen ändern , um einen bestimmten Eindruck und eine bestimmte Wirkung zu vermitteln Vielen Dank fürs Zuhören Wir sehen uns in der nächsten Lektion 10. Sequenzierung mehrerer Elemente: Bisher haben wir diese kleine Animation, die wir hier erstellt haben. Und wir haben zuvor über das Erleichtern von Einstellungen und so weiter gesprochen über das Erleichtern von Einstellungen und so weiter Lektion werden wir versuchen, nicht viel dagegen zu tun In dieser Lektion werden wir mehr über mehrere Animationen innerhalb einer Szene sprechen . Das ist etwas, was Sie tun werden und sollten, weil eine Animation großartig ist. Zwei Animationen, noch besser. Zehn Animationen. Oder vielleicht zu viel. Wenn Sie es richtig machen, können Sie diese Animationen multiplizieren. Sie können sie übereinander legen und sie so überlagern, dass sie glatt aussehen, funktionieren und sich professionell anfühlen. Das ist also genau das , was wir tun. Und wenn Sie an irgendein Betriebssystem denken, jede Art von Betriebssystem, mit dem Sie arbeiten, werden Sie feststellen, dass sie oft diese mehrschichtigen Animationen haben. Es ist nicht nur eine Benachrichtigung , die kommt und klingelt, sondern sie ist vielschichtiger. Im Hintergrund passieren mehrere Dinge. Okay. Also werde ich versuchen, es Schritt für Schritt zu demonstrieren und mit Ihnen gemeinsam zu machen. Jetzt haben wir also diese Positionsanimation. Sie sieht toll aus. Lassen Sie uns weitermachen und eine weitere Animation hinzufügen. Also klicke ich einfach auf die Plus-Schaltfläche und es wird mir eine maßstabsgetreue Animation angezeigt, was nicht wirklich ist es sieht nicht so aus, wie ich es machen möchte. Skalieren Sie also um 120%. Anstatt zu skalieren, werde ich weitermachen und schauen, was Größe für mich tun kann Okay? Jetzt arbeiten wir mit der Größe, und Sie können sehen, wie die Größe geändert wird Es hat also die normale Größe und wird dann größer. Wir wollen das Gegenteil tun. Also werden wir die Größe verkleinern. Also werden wir eine andere Größe haben. Sie wird sich an das anpassen, was wir gerade haben. Ich weiß, das ist ein bisschen schwer zu verstehen, und ich denke, sie sollten das vielleicht irgendwie umformulieren Denk jetzt nicht zu viel darüber nach. Jetzt, wo wir das haben, werde ich, anstatt die Größe zu verkleinern, Benutzerdefiniert machen Denn wenn Sie „Benutzerdefiniert“ verwenden, können Sie wählen, ob Sie sowohl X als auch Y verwenden möchten, oder ob Sie Breite und Höhe angeben möchten Es bietet Ihnen diese Optionen Ordnung, was wir tun werden, ist Zugriff zu wählen und zu X zu gehen. Das wird nur die Breite für uns ändern, was wir wollen. Dann kommen wir hierher und sagen, dass die Breite vorher zehn sein wird und das Ende 100 sein wird. Jetzt wollen wir sehen, wie es aussieht. Nicht gerade das, was wir wollen. Also lass es uns an den Anfang oder hier in die Mitte setzen. Und ich werde die Breite am Anfang so anpassen , dass sie negativ ist, okay? Und das liegt daran, dass ich denke, dass Null vielleicht die Größe ist , mit der man anfängt Also musst du es viel kleiner als Null machen, okay? Also kommen wir jetzt her. Ups, hier ist die Animation zur Größenbestimmung. Deshalb wurde nicht viel angezeigt. Also bringen wir die Größe der Animation mit. Wir werden es hier hinstellen. Wir werden es verlängern. Jetzt können wir es überprüfen. Sie sehen können, öffnet es sich. Es geht weit über das hinaus, was wir wollen. Also werden wir die Breite auf Null setzen. Wie ich bereits erwähnt habe, ist Null an dem Punkt dem das bereits die Breite ist. Dort war es also. Also wird es von minus 244 auf Null gehen. Okay? Jetzt verschiebe ich die Animation ein wenig, weil ich möchte, dass sie etwas spät anfängt, und ich werde hier die Gesamtdauer der gesamten Animation verlängern . Ich möchte also sehen, wie es sich von diesem einen Kreis aus erstreckt. Also werde ich es vielleicht hierher bringen oder hierher. Okay. Und ich werde es am Anfang noch kleiner machen. Okay. Ich zoome ein bisschen rein. Ich mache also minus drei, eins, acht. Ich finde das gut. Nicht perfekt, aber gut. Es wird hier beginnen und dann wird es sich öffnen. Aber wie Sie sehen können, ist es ein bisschen komisch, denn hier anzukommen und hier anzuhalten und dann öffnet es sich Was wir lieber wollen, ist , dass es in der Mitte ankommt , okay Und dann öffnet es sich. Und wie können wir das erreichen? Das ist eine sehr gute Frage. Das ist nicht einfach, aber wir werden versuchen, es herauszufinden. Ich stelle mir also vor, dass es, bis hier ankommt, es hier ankommt, in der Mitte ankommen sollte. Also lass uns genau das machen, okay? Also sollte dieser Rahmen in der Mitte sein. Also werde ich auf den Rahmen klicken. Ich gehe zum Editor. Wir werden herkommen. Und wir werden versuchen, es zu zentrieren. Okay? Wir werden es hier in der Mitte platzieren, aber nicht in diesem Moment, sondern in diesem Moment. Okay? Ich sehe, dass etwas schief läuft. Geh und passe das ein bisschen an. Also werde ich das mitnehmen, das auswählen und in die Mitte bringen, okay? Also jetzt ist hier, was passieren wird. Es wird in der Mitte kommen und dann wird es sich öffnen. Und bis jetzt, wenn die Animation hier zu Ende geht und sie anfängt, sich zu öffnen, werde ich das machen. Sobald sie endet, beginnt die Größenanimation. Und sobald es anfängt, sich zu öffnen , wird es so sein, als würde eine Animation geben, bei der es die Position ändert. Und wie machen wir das? Ganz einfach, wir klicken einfach und klicken hier auf Position. Also werden wir eine weitere Position hinzufügen. Und wir werden es benutzerdefiniert machen, weil wir nur eine benutzerdefinierte Animation machen wollen. Also fängt es bei Null an und dann geht es einfach nach links, also minus 92. Also lass uns sehen, ob das klappen wird. Wir werden hier bis hierher schichten. Lass uns jetzt sehen. Wie Sie sehen können, ist das genau das, was wir wollen, aber nicht die richtige Zahl. Versuchen wir also, es zum Laufen zu bringen. Und das ist nur annähernd. Da haben wir's. Also lass uns sehen. Ordnung. Das ist wirklich nettes Zeug. Das ist immer noch nicht perfekt und es gibt noch einiges zu tun. Aber ich denke, wir machen bereits große Fortschritte. Was wir also immer noch tun können, wir können, weißt du, die Animationen wechseln , sodass wir es uns gut gehen lassen können. Sie können es, wissen Sie, individueller machen und Sie können die Lockerung erhöhen, wenn Sie möchten Und das Gleiche gilt für die Größe, sodass Sie es individuell anpassen können Und wenn du willst, kannst du es auch ein bisschen aufprallen lassen . Mal sehen, wie es aussieht Um ehrlich zu sein, ist es nicht das beste Reittier. Also lass es uns einfach normal machen. Ich würde sagen, es ist ein bisschen zu langsam, also werde ich es schneller machen. Was noch cooler ist, ist, was ist, wenn wir es mit diesem überschneiden? Das ist genau der Punkt, an dem du anfangen könntest zu gewinnen. Es ist also nicht perfekt, aber es wird vielschichtiger. Es passiert zur gleichen Zeit. Es passiert nicht eins nach dem anderen, sondern alles passiert auf einmal. Aber im Moment, wenn wir so etwas machen, funktioniert es nicht sehr gut. Nehmen wir es zurück und schauen wir, was wir damit machen können. Wir können anfangen, die Größe zu ändern, wir können anfangen, Dinge zu verschiedenen Zeiten zu ändern. Es liegt an dir, aber es sollte richtig aussehen. Wie Sie sehen können, sieht das komisch aus. Also versuche sicherzustellen , dass es gut läuft. Also ja, jetzt haben wir eine nette kleine mehrschichtige Animation. Es spielen mehrere Faktoren eine Rolle. Wir können noch einen Schritt weiter gehen und den einzelnen darin enthaltenen Elementen befassen, wie zum Beispiel diesen Texten. Was wir für sie tun können, ist, dass wir zum Beispiel einen Opazitätseffekt hinzufügen können zum Beispiel einen Opazitätseffekt Also müssten wir es einfach richtig ausrichten und es würde von null zu etwas mehr Opazität übergehen , aber wie gesagt, man muss es nur richtig ausrichten Das sieht also viel glatter aus, als ob der Text verblasst, und es ist Sie können auch, wissen Sie, eine Menge Dinge in dieser Animation ändern, eine Menge Dinge in dieser Animation ändern nur um sie natürlicher aussehen zu lassen, indem Sie sie, wie gesagt, überlagern Je mehr man hineinsteckt, desto raffinierter sieht es aus Und am Ende des Tages streben wir natürlich nach Einfachheit. Wir streben nach Minimalismus und viel Design. Aber wir können diesen einfachen, sauberen Look nur erreichen, wenn wir viele komplizierte Dinge im Hintergrund tun viele komplizierte Dinge im Hintergrund Also, probieren Sie es selbst aus und sehen Sie, was Sie sich aus der Art von mehrschichtigen Animationen einfallen lassen können. Versuche so viele wie möglich zu machen. Vor allem aber stellen Sie sicher, dass es normal aussieht. Es sieht harmonisiert aus, als ob diese Animationen zusammenarbeiten würden Vielen Dank fürs Zuhören Wir sehen uns in der nächsten Lektion 11. Organisieren der Zeitleiste: Hallo und willkommen zurück. In dieser Lektion werden wir über die Organisation Ihres Zeitplans sprechen . Ich meine damit nicht nur die Organisation Ihres Zeitplans, sondern auch die Sicherstellung , dass die Dauer die Animationen zeitlich abgestimmt sind Das ist es, worum es bei der Timeline wirklich geht. Es geht darum, das Timing deiner Animationen sicherzustellen und sicherzustellen, dass sie synchronisiert so harmonisiert sind, dass sich natürlich und glatt anfühlen und all die guten Dinge Jetzt, in den letzten Lektionen, haben wir diese nette kleine Animation erstellt Und wie Sie sehen können, haben wir ein bisschen mit den Animationen gespielt . Okay? Wir haben mit der Dauer der Animationen und dem Typ gespielt der Animationen und dem Typ Und eine Sache, die man beachten sollte, ist, dass die Frames auf diese Weise organisiert sind Es ist ein sehr einfacher, intuitiver Weg auf der linken Seite. Im Grunde haben Sie also den Rahmen, an dem Sie gerade arbeiten. Also Bild eins zum Beispiel, und dann haben Sie alle Arten von Animationen, die damit verknüpft sind. Und Sie können die maximale Dauer sehen. Sie können also sehen, wie lange sich dieses Element, dieser Rahmen, innerhalb bewegt oder verändert. Und dann können Sie sehen, wie sich die Positionsanimation von diesem Zeitpunkt bis hierher bewegt, und dann haben Sie die Größenanimation zur gleichen Zeit wie eine andere Positionsanimation. Das Gleiche gilt für Bild fünf, aber Bild fünf enthält nur eine Opazitätsanimation Wie Sie sehen können, werden, wenn wir die Animation von Bild fünf ändern, alle anderen Animationen mitgezogen Und das Gleiche hier wird nur dazu führen, dass alle anderen Animationen damit erweitert werden. Bisher ist das klar. Wir verstehen, wie diese funktionieren. Lassen Sie uns weitermachen und versuchen, ein bisschen mehr damit herumzuspielen. Lassen Sie uns lernen, gleichzeitige Animationen sowie Animationen erstellen, die nacheinander ablaufen. Lassen Sie uns im Grunde mit der Zeitleiste herumspielen. Was die gleichzeitigen Animationen angeht, so sind diese quasi gleichzeitig Lassen Sie uns also über das Erstellen einer Animation sprechen , die dann, Sie wissen schon, die Szene erweitert Also, wenn du herkommst, bekommst du eine Nachricht, richtig? Was wirklich nett ist. Sieht toll aus. Nun, was passiert, nachdem du diese Nachricht erhalten hast, richtig? Also ich denke, eine andere Animation, die dazu passen könnte, ist, dass sie vielleicht aus dem Weg geräumt wurde. Vielleicht geht der Benutzer nach links durch. Okay? Also anstatt rein zu rutschen, mache ich eine Rutsche raus und ich werde sie ganz nach links nehmen. Im Moment macht es also keine Bewegungen, und das liegt daran, dass sich die Animation wohl außerhalb der Timeline befindet. Also werde ich den Zeitplan hier verlängern. Also gut. Jetzt können wir die Animation sehen und ich kann damit herumspielen. Also die Entfernung, lassen Sie uns die Entfernung vergrößern damit sie verschwindet, und los geht's. Wie wir gelernt haben, werden wir wieder weitermachen, zu der Position gehen und versuchen, sie interessanter zu gestalten. Mal sehen, was wir mit Bouncy machen können. Dieser Sprung ist nicht sehr federnd , so wie wir es uns wünschen Ich mache einfach Loase Out und dann mache ich Custom Dann werde ich es anpassen. Nun, was interessant ist, ich möchte, dass es am Anfang springt Ich möchte, dass die Person es nach rechts nimmt und dann geht es nach links Mal sehen, wie das aussieht. Siehst du das? Es ging ein bisschen nach rechts, ich bin am Anfang gesprungen und dann gegangen Und das verleiht ihm ein bisschen Charakter und Identität Ich meine, wenn du den Bildschirm berührst, berührst du vielleicht diese Benachrichtigung und dann nimmst du sie versehentlich ein bisschen nach rechts und dann bringst du sie dorthin, wo du sie hinbringen willst, nämlich links. Und einfach so haben wir der Timeline eine andere Animation hinzugefügt . Wir können weitermachen und die Zeitleiste erweitern und eine weitere Animation erstellen. Damit wir das tun können, können wir in den Designmodus wechseln. Das nehme ich. Ich werde es hierher bringen und ich werde es, du weißt schon, zentrieren. Und ich werde schreiben Okay. Jetzt haben wir das und lassen es uns zentriert halten. Dann gehe ich zurück zur Animation in den Bewegungsmodus und entferne die anderen Animationen , die diese enthält. Wie Sie sehen können, hat es alle Animationen kopiert, die es hatte. Ich werde sie alle löschen und ich werde meine eigenen erstellen und ich werde es sein lassen, mal sehen, was wir hier haben. Magnify klingt interessant. Das sieht echt cool Aber ich möchte, dass es ein bisschen kürzer ist. Lass uns sehen. Aber wir können weitermachen und hierher zurückkehren, ich werde sie auf das gleiche Niveau bringen. Dann werde ich es kopieren und hier ablegen. Jetzt wird es auch die gleiche Animation haben. Ich werde es hier hinzufügen und mal sehen, wie es aussieht. Und was noch cooler wäre, ich werde das hier rüberbringen . Ich werde herkommen und das noch einmal animieren. Ich werde diesem Bild eine weitere Animation geben, und das wird genau hier sein. Wir werden ihm eine Positionsanimation geben. Anstatt rein und raus zu rutschen, wollte ich einfach mit dem Y fahren, also fängt es bei Null an und dann geht es bei 100. Wir wollen also nicht nach unten gehen, sondern im Gegenteil, wir wollen minus 100, sagen wir, das ist zu viel. Aber ich denke, Sie wissen, wohin ich damit will, ich werde es noch einmal anklicken. Lass uns 2030 machen. Das ist ziemlich gut, aber der Zeitpunkt ist nicht perfekt. Und ich denke, wir müssen das auf der obersten Ebene haben. Und jetzt werde ich wieder meinen Antrag vortäuschen. Manchmal wird die Zeitleiste nicht angezeigt und Sie müssen nur auf ein beliebiges Objekt klicken. Das sieht jetzt viel schöner aus. Wir können es noch perfekter machen, indem wir zu der Position kommen und ein bisschen damit herumspielen Beispiel wie dieses. Und Sie können sehen, wie schön diese Animation ist, die winzigen kleinen Frames, wir können sie untersuchen. Jetzt möchte ich Sie natürlich nur wissen lassen, Sie können die Benachrichtigung hier sehen. Es ist eine andere Animation als das, was hier passiert. Aber das ist mit Absicht. Ich wollte, dass es anders aussieht. Aber wenn Sie so etwas entwerfen, sollten die Benachrichtigungen natürlich sollten die Benachrichtigungen einheitlicher sein. Aber mal sehen, wie es jetzt aussieht. Okay. Sieht echt nett aus. Aber lass mich dem etwas Zeit geben. Ich habe das Gefühl, dass die Nachricht etwas zu schnell auftaucht Ich komme her und verlege die Position hierher und ich verlege die hier her. Okay. Ja, das sieht ziemlich gut aus. Ja, da hast du es. Hey, Mann, wie geht's dir? Dann wird er gelöscht und dann sagt er, traust du dich nicht, meine Nachricht zu löschen? Ich verstehe, was du tust. Sehen wir es uns noch einmal an. Perfekt. Und das ist im Grunde die Art und Weise , wie Sie arbeiten sollten. Ihr solltet eure Timeline als Spielplatz betrachten. Mach weiter und erstelle verschiedene Animationen zu unterschiedlichen Zeiten. Mach dir keine Sorgen, dass du Chaos anrichtest. Achte nur darauf, dass du Spaß hast. Und, weißt du, am Ende des Tages kannst du dafür sorgen, dass deine Timeline besser organisiert aussieht, ich weiß nicht. Wenn Sie einfach zusammenklappen, anstatt sie alle zusammenklappen zu lassen, können Sie sie wieder einblenden, und dann können Sie jeden Frame sehen. Jetzt sehen wir also nur die Frames. Wir sehen nicht all die verschiedenen Animationen , die diese Frames haben, und dann können wir sie verschieben. Wir können viel einfacher mit ihnen spielen. Danke fürs Zuhören Wir sehen uns in der nächsten Lektion. 12. Animationen mit Schleifen: Willkommen! Nochmals, in diesem Kurs werden wir Animationen erstellen, die sich wiederholen. Animationen zu erstellen, die sich wiederholen, ist nicht so schwer, aber es ist eine subtile Kunst, bei der nicht jeder die Bedeutung dahinter versteht und die jeder nahtlos ausführen kann. In dieser Lektion erkläre ich dir, wie du das erreichen kannst und was nützt es wirklich? Und natürlich gibt es verschiedene Anwendungen und Anwendungsfälle für diese Art von Animation. Es ist also unterschiedlich. Ich kann dir nicht einen Überblick über alles geben. Aber ein klares Beispiel, das ich dir geben könnte, sind, du weißt schon, die Reels oder TikToks oder was auch immer Kurzform-Inhalte, die du dir ansiehst, in denen sich Videos wiederholen Sie wiederholen sich. Und in Wirklichkeit laufen alle Videos in den sozialen Medien. Zu diesem Zeitpunkt weißt du, abgesehen von YouTube, Instagram, Tik Tok anderen Social-Media-Plattformen, dass ein Video, wenn es endet, wieder zurückgeht und wiederholt wird. Aber worüber wir sprechen, ist, deinem Video ein nahtloses Aussehen zu verleihen , bei dem es nicht so aussieht, als würde es sich wiederholen. Es fühlt sich an, als würde es immer wieder weitergehen, wenn Sie nicht aufpassen Es lässt das Ende also im Grunde wie den Anfang erscheinen. Also lass mich erklären , was ich dir meine. Also jetzt, in dieser Animation die wir so weit zusammen gebaut haben, können wir einen sehr harten Schnitt erkennen, oder? Lassen Sie uns das Looping von hier aus einschalten, und Sie wissen schon, jetzt ist es im Loop-Modus Wenn wir also diese Animation abspielen, werden Sie sehen, dass Dinge passieren, und dann gibt es einen Hardcut Der Hardcut passiert genau hier, wie Sie sehen können. Sobald du hier angekommen bist, verschwinden die Dinge plötzlich und plötzlich Es gibt einen sehr einfachen Weg, das loszuwerden, es zu reparieren So wie das geht, können wir die Zeitleiste ein wenig verlängern , und wir werden diese beiden Elemente auswählen und ihnen eine Animation geben. Gehen wir zurück. Wir wollen keine Rotationsanimation. Wir wollen eine Positionsanimation. Wir werden dafür sorgen, dass es herausrutscht, und wir werden es weit nach links bewegen. Lassen Sie uns noch einmal beide auswählen. Lassen Sie uns sie öffnen. Dieser und dieser. Ich werde diese Animation und diese und/oder die Entfernung so wählen , dass sie nicht im Bild sind. Sie können es auch anpassen , wenn Sie möchten, es liegt ganz bei Ihnen. Ordnung. Nun, was wir haben , ist diese Animation, die wir am Ende, diese beiden, die gehen , ein wenig anpassen können, sodass zum Beispiel einer von ihnen nach dem anderen so geht . Wir können sie ein wenig verlängern , weil sie möglicherweise etwas zu kurz sind. Wir können ihnen auch ein bisschen geben wir können ihnen auch eine Erleichterung geben. Okay. Jetzt schau, was wir jetzt haben. Okay? Also, du bekommst diese Animation, du bekommst diese Nachricht, du löschst sie, du bekommst diese Nachrichten, du löschst sie und dann wiederholt sie sich, aber du hast nicht das Gefühl, dass sie wiederholt wird. Das ganze Geheimnis liegt in der Tatsache, dass Sie das allerletzte Bild hier genauso aussehen lassen wie das erste Bild. Die Art und Weise, wie wir das gemacht haben, ist sehr einfach. Wir haben einfach alle Rahmen, alle Elemente, die sich ändernden Elemente verschwinden lassen. Jetzt gibt es nichts mehr, und dann kommen wir zurück zum Anfang, wir bekommen diese Nachricht, wir löschen sie, wir bekommen diese Nachrichten, wir löschen sie und dann sind wir wieder da. Das ist wirklich das Geheimnis. Ich meine, es ist wirklich egal , was du hier in der Mitte machst. All dies ist irrelevant, solange Sie am Ende, genau am Ende, sicherstellen, dass die letzten Frames mit den ersten Frames identisch sind. Viele tun das, wenn Sie ein Video haben, wenn Sie ein echtes Video machen, keine animierte Grafik, der Weg, dies zu tun, besteht darin, das Video herunterzuladen, den Anfang des Videos hier einzufügen und dann die Fortsetzung am Anfang. Auf diese Weise beginnt das Video hier, und wenn Sie dann zum Ende kommen, wird es sehr nahtlos wiederholt. Okay? Aber das ist so, als ob du ein Video hast. Aber in diesem Fall haben wir es bei Fegma nicht mit einem Video zu tun, wir haben es mit einer bewegten Grafik zu tun Okay? Also ist es egal, welche Farben du hast, welche Animationen du hier hast, solange du am Ende hier den gleichen Rahmen hast. Also illustriere das einfach ein bisschen mehr , wenn wir hierher kommen und wir diesen Hintergrund haben, ich wähle den Hintergrund aus. Jetzt können wir dem eine Animation der Opazität geben, oder? So können wir es ausblenden lassen. Also, wie passiert das? Wir werden es ausblenden lassen und wir werden es gleich hierher bringen. Und wir werden den Hintergrund schwarz machen. Und wenn wir zu dieser Fade-Out-Animation kommen, werden wir sie auf 20% bringen. Okay? Also schau, was jetzt passieren wird und wir werden es so machen. Also gleich, wenn Sie die Nachricht erhalten, wird es dunkel, als ob Sie sich auf die Botschaft konzentrieren würden. Und wir können weitermachen und, wissen Sie, es auch anpassen. So wie das. Aber am wichtigsten, wenn du am Ende bist, kannst du diese Animation kannst du diese Animation hier einfügen, und dann lassen wir sie einblenden und dann kehren wir zu 100% zurück. Und wir können das ganz, ganz am Ende platzieren . Und jetzt sieh dir an, wie es aussieht. Nun, das war aus irgendeinem Grund nicht sehr glatt. Also kommen wir einfach wieder hierher und es heißt, Menge wird zu 100% eingeblendet. Wer scheint ein Problem zu haben. Versuchen wir also, es benutzerdefiniert zu machen, und es heißt, bei Null beginnen und dann bei 100 enden, also jetzt funktioniert es. Also jetzt sieh es dir an. Also, wie Sie sehen können, sieht es nicht so aus, als gäbe es ein Ende und einen Anfang und so weiter Aber in diesem Fall ist es vielleicht klar, weil wir die Opazität nur hier am Anfang angeben, oder? Was wir also dagegen tun könnten, wir könnten diesen Effekt auch kopieren, ihn hierher bringen Und wenn wir diese Nachricht gleich hier löschen, könnten wir das Gegenteil tun. Wir können es machen, du weißt schon, benutzerdefinierte 0-100% machen und so etwas mitbringen Und dann könnten wir das Fade-Out auch hier haben . Und jetzt wollen wir mal sehen. Früher und wir können das auch ein bisschen früher machen. Während du die Nachrichten löschst, alles klar. Wie Sie sehen können, haben wir es auf eine bestimmte Art gemacht bei der es nicht so aussieht, als ob das Video wiederholt wird, sondern es ist tatsächlich eine Endlosschleife Das ist genau das, was du manchmal tun möchtest. Lassen Sie uns nun die Vorteile besprechen. Warum würdest du das tun? Eine Sache ist für die Geschmeidigkeit, du willst glatt sein und vielleicht ist es dein Ziel, das Video zu wiederholen Es gibt verschiedene Gründe, warum du ein Video vielleicht wiederholen möchtest Wenn Sie jetzt bei TikTok sind, sind Sie auf Instagram auf einer dieser Plattformen, auf denen sie eine Looping-Funktion haben Ein Grund dafür ist, dass Sie möchten, dass sich die Leute das Video immer wieder ansehen. Vielleicht ohne es zu merken, vielleicht mit der Tatsache, dass man es bemerkt, aber mehr Views zu bekommen, das ist ein Ziel Ein weiteres Ziel ist es, ein Video in einer Endlosschleife zu wiederholen oder das Video immer wieder wiederholen Es könnte nur ein Effekt sein. Du willst es wie Murmeltiertag aussehen lassen , wenn du den Film kennst Du willst es so aussehen lassen, als ob dieser Tag niemals enden würde. Es wiederholt sich und wiederholt und wiederholt sich. Ich hoffe, das hat dir irgendwie geholfen und du hast gelernt, wie man Looping-Videos erstellt Vielen Dank fürs Zuhören Wir sehen uns in der nächsten Lektion 13. Verwenden von Keyframes: In dieser Lektion werden wir also über Keyframes sprechen. Ein Keyframe ist im Wesentlichen ein Zeitpunkt. Sie können sich das als einen eingefrorenen Zeitpunkt vorstellen, an dem Ihr Frame oder ein beliebiges ausgewähltes Element eine Position oder Opazität einnimmt, was auch immer es sein mag Nun, wenn es um Keyframes geht, eine weitere Sache, auf die Sie achten müssen Falls Sie es nicht bemerkt haben, wenn Sie zwischen der Registerkarte Design oder dem Entwurfsmodus und der Bewegung wechseln zwischen der Registerkarte Design oder , erhalten Sie diese Symbole, diese kleinen Quadrate, die Sie auf den meisten Feldern sehen, die Sie haben Und das nennen wir Keyframes. Sie haben sie hier unten bereits gesehen. Und wenn Sie auf eines von ihnen auf einem beliebigen Element klicken, teilen Sie Figma im Grunde , dass Sie an dieser bestimmten Stelle einen Keyframe mit dieser bestimmten Eigenschaft hinzufügen möchten einen Keyframe mit dieser bestimmten Eigenschaft teilen Sie Figma im Grunde mit, dass Sie an dieser bestimmten Stelle einen Keyframe mit dieser bestimmten Eigenschaft hinzufügen möchten. Lassen Sie mich Ihnen zeigen, was das bedeutet. Nun zu diesem Objekt: Wenn ich hier klicke, wenn ich einen Keyframe hinzufüge, kannst du sehen, wie der Keyframe hinzugefügt wird Und es fügt eine Animationseigenschaft hinzu, nämlich die Skalierung. Also hatten wir das vorher nicht. Wir hatten Position, Größe, Position, Position, und jetzt haben wir Maßstab. Wir können also direkt von hier aus Änderungen vornehmen. Sie können sehen, wie ein Keyframe erstellt wird Dies ist also eine weitere Möglichkeit , Keyframes direkt von diesem Panel aus zu verwenden , die Sie bereits kennen und lieben und täglich verwenden Denken Sie also daran, dass Keyframes nicht auf diesen Bereich beschränkt sind Sie müssen nicht nur automatische Keyframes verwenden, sondern Sie können auch die Keyframe-Funktion direkt hier verwenden Keyframe-Funktion direkt hier Also werden wir weitermachen und von hier aus automatische Keyframes einschalten automatische Keyframes einschalten Ein Klick wird es einschalten. Wie das geht, lassen Sie uns hier zum Objekt kommen, lassen Sie mich Ihnen zeigen, was ich damit meine. Im Moment läuft diese Animation bereits, ist ein Satz von Keyframes Normalerweise befindet sich der Keyframe hier am Anfang und am Ende Sie können hier also sehen, dass die Deckkraft hier etwas ist, und dann ändert sich die Deckkraft dort Aber wir sprechen nicht über dieses Element. Wir sprechen hier über das Element. Jetzt, wo wir es hier haben, können wir weitermachen und etwas ändern, irgendwas an diesem Objekt. Also können wir weitermachen und es nach oben treiben. Sobald wir das tun, wird das zu einer registrierten Bewegung, automatischen Keyframes, wenn Sie so Sie können sehen, wie es registriert wird und es macht einen Unterschied Davor gab es keine Bewegung. In diesem Fall können wir also herkommen, das Objekt nehmen, es zentrieren, oder wir können es einfach ein kleines bisschen bewegen und dann können wir es nach oben bewegen und dann die Zeitleiste ein wenig verschieben und dann wieder nach unten bewegen. Schauen wir uns jetzt an, wie es aussieht. Also hast du das gesehen. Ich bin rauf und runter gegangen, und das haben wir im Grunde gemacht. Nun, alles, was wir tun werden, egal ob wir die Größe ändern oder wir zum Beispiel eine Rotation machen, wollen wir sehen, ob wir solche Rotation machen können. Es wird alles als Keyframe registriert und es wird eine Wirkung haben Also, das sieht furchtbar aus. Das ist nicht etwas , was du tun willst. Aber ich zeige dir nur die Möglichkeiten was du tun könntest. Und wenn wir eines dieser Elemente kopieren würden, kommen wir hierher und lassen Sie uns eines davon kopieren, ich werde dieses kopieren, ich werde es hier platzieren, und lassen Sie uns es nehmen und alle Animationen entfernen, die es enthält. Und wir können versuchen, es ausschließlich, du weißt schon, Auto-Keyframes zu verwenden, okay? Also werden wir jetzt mit dem automatischen Key-Framing beginnen. Und wir werden am Anfang sagen, das wird hier auf der linken Seite sein Und dann, nach einer Weile, wird es hierher kommen. Und lassen Sie uns sehen, womit wir arbeiten. Also ist es genau hier. Sie können die Keyframes hier sehen, oder? Nehmen wir an, ich möchte es weglegen. Ich kann zum ersten Keyframe kommen und ihn auch fast in die gleiche Richtung oder auf die gleiche Ebene legen fast in die gleiche Richtung oder auf die gleiche Ebene Dann können Sie sehen, dass ich die ähnliche Animation , die wir hatten, neu erstelle, und dann kann ich hierher kommen Ich kann den Keyframe auch selbst hinzufügen. Ich muss diesen Modus nicht aktiviert haben. Ich kann hier den Keyframe wählen und ich kann sagen, dann geht er weg und geht nach links Alles klar? Also lass uns sehen. Vielleicht sollte es etwas früher ankommen. Wir können die Keyframes verschieben und sie hierher bringen. Sobald wir das haben, können wir hier klicken und den Kurventyp auswählen , den wir haben möchten ich mich erinnere, hatten wir hier zum Beispiel einen kleinen Sprung, also können wir das machen. Siehst du das? Es ist der Animation, die wir hier hatten, sehr ähnlich. Es ist nicht genau dasselbe. Das ist nicht unser Ziel. Aber ich will dir nur zeigen, dass du das auch mit solchen, du weißt schon, Keyframes machen könntest mit solchen, du weißt schon, Keyframes machen , weil es intuitiver ist Es geht nur darum, den Rahmen zu bewegen, weißt du, den Rahmen zu platzieren, den Rahmen zu verschieben, wohin du ihn nehmen willst Wie am Anfang ist es hier, und dann nimmst du es hierher und dann änderst du seine Größe, was auch immer es sein mag Und es funktioniert. Und lass uns dasselbe mit der Größe machen, oder? Ich werde es jetzt kleiner machen. Ich weiß nicht, ob das richtig klein ist. In Ordnung, wir können es ein bisschen kleiner machen. Sie können also sehen, dass es hier einen winzigen Rahmen gibt, der breiter wurde Ich werde es hierher bringen. Ich zeige es dir. Das wollen wir nicht, wir werden es löschen und das hier mitnehmen. Willst du es nur ein bisschen kleiner machen? Okay, wenn wir jetzt hierher kommen, werden wir anfangen zu expandieren. Du klickst hier, du kannst die Breitenanimation sehen und dann werde ich sie vergrößern. In Ordnung. Aber jetzt müssen wir diese ändern, die Position eins. Sie können nach rechts und links navigieren, sodass Sie zum nächsten Frame rechts oder links wechseln können. Jetzt bin ich hier zum Keyframe gekommen, ich werde ihn in die Mitte bringen Dann komme ich hier zu diesem Keyframe und lege ihn auch in die Mitte Dann können wir beide auswählen und sie einfach so ein - und ausziehen lassen Wir können diesen auch ändern. Ich werde das etwas lockerer machen. Entspannt euch ein bisschen mehr, ja. Und einfach so haben wir diese erste Animation neu erstellt. Es ist nicht perfekt. Das sieht man an der Größe. Lass es mich ein bisschen kleiner machen. So kannst du 72 sehen. Wenn wir hierher kommen, mache ich auch 72 oder 73. Es ist immer noch nicht perfekt. Lass mich sehen. Lass uns 70 oder 69 draus machen. Ordnung. Und dann komme ich her und mache daraus auch 69, und los geht's. Sie können also einfach die automatischen Keyframes verwenden oder Sie können einfach weitermachen und die Keyframes selbst verwenden , um alles ein bisschen manueller zu machen Ich weiß, es fühlt sich an wie Handarbeit, es ist Handarbeit, aber es kann viel einfacher werden Und für Leute, die bereits Erfahrung in der Videobearbeitung haben, ist das wahrscheinlich intuitiver und einfacher für Sie, damit zu arbeiten. Nur zur Anmerkung: Sie werden diese Keyframes wahrscheinlich nicht sehen können, es sei denn, Sie schalten diesen Modus ein und Sie beginnen bereits , die Dinge umzustellen Ansonsten kann ich, wenn du dir hier die Opazität ansiehst, keine Keyframes einstellen Aber hier kann ich schon damit herumspielen, weil ich die Position ändere, ich ändere die Breite und so weiter Stellen Sie nur sicher, dass Sie das berücksichtigen wenn Sie versuchen, diese Funktion zu testen. Vielen Dank fürs Zuhören und wir sehen uns im nächsten Sohn. 14. Häufige Fehler beim Motion Design: Wenn Sie mich fragen würden, was die häufigsten Motion-Design-Fehler sind , die Menschen begehen, insbesondere Neulinge, würde ich sagen, dass es drei Hauptfehler gibt , auf die Sie achten müssen Natürlich gibt es eine Fülle, ein ganzes Meer verschiedener Fehler, die Sie begehen könnten, aber ich werde mich jetzt nur auf diese konzentrieren, den ersten Fehler, und für mich ist das eine schwere Sünde, denn ich denke wenn Sie in der Videobearbeitungsbranche tätig sind, sollten dies bereits die Grundlagen sein. Dies sind die wichtigsten Grundlagen, die sie bereits aufgeschrieben haben sollten , nämlich die Verwendung linearer Animationen Für mich ist das eine Sünde. Lassen Sie mich Ihnen sagen, was ich meine, aber darüber haben wir bereits gesprochen. Wenn Sie irgendeine Art von Bewegung wie diese Position, Bewegung genau hier, machen , empfehle ich Ihnen immer, diese Kurven zu verwenden und Lockerung zu verwenden, Federn und Hüpfen und all diese verschiedenen Funktionen zu verwenden, weil sie genau für diesen Zweck gemacht sind und für Sie gemacht sind , damit Sie weitermachen und herumspielen Und einer der größten Fehler ist, weiterzumachen und sich für eine lineare Variante zu entscheiden Es gibt nur sehr wenige Fälle, in denen Linear viel Sinn macht, aber es ist oft nicht die Lösung. Nun, wenn Sie das auf linear umstellen, können Sie wahrscheinlich verstehen, was ich meine, den ersten, den oberen, mit dem unteren vergleichen , können Sie sehen, wie seelenlos die Bewegung Es fühlt sich roboterhaft an und in diesem Fall es auf und es hört auf, aber es hört nicht wirklich auf, weil es hier eine andere Bewegung gibt Aber lassen Sie uns diesen vorerst entfernen und Sie können sehen, wie er aussieht. Es sieht super falsch aus. Es hört einfach plötzlich auf. Es gibt keine Geschwindigkeitsänderung, es gibt kein Hochgefühl. Und mit dem anderen hast du einfach einen viel besseren Flow. Man sieht, wie berauschend es ist, es lässt nach und nach, und es braucht Zeit und Lass uns zurückgehen. Ich will das nicht mehr sehen. Das ist für mich eine der größten Sünden, die man begehen kann, ist Verwendung dieser linearen Animationen. Sie haben keinen Charakter, sie sind seelenlos und sie machen keinen Spaß, und sie vermitteln nicht wirklich eine Also bitte, bitte versuche, diese verschiedenen Bewegungen und Bewegungen zu verstehen, egal ob du einen Sprung machen musst oder ob du ihn ein- oder ausbremsen musst oder beides Versuche zu verstehen, was zu deinem Brand Pass passt, was zu der Funktionalität oder dem Video passt, das du am besten machst gibt es einen anderen Charakter oder jedes Video gibt es einen anderen Charakter oder eine andere stilistische Wahl Du musst das also nur verstehen und sicherstellen, dass du es mit Absicht und nicht einfach zufällig tust Halten Sie es vor allem konsistent. Ändere es nicht ständig. Das ist einer der größten Fehler. Der zweite Fehler ist nicht das Layering. Wir haben bereits über Layering gesprochen und darüber, wie wichtig es bei der Erstellung von Bewegungsdesigns ist Was ich mit Layering meine, ist das Herumspielen mit mehreren verschiedenen Objekten sowie das Einfügen mehrerer verschiedener Animationen in dasselbe Wir haben das hier am Anfang schon gesehen, und ich denke, wir haben das sehr gut demonstriert, auch wenn es noch besser demonstriert werden könnte, okay? Und wenn sich eine Animation wie diese öffnet, können Sie sehen, dass mehrere Dinge passieren. Sie können also schon sehen, dass sich die Größe ändert. Es ändert sich auch die Position. Es bewegt sich nach links oder nach rechts oder was auch immer es sein mag. Aber gleichzeitig passiert Bewegung, der Text hier verblasst War nicht sichtbar. Jetzt ist es sichtbar. Und ja , im Allgemeinen laufen mehrere Dinge gleichzeitig. Okay? Und wir sehen das gleiche Beispiel hier an diesem Teil wieder. Und Sie sehen das so als ob die erste Nachricht hochgeht, die zweite Nachricht auftaucht, sie kommt rein, also das zeigt Ihnen, es eine Art Interaktion gibt Es ist ein delikater Tanz aus Salsa oder Tango oder was auch immer du machen möchtest, aber er ist sehr delikat, er ist sehr nett, und die beiden tanzenden Personen müssen zusammen herumspielen Das ist es wirklich, was ein Motion Design oder eine Motion Graphic ausmacht ein Motion Design oder eine Motion Graphic Es erweckt es zum Leben, weil es sich anfühlt, als würden sie miteinander sprechen. Es gibt Kommunikation, eine wunderschöne Sprache, die entsteht , wenn jemand singt: Hey, ich komme, ich werde jetzt auftauchen und dann wird die Nachricht darüber ein bisschen höher gestellt, damit sie sich nicht gegenseitig schlagen. Es ist einfach perfekt. Es harmoniert einfach gut. Der größte Fehler ist, das nicht zu tun. Der größte Fehler besteht darin, diese sehr statisch aussehenden Animationen zu haben diese sehr statisch aussehenden Animationen , die sich nicht harmonisch anfühlen. Sie fühlen sich eher eingefroren, schüchtern und animiert an So könnte ich es am besten beschreiben. Das ist das Gegenteil von Animation, einem Wort, man hat etwas Unbelebtes, es bewegt sich nicht Vielleicht lebt es nicht einmal, es ist nicht lebendig. Es ist tot. Gehen Sie voran und versuchen Sie sicherzustellen, dass Sie bei der Erstellung von Motion-Design auf alle Details achten und jedem Objekt unterschiedliche Animationen Und das innerhalb derselben Zeitleiste. Und jetzt kommen wir zum letzten Fehler, dem letzten Fehler . Meiner Meinung nach bei der Arbeit mit Bewegungsdesign, abgesehen von der Erzeugung unangenehmer Bewegungen und so weiter, nicht darum , nicht darum Sie schauen sich Ihr Motion-Design immer wieder an und überprüfen es Am Ende des Tages neigen Sie vielleicht dazu, es superschnell zu machen, weil Sie alles schon einmal gesehen haben. Du liest die Nachrichten nicht mehr. Du hast etwas Text. Du liest es nicht mehr, weil du denkst: Hey, ich habe das schon gelesen, ich weiß genau, was darin steht. Daher sind Sie vielleicht eher geneigt , Ihre Animationen wirklich schnell laufen zu lassen. Und das haben wir vielleicht gerade in dieser Animation gemacht, wo Sie sehen können, dass der Text superschnell kommt und wir keine Zeit haben, ihn zu lesen. Nun, viele Leute fühlen sich vielleicht unter Druck gesetzt, das speziell für soziale Medien zu tun speziell für soziale Medien , weil sie verstehen, okay, Leute haben keine sehr gute oder sehr lange Aufmerksamkeitsspanne, aber das ist nicht der richtige Weg, okay? Stellen Sie also sicher, dass Sie beim Erstellen einer Animation Ihrem Betrachter, Ihrem Leser genügend Zeit geben , um die Animationen in ihrer ganzen Pracht und Schönheit zu betrachten und die Texte und die kleinen Notizen lesen zu können die Texte und die kleinen Notizen und zu verstehen, was passiert. Andernfalls riskieren Sie, zu viel zu tun. Du bewegst die Dinge zu schnell. Es passieren mehrere Dinge. Die Undurchsichtigkeit des Hintergrunds ändert sich und Nachrichten kommen ein und aus und werden gelöscht und so weiter Das kann also sehr verwirrend sein. Und es kann Ihre Zuschauer werfen, es kann sie in eine Welt werfen , in der sie nicht verstehen, was passiert. Also lerne von mir, lerne aus unseren Fehlern und versuche sicherzustellen, dass du deinen Zuschauern genügend Zeit gibst , um deine Animationen in aller Ruhe anzusehen, aber gleichzeitig, ohne die Aufmerksamkeit zu verlieren oder sich zu langweilen Sie müssen also ein sehr gutes Gleichgewicht zwischen diesen beiden Meiner Meinung nach wirst du niemals Lage sein, alle glücklich zu machen. Aber stellen Sie einfach sicher, dass es für die Mehrheit funktioniert. Ja, sind im Grunde mein Vorschlag oder meine Ansicht der drei größten Design - oder Motion-Design-Fehler, die Sie machen könnten. Wie gesagt, das ist meine eigene Meinung. Also nimm es oder lass es. Weißt du, das ist nur ein Ratschlag für mich und versuche, ihn bei der Erstellung von Bewegungsdesigns zu berücksichtigen , nur damit du nicht wie ein Neuling, sondern gleichzeitig wie ein Amateur wirkst, damit du wirkungsvolle Bewegungsgrafiken erstellen kannst , die den Leuten wirklich gefallen und die Engagement, Ansichten und Aufmerksamkeit der Leute bekommen Ansichten und Aufmerksamkeit der Leute Vielen Dank fürs Zuhören Wir sehen uns beim 15. Exportieren als GIF, MP4, WebM und SVG: Ordnung. Also, jetzt hast du es geschafft und du hast deine Animation fertiggestellt und du bist sehr stolz darauf. Aber jetzt möchtest du noch einen Schritt weiter gehen und einfach den letzten letzten Schritt machen, nämlich sie zu exportieren um sie zu zeigen, denn wenn wir viele dieser großartigen Animationen gemacht haben, wollen wir sie den Leuten zeigen. Wir wollen sie nutzen. Ansonsten ist diese Funktion von Figma, dieser ganze Bewegungsmodus, völlig nutzlos. Also gute Neuigkeiten für dich Wir können es exportieren und es ist sehr, sehr einfach. Nun, es ist vielleicht nicht sehr offensichtlich, wie Sie dorthin gelangen können, aber lassen Sie mich es Ihnen erklären. Und ich werde Ihnen auch die verschiedenen Exporteinstellungen erklären , die Sie verwenden, um Ihr Video in der höchsten Qualität zu exportieren, aber auch nicht mit der absolut größten Dateigröße. Lassen Sie uns also weitermachen und zu diesem Panel navigieren. können dies tun, Sie auf den Frame klicken, den Sie exportieren möchten. Sie exportieren also eindeutig nicht die gesamte Datei. Sie exportieren nicht mehrere Frames gleichzeitig. Sie exportieren den Frame , an dem Sie gearbeitet haben, obwohl Sie ihn wahrscheinlich aus mehreren Frames exportieren können , aber es wird nur ein separates Video sein. Schauen wir uns das Video für diesen Frame an. Du wirst es einfach wählen, du wirst es auswählen. Während Sie sich noch im Figma-Motion-Modus befinden, scrollen Sie nach unten zu Exportieren, dann stehen Ihnen einige Optionen zur Verfügung Es gibt animierte und statische Elemente. Es mag so aussehen, als ob Statik leer ist, aber das ist sie nicht. Du musst nur auf das Plus klicken. Dies ist das normale oder klassische Exportfenster , an das Sie normalerweise gewöhnt sind. Sie kennen das wahrscheinlich, Sie können es als PNG, JPEG, SVG, PDF usw. exportieren . Aber was uns mehr interessiert, ist die animierte Exportfunktion. Hier ist es für die meisten Leute sehr vereinfacht, was ich sehr schätze, weil ich mich immer in diesen Details der verschiedenen Exporteinstellungen verliere und nicht weiß, wie ich meine Videos optimal exportieren kann. Figma macht es dir also wirklich einfach , das zu verstehen und zu umgehen Also zuerst wird es Sie fragen, welches Format Sie benötigen Es gibt verschiedene Formate, und das hängt natürlich von Ihrer Verwendung ab. Ich bin kein Videoexperte, daher kann ich Ihnen nicht wirklich alle Details geben. Aber das am häufigsten verwendete Format ist MP4 Wenn Sie dieses Format verwenden, werden Sie nichts falsch machen. Nun, was ich Ihnen sagen kann , ist , dass das Web besser für das Web geeignet ist. Aber ich denke natürlich, dass dies speziell für Websites besser geeignet ist , aber da bin ich mir nicht sicher. Es könnte Ihnen helfen, kleinere Dateigrößen zu haben , obwohl ich mir nicht sicher bin. Nun, wenn es um Geschenke geht , kann ich Ihnen davon erzählen. Sie kennen sich wahrscheinlich mit Geschenken aus. Sie haben sie benutzt und Sie verwenden sie hier und da in den sozialen Medien. Und Geschenke sind von viel geringerer Qualität. Normalerweise sind sie komprimiert und sollen ohne Ton sein und sie bieten im Grunde genommen nicht die optimalsten Seherlebnisse, sagen wir mal. Dadurch wird Ihre Animation nicht optimal dargestellt, aber es wird sichergestellt, dass die Größe sehr klein ist. Und wie Sie sehen können, hat es auch niedrigere Bildraten. Sie können es natürlich mit mehr Bildraten erkunden, aber das macht den Zweck zunichte Ich würde Ihnen also empfehlen, sich für MP4 zu entscheiden, Keep it simple Wenn Sie spezielle Anwendungsfälle für die anderen Dateitypen haben, probieren Sie sie aus. Die zweite Sache ist die Größe, Sie wissen wahrscheinlich davon. Normalerweise machst du es einfach ein X wie auf einmal. Exportiere es in genau der gleichen Größe wie dieser Frame. Aber wenn du sagst, dieser Rahmen ist zu klein, ich möchte, dass er größer ist, dann machst du zwei X, oder du kannst ihn sogar selbst ausfüllen, glaube ich. Es scheint, als ob dies ein professionelles Feature ist, aber behalte das einfach im Hinterkopf. Sie haben auch unterschiedliche Exporteinstellungen. Sie haben also 1080 14 42.160. Dies sind unterschiedliche Exporteinstellungen, die sich auf die Qualität beziehen Sie haben also HD, Fol HD und so weiter Nun, Sie könnten mit einem X weitermachen Wenn Sie also wissen, dass dies der Frame ist , den Sie exportieren möchten, es ist im Grunde ein Telefonbildschirm, dann sollte das mehr als genug sein Wenn Sie sich darüber Sorgen machen, können Sie zwei verlassen oder Sie können eine ganz bestimmte Qualität wählen. Wenn wir jetzt weitermachen, haben wir auch Qualität. Nun, das ist auch so gemacht, dass es für Sie sehr einfach ist. Also ist es auf niedrig, mittel oder hoch eingestellt und jeder wird sagen: Ja, ich will die absolut höchste Qualität, aber du musst bedenken, dass das zu einer größeren Dateigröße führen wird . Um fair zu sein, zwei MB sind nicht so groß. Ich schätze, sie haben eine wirklich nette Komprimierungsmethode. Sie sind wirklich nett eingerichtet. Das ist wirklich gut für hohe Qualität, aber Sie müssen bedenken, dass dies ein sehr kurzes Video ist. Sie haben auch Medium, und wenn Sie einfach zu Medium wechseln, können Sie sehen, dass wir bereits 25% der Größe eingespart haben. Und wenn wir zu niedrig gehen, haben wir mehr als die Hälfte gespart. Okay? Von hoch nach niedrig haben wir also mehr als die Hälfte der Dateigröße gespeichert. Sie müssen also wirklich darüber nachdenken, obwohl ich mir nicht sicher bin, was der Qualitätsunterschied ist. Natürlich hast du die Bildrate. Jetzt bezieht sich die Bildrate darauf, ob Sie sie nicht kennen. Es geht darum, wie viele Bilder Sie pro Sekunde haben. Dafür steht FPS. Normalerweise hat man für soziale Medien 30 oder 25, 24, soweit ich weiß. Wenn Sie etwas für soziale Medien exportieren, werden Sie nicht in der Lage sein, sechs TFPs zu erhalten , das hat keinen Sinn Aber wenn Sie es für Benutzer für Websites oder andere Anwendungsfälle einrichten möchten , können Sie es tatsächlich als sechs TFPs anzeigen und sich dann dafür entscheiden. Warum nicht? Denken Sie daran , dass dies zu einer höheren Dateigröße führen wird . Wir sind hier um 50% größer geworden, wie Sie sehen können, dafür benötigen Sie ein professionelles Konto. Wenn du etwas wie 12 FPS machst, wird es ein bisschen abgehackt oder wie auch immer du es nennen könntest, ein bisschen verzögert erscheinen , auch wenn es nicht so ist, also behalte das einfach Lassen Sie uns nun weitermachen und versuchen, das zu exportieren. Ich möchte Ihnen die Qualitätsunterschiede zeigen. Lass uns weitermachen und es tun. Also ein X und lass uns hoch gehen. Ich werde es auch als niedrig exportieren. Und dann möchte ich es als Geschenk exportieren. Schauen wir uns jetzt das Video an. Wir haben zuerst ein X hoch. Das sollte mehr oder weniger genau so aussehen, wie wir es gesehen haben. Wie Sie sehen können, hat es viele Rahmen. Es ist sehr glatt. Obwohl ich sagen würde, dass die Qualität besser sein könnte. Ich kann es also verstehen, es als zwei X zu exportieren. Jetzt schauen wir mal, wie es niedrig aussieht. Ich kann schon sehen, dass die Qualität des Bildes einfach so unterschiedlich ist. Ich meine, wenn du auch in den Hintergrund schaust, sieht es hier komprimierter aus. Aber ich muss sagen , es ist kein großer Unterschied zwischen hoch und niedrig. Schauen wir uns jetzt das Geschenk an. Wie ich erwartet hatte, weißt du, hat das Geschenk weniger Bilder pro Sekunde, sodass man generell ein unscharferes Bild bekommt Aber um fair zu sein, wenn du das deinem Team zeigen willst , wenn du einen sehr einfachen Ablauf zeigst und es nicht so kompliziert sein muss, würde ich nicht sagen, weißt du, das ist wirklich schlecht Es geht darum, die Idee rüberzubringen und, weißt du, sie können die allgemeine Bewegung sehen. Qualität ist nicht besonders beeindruckend, aber hey, es bringt die Idee rüber. Als letzte Sache möchte ich jetzt testen, es als zwei X hoch zu exportieren und zu sehen, wie es aussieht. Ordnung, also los geht's. Sehen wir uns die zwei X hoch an Ich kann also sehen, dass das Bild definitiv etwas schärfer ist. Das könnte ich sagen Aber gerade hier in den dunklen Gegenden habe ich das Gefühl, dass wir hier immer noch diese Verzerrung haben, was ich nicht wirklich mag, aber ich gehe auch sehr, sehr genau damit um. Aber ich finde, die Qualität, die wir gerade bekommen haben, sieht viel besser aus. Sieht mit der Zwei-X-Version definitiv viel besser aus, aber sie ist immer noch da, nicht dort, wo ich sie haben möchte. Und lassen Sie uns die Größe in Bezug auf die Größe sehen. Es sind 3 Megabyte, das macht Sinn. Es ist doppelt so hoch. Aber so können Sie Ihre Arbeit im Grunde exportieren, um sie zu präsentieren, anderen zu zeigen und mit ihnen zu teilen. Vielen Dank fürs Zuhören Wir sehen uns in der nächsten Lektion. 16. Animieren eines Ladekreises: Hallo und willkommen zu einer weiteren Lektion des Figma Motion-Kurses In den vergangenen Lektionen haben wir nun viele verschiedene Techniken gelernt, viele verschiedene Dinge bei der Verwendung von Figma Motion-Bedienfeldern sowie Tools und Funktionen Und wir haben eine Animation gemacht. Wir haben uns darauf konzentriert, und es ging im Grunde darum, Nachrichten zu empfangen. Und in dieser Lektion werden wir über eine andere Art von Animation sprechen. Welches ist eine Ladeanimation. Jetzt gibt es eine Menge Ladeanimationen, verschiedene, aber wir werden mit einer sehr einfachen beginnen , die wir alle kennen , und es ist die kreisförmige rotierende Animation. Nun gibt es natürlich verschiedene Arten für diese Animation. Es ist nicht immer dasselbe. Ich kann verschiedene Stile und Farben haben, aber wir werden versuchen , es minimal und einfach zu halten. Das Erste, was wir tun werden, ist, diesen Rahmen zu kopieren und einzufügen, und wir werden ihn wegnehmen, zur Seite legen. Genau hier. Wie Sie sehen können, können wir beim Öffnen dieses Frames bereits sehen, dass ein paar Animationen dafür eingerichtet sind. Also, um sie los zu werden, gehen wir zur Ebene. Wir gehen zum Frame und wir werden die verschiedenen Ebenen überprüfen. Wir werden das Bild behalten. Wir werden alles löschen, alles was wir tun müssen, ist eine Ladeanimation zu machen. Ich werde es so einfach wie möglich halten. Um nun eine rotierende kreisförmige Animation zu erstellen, gehen wir zum Ellipsenhocker und halten die Umschalttaste gedrückt, wir erstellen einen Kreis wie diesen und platzieren ihn in der Mitte Anstatt es zu füllen, geben wir es stattdessen und Sie können es etwas dicker machen Okay. Da haben wir's. Jetzt haben wir eine leere Timeline ohne Animationen. Wir werden klicken. Lass es uns neu laden . Das sieht ziemlich gut Lass uns jetzt anfangen. Jetzt müssen wir es aufteilen, damit es funktioniert . Es kann kein vollständiger Kreis sein. Wir werden es anfassen und in den Designmodus wechseln , und dann werden wir kommen und uns dieses kleine Stück hier ansehen und wir werden es schneiden. Sie können jedes Teil herstellen. Ich fülle es, es könnte halb eins sein. Es könnten drei Viertel sein. Es liegt wirklich an dir, lass uns so etwas machen. Ich mache fast ein Viertel, 25%, und dann werden wir zu dem Strich kommen. Sie können sehen, dass es verschiedene Typen gibt, aber sie führen alle zum selben Ergebnis. Was ich ganz einfach machen werde, ich werde darauf doppelklicken und dann werde ich diesen Punkt hier löschen. Ordnung, jetzt haben wir dieses Stück hier und wir können weitermachen und mit unserer Animation beginnen. Also kommen wir gleich hier zu unserem Bewegungsteil und wir werden ihn animieren. Nun, das könnte eine Rotationsanimation sein, aber es gibt ein Problem. Sie werden es jetzt wahrscheinlich bemerken, nämlich dass es sich auf eine ziemlich seltsame Art und Weise dreht , sagen wir, okay? Es dreht sich also um sich selbst. Aber wie Sie in der Mitte sehen können, ist der Anker nicht richtig aufgestellt. Sie möchten also weitermachen und daraus einen Rahmen machen. Wir wollen diesen Rahmen vergrößern und wir wollen ihn vergrößern, als ob es einen vollen Kreis handelt, nicht nur um einen Teil davon. Wir werden zu dieser Teilbreite kommen und sie mit zwei multiplizieren, und wir werden hier dasselbe tun. Um das zu tun, können Sie einfach ein Sternchen und zwei danach setzen, dann wird Figma die Berechnung für Sie durchführen Dann halte ich es in und komme zurück zum Designbereich, ich werde es nach unten ausrichten. Richtig, okay? Jetzt fühlt es sich an, als ob sich hier ein Kreis schließt. Und wenn wir jetzt zum Animationsfenster gehen und eine rotierende Animation hinzufügen, werden wir etwas Unglaubliches sehen wird sich als Kreis drehen, okay? Selbst ohne einen Kreis haben wir ihn rotieren lassen, als ob es einen vollen Kreis gäbe, obwohl es nur ein Viertel ist. Es ist also sehr einfach, sehr einfach, aber hier ist, was Sie tun möchten. Möglicherweise möchten Sie die Animation ein wenig verlängern, und sie könnte zu langsam erscheinen. Aber ich möchte , dass Sie zum Rotationspanel übergehen. Sie können es im Uhrzeigersinn drehen und es um 360 Grad drehen. Also hier ist, was passieren wird. Es wird einfach an genau denselben Ort zurückkehren . Dann komm hierher zum Kurveneditor, und dann möchte ich, dass du ihn kurvenförmig machst, einfach so Eigentlich würde ich das sogar ein bisschen verringern und es von unten nach unten krümmen lassen Was das bedeutet, wenn Sie es noch nicht herausgefunden haben, was völlig in Ordnung ist, es ist nicht einfach. Das lässt nach Was ich gerade getan habe, ich habe dafür gesorgt, dass es sich entspannt hat und dann hier wird es deutlich nachlassen. Mal sehen, wie es aussieht. Sehr nett, sehr nett. Im Grunde sehen viele von ihnen so aus wie diese rotierenden Dinge, Ladekreise. Mal sehen, wie es jetzt aussieht, ich habe es gerade gekürzt. Es ist viel schneller, was mir gefällt. Danach, jetzt, wo wir das haben, können wir es kopieren und einfügen. Nicht der ganze Frame, sondern die rotierende Animation. Wir werden es hier platzieren, und dann kopiere ich es, füge es hier ein und kopiere es und füge es dort ein. Jetzt schau. Es wird einfach weiter geladen. Es ist sehr einfach, sehr nett, sehr ordentlich. Wenn Sie noch einen Schritt weiter gehen möchten, was Sie vielleicht möchten , können Sie auch eine Zahl hinzufügen. Zum Beispiel werden wir 10% hinzufügen. Machen Sie es größer und ich werde es einfach in die Mitte des gesamten Rahmens legen . Gehen wir zurück zum Entwurfsmodus, der Mitte, und jetzt können wir ihm auch ein bisschen Schatten geben. Wir haben noch 10% übrig. Okay, cool. Wie animieren wir das Nun, es ist nicht die einfachste Sache, die ich sagen muss, aber es gibt einen Weg, es zu erledigen Es ist ein bisschen knifflig, also schnall dich an. Aber im Grunde möchten Sie dafür eine Animation hinzufügen , nämlich Opazität Sie möchten also, dass dies angezeigt wird und dann möchten Sie, dass es auch verschwindet Also werden wir zwei Animationen hinzufügen. Die erste ist die Opazität, und statt 500 Millisekunden können wir zehn machen Und dann machen wir weiter und machen eine weitere Opazitäts-Animation, aber diese hier wird ein Ausblenden sein und es wird auch zehn Millisekunden dauern. Okay. Jetzt, wo wir das haben, können wir weitermachen, kopieren und wir werden es hier einfügen. Okay? Also kopiere es und füge es ein, du kannst sehen, wie es hier eingefügt ist, und dann ziehe ich es hierher. Okay. Jetzt, wo wir das hier haben, werde ich es auf 23% erhöhen. Und es wäre ganz nett, wenn wir sie auch alle zentriert halten würden. Also werde ich herkommen und das auch zentriert halten. Es sieht also gut aus, aber wir müssen sie beide zentrieren, also perfekt. Und jetzt sieh dir an, wie es aussieht. Okay? Aber das ging ein bisschen zu schnell, würde ich sagen. Also können wir das verlängern oder wir können ein anderes machen. Lass uns noch eins machen. Jetzt haben wir also die 23%. Wir kopieren, fügen und wir nehmen das hier, und dann werden es 49% werden und dann werden wir kopieren und einfügen Es wird 83 sein. Dann kopiere es zum Schluss und füge es ein. Und es wird 99 brauchen. In Ordnung, also lass uns sehen, wie es aussieht. Sehr schlecht. Der Grund dafür ist, dass wir die Enden nicht mit den Anfängen synchronisiert haben. Also, was bedeutet das? Jetzt haben wir hier ein Ende. Einer von ihnen wurde ausgeblendet, und dann wurde der andere eingeblendet. Jetzt müssen wir genau das Gleiche tun, aber es kann etwas knifflig werden Also kommen wir hierher und fügen das Fade-Out gleich hier hinzu. Also klicken Sie darauf und ziehen Sie es ganz hierher. Dann schau mal. Da ist ein Fade-Out, ein sehr kleiner Abschnitt. Wir können natürlich versuchen, ihn zu kürzen oder zu entfernen, indem wir ihn etwas weiter ziehen Sie können das auch tun, indem Sie nach oben rollen und dann heranzoomen Sie können die Lücke ein wenig sehen. Jetzt werde ich die Lücke füllen. Wie Sie sehen können, gibt es da eine winzige Millisekunde. Ordnung, jetzt, wo wir das haben, müssen wir nur die anderen synchronisieren, genau wie ich es gesagt habe Jetzt kommen wir her, wir bringen das her. Und es wird es versenken. Und am Ende das Gleiche. Es wiederholt sich einfach. Aber es kann etwas knifflig werden , weil sie so kurz sind. Darauf musst du aufpassen, um ehrlich zu sein. Ordnung. Und wie immer ein bisschen mehr reinzoomen, das ein bisschen näher heran bringen. Da haben wir's. Also lass es uns jetzt testen. Dann muss es für diesen nicht ausgeblendet werden. Ich kann einfach dort bleiben. Also werde ich das einfach löschen. Bei letzterem kann es bei 99% bleiben. Man merkt, dass es noch nicht perfekt ist. Es gibt einige von ihnen, die wir noch verbessern können. Zum Beispiel war der Sprung hier meiner Meinung nach nicht so ideal. Und da hast du es. Nicht perfekt, aber es ist eine nette kleine Ladeanimation, und das ist alles, was man manchmal braucht. Und natürlich können Sie die Zeit hier verlängern, sodass sie bei 99% bleibt und sich nicht wiederholt. Und natürlich können Sie diese fortsetzen. Wie Sie sehen können, wird es immer wieder mit 99% geladen und so weiter. So können Sie es im Grunde machen. So einfach ist das, nicht zu kompliziert, und da haben Sie es. In der nächsten Lektion werden wir uns mit einer anderen Art von Animation befassen, nämlich mit einer Ladeleiste. Es ist auch ähnlich, aber es funktioniert ein bisschen anders, aber wenn man versteht, wie diese funktioniert, wird es nicht so schwierig sein, die andere zu verstehen. Wir sehen uns also in der nächsten Lektion. 17. Erweitert: Animieren eines Fortschrittsfensters: In der letzten Lektion haben wir gelernt, diese verschiedenen Ladezustände erzeugt, und einer davon ist dieser Ladekreis In dieser Lektion lernen wir einen anderen Typ kennen, nämlich einen Ladebalken. Aber wir werden das anders gestalten, nicht nur, weil es wie die Animation aussieht, sondern auch versuchen, die Benutzererfahrung dahinter zu verstehen und zu verstehen, wie sie Ihnen helfen kann. Also werde ich genau diesen Frame noch einmal kopieren und einfügen und ihn dann weglegen , damit wir nicht abgelenkt werden Und lass uns anfangen. Also werde ich das zu einem Flow-Ausgangspunkt machen. Ich werde es hier aufstellen, damit wir es sehen können. Dann werden wir weitermachen und diese Elemente löschen, die wir erstellt haben, damit wir einen Neuanfang haben. Ordnung, jetzt , wo wir das haben, fangen wir mit unserer Animation an. Was ich gerne machen würde, und lassen Sie uns zunächst damit beginnen, die Grafiken dafür zu erstellen Ich möchte einen Fortschrittsbalken erstellen, einen Ladebalken, der von links nach rechts verläuft Gleichzeitig möchte ich nicht, dass es nur das ist. Stattdessen möchte ich, dass es dem Benutzer zusätzliche Informationen und Feedback gibt, sodass er weiß, in welcher Phase er sich befindet und was zu tun ist oder was gerade in dieser Phase getan wird und vielleicht einige Informationen oder Anweisungen gibt. Lassen Sie uns gleich darauf eingehen, und dann werden Sie verstehen, was ich meine. Ich werde zuerst einen Rahmen erstellen und ihn hier platzieren. Ich mache es vorerst weiß und dann werde ich es kreisförmig machen. Aber anstatt es komplett weiß zu machen, wie wäre es, wenn wir ihm einen Glaseffekt geben, okay? Da haben wir's. Das ist ein wirklich toller Glaseffekt. Und was ich daran liebe, ist, dass man nicht wirklich hart dafür arbeiten muss. Ich mache schon viele verschiedene Effekte für dich, was wirklich nett ist. Also jetzt und danach wollen wir eine Bar erstellen, okay? Es gibt verschiedene Möglichkeiten, diese Balken zu erstellen, aber ich werde sie noch einmal mit einem Rahmen erstellen. Und ich werde es zum Füllen geben. Ich werde auch dafür sorgen, dass es ein paar runde Ecken hat. Aber ich werde ihm eine Opazität von 20% geben, okay? Also lass es uns hier hinstellen. Oder lass uns sehen, vielleicht können wir es kleiner machen. Ich werde es kopieren und einfügen und dort ablegen. Das wäre also im Grunde unser Fortschrittsbalken, wie Sie sehen können. Und wir können uns fragen, ob wir es ablegen wollen, ob wir es aufstellen wollen oder ob wir es genau in der Mitte platzieren wollen, oder? Das könnte auch eine andere Art des Ladens sein. Und wir können auch darüber nachdenken, wie es uns helfen oder uns in irgendeiner Weise nützen kann . Wir können es auch bis zum Ende verlängern. Manche Leute machen es richtig dick oder groß oder was auch immer, so. Was andere Leute tun, ist, es wirklich, wirklich dünn zu machen . Ich denke, Apple macht das zum Beispiel, wenn wir ein bisschen zurückgehen es auch so richtig dünn machen. Ich mag diesen Look. Es ist nicht zu klobig Lassen Sie uns versuchen, bei diesem Look zu bleiben und ich werde sie in einen Rahmen setzen Jetzt, wo wir das haben, geht es uns sogar noch besser, ich werde das hier einfügen. Das wird ein Frame innerhalb dieses Frames sein und wir werden dem eine Opazität von 100% geben , aber wir werden die Füllung auf 10% setzen und auf diese Weise können wir das sehen, okay? Und natürlich müssen Sie es nicht weiß machen. Sie können es auch blau oder eine andere Farbe wählen, die Sie möchten, das ist völlig in Ordnung. Es ist nur eine Farbe, die ich vorerst ausgewählt habe. Da haben wir es. Blau ist schöner. Und mal sehen, wie es aussehen würde, wenn wir dem Ganzen einen Glaseffekt verleihen Es ist vielleicht etwas zu übertrieben, um ehrlich zu sein, aber wir können es vielleicht mal streichen und es wirklich dünn machen Machen Sie den Strich ebenfalls zu 50%, zu 20%. Also werde ich daraus ein automatisches Layout machen. Ich werde es erweitern und den Rahmen darin verkleinern. Aber ich wollte einen Füllbehälter für die Höhe haben, ich wollte nur die Höhe füllen. Wenn ich also in diesem Fall entscheide, dass es zu klein ist, kann ich es ohne Probleme so klobiger machen Lassen Sie mich es mir jetzt ansehen und sehen, wie es auf einem Telefonbildschirm aussieht Das sieht viel besser aus, ein bisschen dicker, um ehrlich zu sein, aber ich bin nicht besonders glücklich mit diesem Blau. Was wir vielleicht damit machen könnten, wir können ihm vielleicht einen Farbverlauf geben. Das würde auch zeigen, welche Fortschritte gemacht werden. Und mal sehen, wie es aussieht. Sieht viel besser aus, ist aber immer noch nicht da. Ich frage mich, ob wir es vielleicht aufpeppen könnten. Aber an diesem Punkt sprechen wir über Details, und um ehrlich zu sein, ist das nicht das Wichtigste , worauf Sie sich konzentrieren möchten , oder? Denken Sie also daran, wenn Sie so etwas entwerfen, und ich werde den Inhalt dieses Nussclips erstellen, und dann haben wir hier eine Art Leuchteffekt. Okay? Das ist ziemlich cool, ziemlich nett. Ich gehe hier zum Glas und nehme etwas Frost, das hilft uns bei der Ablesbarkeit oder Klarheit Ich werde nur versuchen, diesen Globus so einzurichten, dass er nicht übertrieben wird Okay. Das sieht ziemlich gut aus. Das sieht wirklich nett aus. Ich werde jetzt etwas Text hinzufügen. Nun, da wir eine gewisse Grundlage haben, sagen wir, jetzt können wir etwas Text hinzufügen und darüber sprechen, was wir hier tun. Ich werde hier einen Text schreiben und ich werde sagen, Daten übertragen. Okay. Also können wir es entweder zentrieren oder zur Seite legen. Es liegt wirklich an uns. Aber ich würde das gerne kopieren und ein bisschen weglegen, es etwas kleiner machen. Weißt du, was ich aus der ganzen Sache ein automatisches Layout machen werde. Okay. Und ich werde die Abstände viel enger zusammenlegen und vor allem diese sollten noch enger sein. Was ich hinzufügen möchte, ist eine kleine Erklärung hinzuzufügen. Halten Sie den Benutzer auf dem Laufenden. Ich möchte sie wissen lassen, was vor sich geht? Was gerade passiert. Ich würde sagen, Dateien patchen, 50%. Okay. Dies soll den Benutzer darüber informieren, was genau in diesem Moment passiert. Ich spreche also nicht über die ganze Sache, ja, wir übertragen Daten darüber, was vor sich geht? Extrahieren wir? Platzieren wir Dateien und ZIP-Dateien? Komprimieren wir sie? Was genau machen wir? Das ist genau das , was wir dem Benutzer sagen müssen. Das ist eine Sache , die man beachten sollte. Eine andere Sache, die Sie beachten sollten, ist vielleicht das Hinzufügen einer Zahl. Wir können das tun, indem wir diesen Text kopieren, ihn hier einfügen und ihn dann vielleicht im automatischen Layout zu diesem hinzufügen und ihn so platzieren Aber anstatt einen vollständigen Text zu haben, kannst du einfach 10% schreiben Und dann können wir sie so zentrieren. Aber um ehrlich zu sein, bin ich damit nicht wirklich zufrieden , weil es nicht symmetrisch ist. Ein Schritt zurück. Weißt du was? Lass es uns so belassen und ich werde es stattdessen weglegen. Lass uns sehen, wie es jetzt aussieht. Auch immer noch nicht sehr glücklich. Das ist ein bisschen besser, aber immer noch nicht da. Vielleicht hat es mehr mit dem Abstand zu tun. Das ist ein bisschen besser. Mal sehen, was ist, wenn wir es nach links oder rechts legen? Ja, das könnte ein bisschen besser für mich funktionieren, um ehrlich zu sein. Ja, jetzt sieht das ziemlich gut aus. Lass uns weitermachen und damit beginnen , es tatsächlich zu animieren Wir gehen also zum Animationsfenster oder zum Bewegungsfenster , wie auch immer Sie es nennen möchten Und wir werden herkommen und animieren, nur damit es auftaucht. Wir wollen, dass das auftaucht oder wir wollen, dass es auf dem Bildschirm erscheint. Ich werde nur eine kleine Maßstabsanimation machen, und ich werde diese Opazitätsanimation ergänzen, und wir können ihr eine Art Positionsanimation geben Also werden wir die Position von unten bestimmen. Es wird sehr gering sein, vielleicht 50. Wir werden es undurchsichtig machen, einblenden, aber es wird sehr kurz sein und die Skala wird okay sein Das sieht ziemlich gut aus, aber wir werden die Skala auf 90% bringen Und wir werden all diese auswählen und ihnen diese Art der Lockerung geben ihnen diese Art der Lockerung Wir werden dafür sorgen, dass sie sich erheblich entspannen. Das sieht ziemlich nett aus. Das sieht sehr ordentlich aus, sehr glatt, okay? Wir können sogar weitermachen, um ehrlich zu sein und es ein bisschen aufprallen zu lassen, obwohl ich mit Bounces und so nicht besonders zufrieden bin Lass uns sehen. Das ist nett. Ich mag diesen Sprung. Was ist, wenn wir es auch mit der Position machen? Ja, das ist auch nett. Jetzt können wir die Skala so positionieren, dass sie kürzer ist, so dass es eine schnellere Animation ist, und dann können Sie Daten übertragen. Und anstatt hier zu beginnen, werden wir dafür sorgen, dass es bei 5% beginnt. Und anstatt Dateien zu patchen, werde ich sagen, Dateien vorbereiten Ordnung. Jetzt haben wir also Daten übertragen, Fotos übertragen und statt Dateien vorzubereiten, werden wir das klarstellen. Und wir halten es momentan einfach minimal. Und jetzt fangen wir diese kleinen Elemente zu animieren Ich möchte also zunächst mit der Ladeleiste selbst beginnen Mit der Ladeleiste ist es also ziemlich einfach. Was wir tun können, ist ihm eine Größe zu geben oder eine Animation zu skalieren. Wenn wir ihm eine maßstabsgetreue Animation geben, schauen wir uns an, wie es aussehen würde. Das ist genau das, was wir ehrlich sein wollen. Das wird verkleinert. Lass es uns kürzer machen. Bring es her. Wir bekommen dieses Pop-up und dann geht es schneller, aber nicht so schnell. Das ist ziemlich nett. Wir können sogar etwas lockerer machen, wenn wir möchten, oder wir können es auch lockerer machen. Nein, aber ich mag es, ohne nachzulassen. Wenn es nachlässt, wird es einen Unterschied mit dem Prozentsatz geben Okay? Also können wir versuchen, das auf verschiedene Arten zu tun. Wir können also den gleichen Trick anwenden, den wir in Bezug auf die Opazität gemacht haben in Bezug auf die Opazität gemacht Also, genau wie in der letzten Lektion, werden wir in diesem Fall nur die Opazität ändern Der Weg, das zu tun, besteht im Grunde hier runter oder hier hoch zu gehen und wir werden die Opazität einstellen Okay? Also lassen wir es einfach so verblassen. Okay. Aber anstatt es so lang zu machen, wir dafür sorgen, dass es zehn Millisekunden dauert Wir machen es für eine Millisekunde. Aber aus irgendeinem Grund passiert es nicht. Okay, das ist zu langsam. Also, ich würde es gerne kürzer machen, also gebe ich ihm einfach eine Millisekunde, das sind zehn, und dann können Sie sehen, dass es fast augenblicklich abläuft, und als zusätzliche Maßnahme können wir das mit dem Diagramm machen , und dadurch wird es noch schneller verschwinden machen , und dadurch wird Okay? Also jetzt haben wir das. Was ist, wenn wir dieses Element kopieren und einfügen und es zu 25% machen, okay? Und dann nehmen wir es voran und geben ihm eine weitere Opazität, aber es wird eingeblendet, und es dauert auch zehn Millisekunden Schauen wir uns also an, wie es aussieht. Lassen Sie uns diese Blende also nach außen verlagern. Also, wie du siehst, sieht es nicht gut aus, weil sie untereinander liegen. Das stellt mehr oder weniger ein Problem für uns dar, aber es ist nicht so problematisch, um ehrlich zu sein. Sie werden diese zusammen angehen, und Sie werden sie einfach in einen Rahmen setzen. Also Rahmenauswahl, und dann werden Sie sie direkt voreinander platzieren , direkt übereinander und Sie werden sie einfach so platzieren. Jetzt kommen wir zu diesen Zahlen und stellen sicher, dass sie alle nach rechts ausgerichtet sind. Und dann fügen wir eine weitere hinzu und nennen es 64%. Und dann fügen wir noch eins hinzu und nennen es 80%, und dann werden wir 97% haben. Ich weiß es nicht. Ich gebe nur ein paar Zufallszahlen ein und dann gehen wir zurück und ordnen sie einfach richtig an. So sollte es aussehen. Jetzt haben wir die ersten hier ausgerichtet. Dann schalten wir es um, bringen das da hin, das da hin. Eigentlich sollte das auch hier sein. Sie werden alles ein bisschen weiter verschieben. Ordnung. Wir haben die Titel geändert, aber wir haben den Inhalt nicht wirklich geändert, also müssen wir uns darum kümmern. Ich ändere gerade den Inhalt. Man kann es also nicht sehen, aber oft muss man Dinge blind machen. Sie klicken einfach auf das, was Sie ändern möchten. Sie klicken auf Enter und können dann den Text ändern. Lassen Sie uns jetzt sehen. Es ist korrekt. Ich werde nur ein bisschen mehr Platz nehmen, damit wir mehr Spaß mit ihnen haben können. Und dann werden wir versuchen, sie richtig auszurichten, was eine Herausforderung sein wird. Was wir tun können, ist, dass ich es vielleicht kürzen kann. Wenn ich das wähle, kann ich versuchen, es zu schneiden, aber es schneidet nicht. Sie können es einfach so ziehen und dann exakt ausrichten. Das macht die Dinge einfach viel einfacher. Halten Sie es einfach, bringen Sie es und richten Sie es genau darunter aus, und schon kann es losgehen. Gehen Sie jetzt zum nächsten Opfer über, halten Sie es fest, bringen Sie es zurück. Und dann lassen wir es einfach viel später oder gar nicht verschwinden. Ordnung. Also lass uns jetzt sehen. Okay, perfekt. Jetzt scheint es zu funktionieren. Wir müssen nur die Animationen zur Größenänderung die Animationen zur Größenänderung so ändern, dass sie auch gleichzeitig erscheinen. Also lass uns sehen. Also dieser hier, zum Beispiel, wir haben diese 25%. Das sollte viel mehr sein, also geben wir ihm einen Betrag von oder sogar ein bisschen mehr. Gib ihm hier noch einen. Hört sich gut an. Und der letzte hier. Dieser wird ein bisschen mehr sein. Schauen wir es uns jetzt an. Schauen wir uns an, wie es aussieht. Vielleicht möchte ich sie alle etwas nach hinten verschieben, damit sie animiert werden alle etwas nach hinten verschieben, damit sie können, bevor sich können, bevor sich die Zahlen ändern. Schauen wir uns nun an, wie es vorher aussah. Ich glaube, vorher war es schöner. Jetzt sieht es so aus, als hätte es eine Verzögerung, aber so ist es perfekt Großartig. Jetzt, wo wir das nach dieser Animation haben, wird es zu Ende gehen. Normalerweise würde ich empfehlen, dass Sie ein Fenster mit der Meldung haben , dass alle Dateien übertragen wurden. Alles ist gut. Aber das tun Unternehmen nicht immer. Oft enden sie damit, einfach etwas zu sagen. Was wir tun werden, ist, dass wir das tun werden. Wir werden den Hinweisen dieser Unternehmen folgen, aber nur, um diese Lektion kurz zu halten. Jetzt wähle ich gesamten Frame aus und gebe ihm die gleichen Animationen wie zuvor, aber sie werden alle gewissermaßen umgekehrt Schauen wir es uns also an. Anstatt nach oben zu skalieren, wird es nach außen skaliert. Anstatt einzublenden, wird es ausgeblendet. Und anstatt reinzurutschen, wird es herausrutschen Und das bringen wir her. Lass uns sehen, wie es aussieht. Oder wir bringen es zurück. Da haben wir's. In Ordnung. Nun, das Einzige, was wir an dieser Stelle anpassen müssen , ist die Lockerung, weil sie jetzt in keiner Weise eine sehr effiziente Lockerung Wählen wir sie also einfach alle aus und wir werden sagen, lockere Anstatt zu lockern, was wir hatten, werden wir in dieser Zeit vielleicht lockerer Mal sehen, wie es aussieht, oder vielleicht werden wir es etwas lockerer angehen. Mal sehen, wie das aussieht. Sieht ein bisschen besser aus. Ich werde sehen, was wir mit der Undurchsichtigkeit machen können. Versuchen wir es noch einmal, lockerer zu werden. Ich finde, das sieht viel schöner aus. Ordnung. Das sieht echt nett aus. Eine Sache, die uns fehlt, nämlich dieser Teil, der uns sagt, was zu diesem Zeitpunkt vor sich geht. Ich würde das gerne ein bisschen ändern, es ein bisschen schöner machen Ich möchte das so machen, dass ich zu diesem Textfeld komme und es auch einrahmen werde Ich werde es kopieren und erneut einfügen, genau wie wir es zuvor getan haben, aber nicht jetzt, ich werde es animieren. Bei dieser Animation wird es im Grunde um Opazität gehen. Also wird sie verblassen. Es wird von rechts reinrutschen. Wir werden es auch sehr minimal machen. Mal sehen, wie es jetzt aussieht. Das ist wirklich nett. Lassen wir es uns etwas ruhiger angehen. Die Position ist ein bisschen zu viel. Ich werde 20 machen. In Ordnung. Das sieht echt nett aus. Dann gebe ich ihm das Gegenteil. Das genaue Gegenteil. Kopiere das, füge es ein und ich werde es hier machen, wenn es sich bewegt. Also lass uns das einfach wieder hier hinstellen. Wir werden es ganz am Anfang platzieren. Und dann wird es sich hier ändern. Wie ich schon sagte, es wird ausgeblendet und es wird ausgeblendet und es wird vielleicht links sein. Lass uns sehen. In Ordnung. Also haben wir es einfach oben links gemacht. Es sollte gleich links sein. Ordnung. Und lassen Sie uns versuchen, Ease in statt Ease Out zu machen, ob es dadurch besser wird. Also werde ich es einfach zum Liner machen. Ja, es sieht viel besser aus, um ehrlich zu sein. Vielleicht lässt es zu viel nach, aber mal sehen. Vielleicht war das nicht in Ordnung. Vielleicht mach es ein bisschen schneller. Okay, das sieht ziemlich gut aus. Also, wir werden diese Datei kopieren und einfügen und dann werden wir sie genau hierher verschieben, ein bisschen davor platzieren. Und wir werden ihr einen anderen Text geben. Also bereiten wir zuerst Dateien vor und komprimieren dann Dateien und kopieren und einfügen, aber nicht von hier, sondern von hier. Dann werden wir es verschieben. Wir werden es hier hinstellen. Dann sagen wir, Daten übertragen und hier wird es auch etwas bewirken. Wie gesagt, kopiere es, füge es und bring es hierher, und dann können wir es hier ein wenig ausblenden. Wir wollen eigentlich nicht, dass sie sich überschneiden, so wie hier. Für die letzte Animation werden wir sie dann hierher bringen. Und wir werden es hier ausblenden lassen. Perfekt, einfach so. Dann werden wir fertig schreiben. Dann schauen wir uns an, wie es von Anfang an aussieht . Okay, wirklich, wirklich, wirklich so, wie es jetzt aussieht. Mein einziges Problem damit, um ehrlich zu sein, ist, dass es ein bisschen zu schnell geht. Wir können versuchen, das in Ordnung zu bringen, aber dafür ist es vielleicht etwas zu spät, aber lassen Sie uns sehen, was wir vorerst tun können. In Ordnung. Okay, jetzt haben wir das. Es kann ein bisschen kompliziert sein all diesen Dingen zurechtzufinden, aber versuchen Sie, sich nicht zu viele Gedanken darüber zu machen. Also werde ich sie einfach herbringen. Also lass uns jetzt sehen. Nett. Okay, ich denke, das könnte reichen. Lass uns jetzt sehen. Es ist nicht zu 100% konsistent, und ich denke, wir haben am Anfang mit Sicherheit eine Verzögerung. Wir sollten anfangen, Dateien vorzubereiten. Wir sollten das vielleicht ein bisschen korrigieren. Das wäre so gar nicht falsch. Das ist also das Ergebnis, und ich denke, wir haben großartige Arbeit geleistet. Die Idee ist, dass wir eine Animation machen , die nicht nur zufällig ist, sondern auch nicht nur hübsch ist, auch wenn sie meiner Meinung nach hübsch ist . Es ist auch durchdacht Es steckt auch eine richtige UX dahinter, einige richtige Überlegungen Und das ist es wirklich, was so etwas reich an Inhalt, Tiefe und Unbrauchbarkeit macht so etwas reich an Inhalt, Tiefe und Unbrauchbarkeit Und das ist der springende Punkt. Also ich hoffe, du hast etwas daraus gelernt , mach weiter und probiere es selbst aus, was dir einfällt. Vielen Dank fürs Zuhören Wir sehen uns in der nächsten Lektion. 18. Schulungsprojekt: Erstellen einer eigenen animierten Benutzeroberfläche: Und jetzt ist es an der Zeit, dass Sie Ihre eigene animierte Oberfläche erstellen . Für dieses Kursprojekt erstellen und animieren Sie mithilfe der Techniken, die Sie in diesem Kurs gelernt haben, eine kleine Benutzeroberfläche oder Interaktion Sie in diesem Kurs gelernt haben Sie können für dieses Projekt jede Art von Oberfläche oder Animation wählen für dieses Projekt jede Art von Oberfläche oder Animation Dies kann ein Bildschirm einer mobilen App, ein Website-Bereich, eine Dashboard-Komponente oder eine einfache Landingpage-Animation sein. Es ist deine Wahl. Gestalten Sie zunächst Ihre Benutzeroberfläche und organisieren Sie Ihre Ebenen richtig. Und erwecken Sie es dann mit Animationen zum Leben , die sich auf Position, Skalierung und Opazität beziehen . Achten Sie darauf, Timing und Easing zu Ihrem Vorteil zu nutzen , um ihm ein professionelleres Aussehen und einen gewissen Charakter zu verleihen ein professionelleres Aussehen und einen gewissen Denken Sie daran, dass das Ziel hier nicht darin besteht, die komplexeste Animation zu erstellen , die es je gegeben hat Versuchen Sie stattdessen, eine saubere Animation zu erstellen , die das Benutzererlebnis verbessert und gleichzeitig bewusst, flüssig und professionell bleibt Wenn du fertig bist, exportiere deine Animation als Geschenk oder Video und lade sie in das Projekt Guild Zusammen mit dem Video kannst du eine kurze Beschreibung hinzufügen, kannst du eine kurze Beschreibung hinzufügen was du gemacht hast, wie du es erstellt hast, welche Bewegungstechniken du für diese Animation verwendet hast und wie du glaubst, dass diese Benutzererfahrung verbessert wurde. 19. Wir gratulieren!Was kommt als Nächstes?: Herzlichen Glückwunsch zum Abschluss des Kurses. Jetzt haben Sie gelernt, wie Sie statisches Benutzeroberflächendesign in etwas Interaktiveres und Intuitiveres umwandeln in etwas Interaktiveres und Intuitiveres können, das die Benutzererfahrung verbessert. Figma Motion and Motion Design geht es im Allgemeinen nicht darum, Dinge bringen und schön und glänzend aussehen zu lassen, auch wenn das ein großes Plus ist, sondern es geht darum, den Benutzer anzuleiten, Feedback zu vermitteln und Erlebnisse zu schaffen, die im Allgemeinen angenehm und intuitiv sind Sie, sich beim Entwerfen und Lernen Versuchen Sie, sich beim Entwerfen und Lernen auf die Apps und Websites zu konzentrieren , die Sie täglich verwenden und verstehen Sie, wie sie Animationen verwenden und nutzen, die durchdacht, intuitiv und bewusst sind , sodass Sie als Benutzer angeleitet und Ihre Benutzerfreundlichkeit verbessert werden. Und falls Sie es noch nicht getan haben, fügen Sie Ihre Projekte bitte der Projektgalerie hinzu Ich würde wirklich gerne sehen, welche kreativen interaktiven Animationen ihr euch ausgedacht habt wie immer. Wenn euch dieser Kurs gefallen hat, würde ich mich sehr freuen, wenn ihr eine Bewertung hinterlassen Feedback von euch zu haben, hilft uns immer in Zukunft bessere Inhalte für euch zu verbessern und zu erstellen, und es hilft auch anderen Designern, unseren Kurs zu entdecken. Vielen Dank, dass ihr zu mir gekommen seid. Wir sehen uns im nächsten Kurs.