So animierst du eine Skizze mit Principle | Dennis Muthuri | Skillshare
Drawer
Suchen

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

So animierst du eine Skizze mit Principle

teacher avatar Dennis Muthuri, UI Designer, UX Lover and Saxophonist

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Über den Kurs

      0:30

    • 2.

      Erste Vorbereitung für die Kurse in der Unterricht: Materialien

      0:34

    • 3.

      Vorbereiten von Assets zum Import auf Prinzips

      3:34

    • 4.

      In den Prinzipien importieren

      5:27

    • 5.

      Unsere erste Animation: Die Schaltfläche

      7:57

    • 6.

      Letzte Animation: Die Option

      6:14

    • 7.

      Wiederverwendbare Animationen mit Komponenten und Schließen

      5:05

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

561

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Über den Kurs

In diesem Kurs lernst du, wie du eine Benutzeroberfläche hinzufügst, die mit a in Skizze entworfen wurde. Es ist perfekt für alle Designer:innen, die ihre UI mit Skizze erstellst und ihre Designs hinzufügen möchtest.

Die Vorkenntnisse im Bereich Principle in der Zeit sind die beiden Vorkenntnisse erforderlich, um den Kurs zu nutzen. Du musst dich nur vor dem Einsatz in der App auf deinen Computer herunterladen. Gehe zu http://principleformac.com/ und klicke auf die Schaltfläche zum Herunterladen

Fertigkeiten, die du erlangen

Du lernst Folgendes:

  • Vorbereitung deiner Skizze UI auf die Animation im Prototypen.
  • Importiere deine Skizzendatei in den Prototypen.
  • Verwende Formen und das shapes, auf deiner UI.
  • So verwendest du Komponenten zur Erstellung wiederverwendbarer Animationen

Projekt

Du animierst eine bereits bestehende Skizze UI und erstellst einen Effekt ähnlich der pre-existing auf der Postfach der App in der inbox

Triff deine:n Kursleiter:in

Teacher Profile Image

Dennis Muthuri

UI Designer, UX Lover and Saxophonist

Kursleiter:in

Based in Nairobi, Kenya, Dennis Muthuri is a problem solver at heart and is attracted to great design which solves problems as well as pushes the limits of what's possible.

As a consultant, he's worked with startups and consulting agencies such as Sky.Garden and ihub for most of his career, helping their teams craft products which deliver customer value contribute to their bottom line. 

He'd like to spend the next part of his work life understanding how to craft relevant user interfaces and awesome UI interactions while sharing his knowledge along the way.

You can find him playing the guitar and saxophone when he gets bored of the monitor.

Vollständiges Profil ansehen

Level: Beginner

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Über den Kurs: Ich tue das für dich. Ich Designer mit Sitz in Kenia heute werde ich Sie durch, wie zu jeder gemacht eine Skizze mit dem Prinzip Slash ist am besten geeignet für Designer, die Drop dort skizziert Sie weise und wollen sie auf die nächste Ebene zu nehmen. Schlechte Dinge in Bewegung und Interaktion. Keine Frittiererfahrungen. Schwarzes Prinzip, um diese Klasse zu nehmen. Das einzige, was Sie tun müssen, ist, gehen Sie zu dieser Prinzip-Format-Website unten , um im Klassenzimmer zu sehen. 2. Erste Vorbereitung für die Kurse in der Unterricht: Materialien: Um einfach mitzuverfolgen, empfehle ich, den angehängten Dateirichter herunterzuladen, der im Projektabschnitt dieser Klasse zugewiesen ist. Installieren Sie die beiden Formulartypen und öffnen Sie die Skizzendatei, um das zu sein, was ich auf dem Bildschirm sehe. Dies ist natürlich optional . Ihre mehr als frei, Ihre eigene Skizze für so vollständige Offenlegung der ursprünglichen Skizze Täler von Herrn Stefan zu verwenden und wurde uns in Schwierigkeiten zur Verfügung gestellt. Ich mochte es, weil ich es einfach genug fand, um die Grundlagen der Animation mit dem Prinzip nach oben zu demonstrieren . also die nächste Klasse sehen, erklären wir, wie Skizzendateien für den Export nach Prinzip vorbereitet werden. 3. Vorbereiten von Assets zum Import auf Prinzips: Also, bevor wir unsere Skizze importieren fällt in Principal dort ein paar Dinge, die wir in unserem Skizzenabschnitt nageln wollen . Und das erste, was ist die Benennung von der Ausgabe. Du gibst dir Blutflecken auf, die mir kalt sind. Mitte gesehen. Also, wenn Sie ein Sie haben, flog ich in auf Boarding Fluid wie Feind könnte alle Bildschirme haben wollen , die damit in einem Aufwärtsbildschirme einen Deal mit anmelden in einem anderen Boot und so weiter und so weiter. Eine andere Sache ist die Gruppierung unserer Boote, die Sie importieren möchten. Hab das auf einer Seite. Wiederholen Sie das noch einmal. Stellen Sie sicher, dass Sie über alle Flughäfen verfügen, die Sie importieren möchten. Zwei Principal auf einer Seite. Dies ist wirklich wichtig und wird Ihnen eine Menge Zeit beim Ziehen Ihrer Haare sparen. Stellen Sie sicher, dass alle von ihnen ich auf einer Seite. Wenn Sie, sagen wir, eine Seite, weitere zusätzliche Seite hier, haben Sie eine Seite zu, und Sie haben eine andere Ausgabe hier. Es wird nicht importiert, wenn die Seite darauf die Äpfel auf der Seite einer der Äpfel ausgewählt hat, die im Prinzip importiert werden . Eine andere Sache würde sich niederknien wollen. Sie sicher, dass die Szenen, die in separaten Gruppierungen in der Ausgabe animiert werden sollen, in der Ausgabe vorhanden sind? Also haben Sie Regionalstaat in seiner eigenen Gruppierung Ihren Übergangszustand in seiner eigenen Gruppe und Ihren Endzustand in seiner eigenen Gruppe. Dies wird es einfacher, wenn Sie Ihre Dateien prinzipiell importieren. Bitte, bitte, organisieren Sie Ihre Vermögenswerte so, um sich in Zukunft Zeit zu sparen. Eine andere Sache ist dies Sie möchten vielleicht alle Zustände Ihrer Animation entwerfen . Nun, in so viel wie wir nur den ursprünglichen Zustand haben können und irgendwie visualisieren, wie das Ende aussehen wird . Es wird uns immer einen Vorteil geben, wenn wir unsere Übergangszustände und unsere Endzustände mit Also eine Sache, die Sie verstehen müssen, ist der Übergang und der Endzustand wird Ihnen definitiv einen Vorteil geben. Sie sind nicht erforderlich. Kann auch Ihren regionalen Staat haben und importieren, dass. Dann gehen Sie den Rest im Prinzip. Aber nach, wenn ich Sie sie laut zeichnen, sie leidet einen schönen Bezugspunkt. Die letzte Sache, von der wir gehen werden, ist, dass Sie Ihr Vermögen vernünftig benennen müssen , so dass Sie sich auf sie beziehen können. Im Prinzip empfehle ich normalerweise, dies zu tun. Nennen Sie sie einfach so, wie Sie sie im wirklichen Leben nennen würden. Als ich das Vermögen am Anfang bekam, sahen sie so aus. Also Gruppe zu Oval, plus importierte Leah. Wenn wir das in den Grundsatz importieren, gibt es keine Möglichkeit zu wissen, was. Aber wenn wir sie wie diese Aktion umbenennen, aber auf der Antwort Aber auf den Share-Button wie Butter Boda, anstatt etwas zufällig zu sehen, was der Buddha hier genannt wird? Dieses kalte Rechteck sieben Rechteck sieben wird nicht heiraten, wenn wir nach Prinzip importiert haben . Es wird uns eine harte Zeit geben. Also eine Sache, die Sie sicherstellen wollen, ist, dass Ihre Zustände und alle Elemente innerhalb einer gegebenen vernünftigen Namen, wie Sie sie im wirklichen Leben nennen. Also für diejenigen von Ihnen wissen nicht, dass die Dateien früher und die folgenden zusammen, ich möchte, dass Sie etwas Kleines tun, um mich zu nennen. Sie sehen den Ordner Gruppe einfach umbenennen jeden einzelnen Ordner dort zu viel. Die Übergangs-Zustandsgruppe. Es ist sehr einfach, und wenn Sie in Schwierigkeiten geraten. Sie können immer im Projektabschnitt unten kommentieren, und ich werde bereit sein, mit diesen Tipps zu helfen. Das ist die nächste Lektion, in der wir diesen Fang während in Prinzen importieren. 4. In den Prinzipien importieren: Hi, Leute. Willkommen zurück in der Klasse. Heute werden wir uns damit beschäftigen, wie man diese spezielle Skizzendatei ins Prinzip importiert. Und das erste, was wir tun werden, ist, unsere Direktorin zu öffnen. Ja, ja. Also das erste, was Sie hier sehen sollten, ist, lassen Sie mich einfach minimieren, dass ein nicht gut ist. Du bekommst einen leeren Außenbord. Sie haben einen vorherigen Bildschirm hier drüben. Also alles, was Sie hier tun, können Sie in der Lage sein, eine Vorschau hier. Der vorherige Bildschirm kommt auch mit einer Rückkehr zum Anfang der Animation oder zum ersten Ausgang. Also, wenn Sie C A nicht haben würde dann drücken Befehl die zu duplizieren. Wenn du oben bist und sie miteinander verbunden hast, kannst du das sehen und er bringt es zurück in ihren ersten Zustand. Die andere Sache ausgegeben Notiz ist prinzipiell gibt Ihnen die Möglichkeit, mit Formen zu arbeiten. Das ist ein Rechteck. Und wie Sie sehen können, erscheint er in einer Vorschau. Und wenn Sie es einfach verschieben, ist etwas, was Sie bemerken, das aktuelle Atwood, das ISO eins ausgewählt hat, das sich derzeit im Vorschaufenster befindet. Also, falls Sie jemals ein Szenario haben, in dem Sie nichts sehen, das Sie gerade auf dieser Seite des Bildschirms bearbeitet haben, das hier erscheint. Ich weiß nur, dass es wahrscheinlich ist, dass Sie nicht ausgewählt haben, dass ich oben würde. So können Sie mit Shapes arbeiten. Sie können mit Text arbeiten. jedoch nicht, Text empfehlen wirjedoch nicht,dass Sie mit Text arbeiten, wenn Sie ein Bild Text möchten. So dass Sie sogar ein Szenario auf Anime-Text Verwenden Sie einfach etwas wie Adobe nach Effekten. Principal behandelt Textanimationen nicht so gut aus meiner bisherigen Erfahrung und auch aus der Erfahrung der Hauptgemeinschaft. Verwenden Sie also so etwas wie nach Effekten dafür. Ich werde das einfach löschen. Auch, wirklich, das tun. So haben Sie nur einen Ausgang. Also, um eine Datei aus der Skizze zu importieren, kick einfach den Import und was passiert ist, ist es bereits vor der Auswahl der Datei, die geöffnet ist? Und genauer gesagt, wenn wir zurück zu ah, Skizzenmeile, wird es tatsächlich diese Datei auswählen und es wird diese Seite importieren. Das ist im vorherigen Tutorial. Ich sage, dass für den Fall, wenn Sie irgendwelche Kunstboote haben, die importiert werden müssen, sie auf einer Seite haben. Was wir also tun werden, ist im Prinzip zurückzukehren. Was passiert, ist das? Also dieser zwei-x-Wert ist, was ist Qualitätswissenschaft, wollten Sie die Restaurants rendern? Leah's Also eines der Dinge, die Sie verstehen müssen, ist, dass, wenn Sie Ihre Assets ins Prinzip importieren , sie pasteurisiert werden, was bedeutet, dass alles, was ein Text in der Skizze war, jetzt zu einem Bild wird und Sie haben keine Vektorbilder. Eigentlich ist das das Ding. Sie haben grundsätzlich keine Vektorbilder, anders als die, wenn Sie ein Rektal auswählen, wird das prinzipiell ein Vektorbild sein. Aber wenn du es von anderswo mitbringst, wird das Ruhe entstehen. Jetzt sagt es Ihnen, die Qualität, bei der er ein X wollte, ist für die normale Betrachtung, und ich bevorzuge Zehenarbeiten, so dass dieses bestimmte Pixelproblem am besten für die Richtung geeignet ist , bitte. Aber ich habe wirklich aufgeregt, bevor ich die Qualität mag, die Sie verwenden können. Drei. Führen Sie einen Strand mehr Detail von der Skizze, aber für mich zu x macht es einfach in Ordnung. Also lasst uns auf unseren Import klicken. Also, wenn ich das gerade in die Mitte verschoben, so dass der Moment, da alle von ihnen in einem an Bord importiert wurden, alle von ihnen gehen auf dem vorherigen Bildschirm erscheinen. Wenn wir nur wollen, drücken Sie Befehl als Wähler verschieben, wie ich wählen, und ich werde diese außerhalb der Ausgabe zu bewegen sagt, Sie können sehen, dass verschwunden und dann werde ich auf der Szene nach oben aufgerichtet reinigen und ich werde diese gut ändern. Also, wird es hier sehen? Wir haben einen schön aussehenden Fitch da drüben. Nur um zu bestätigen, was ich gesagt habe, wenn Sie sich dieses besondere Gut ansehen, wie Sie sehen können, können wir es nicht bearbeiten. Es ist angezogen, hat seinen nicht Regisseur angezogen. Das gleiche, was die große Tante Effekt, und Sie können sehen, wo gute Benennung kommt in. Also sind wir nicht wirklich, wirklich verwirrt. Damit haben wir unseren Zeitplan prinzipiell wichtig und Sie können es hier drüben ansehen. Sie haben gelernt, wie Sie Ihre Skizzendatei in Principal importieren, wie Sie eine nicht bode erstellen, wie Sie die vorherige Creme verwenden. Und wir werden anfangen, daran zu arbeiten, wie wir diesen besonderen Kampf animieren können, um etwas zu ähneln , das unserem Endzustand nahe kommt. Wir sehen uns in der nächsten letzten 5. Unsere erste Animation: Die Schaltfläche: so hallo da. Willkommen zurück zu einer anderen Klasse, wie man eine Skizze animiert. Du verwende ich das Prinzip. Um die letzte Lektion zusammenzufassen, haben wir gelernt, wie man unsere Skizzendatei in den Principal importiert, bis man eine nicht gelangweilt, wie man Elemente wie das Rechteck und den Text verwendet. Warum sollten Sie sie benutzen? Das sollte ich nicht. Wir haben gelernt, dass es uns durch Klicken auf Importieren die Möglichkeit bietet, die offene Skizzendatei aus der Skizze zu importieren. Wir haben auch über die Qualität diskutiert, die Sie Ihre Restaurants Layer rendern möchten. Das und heute werden wir uns ansehen, wie man die eigentliche Animation durchführt. Also für heute wollen wir dieses besondere einen Boden animieren und es an diesem Ex haben es den Endzustand an diesem speziellen Boden, und wir werden nichts anderes für jetzt berühren, auch diese Symbole. Was wir also tun werden, ist Foster wird damit beginnen, dieses Kunstwerk zu duplizieren. Wählen Sie also Szene einrichten und drücken Sie den Befehl D , der eine neue Ausgabe erzeugen würde. Und wie Sie sehen können, ist es genau hier. Also wählen Sie einfach das Plus-Symbol auf der zweiten nach oben würde in der Tat, was ich auch tun werde ich nur nennen dies? Ich sage einfach Start-Status und ich nenne diesen Endzustand. Also im endgültigen Zustand, die Taste schießen, Das X-Symbol sollte tatsächlich um eine solche Anzahl von Grad gedreht haben. Dies ist also das Panel, dem Sie die Eigenschaften von den Elementen ändern können, die Sie auf dem Bildschirm sehen. Sie können die X -Eigenschaft bearbeiten. Warum, Wenn Sie auf das Etikett aus ihrer spezifischen Eigenschaft klicken, Sie können einfach zu ah zwei Position fahren oder diese Eigenschaft mit größerer Position ändern. Ich werde einfach alles dahin zurückgeben, wie es waas ist. Die Eigenschaft, die wir in diesem Fall animieren möchten, ist also der Winkel. Lassen Sie uns damit beginnen, es einfach zu drehen, und das ist 45 Grad kühl. Also, wenn wir hier rüber fahren, ist das unser Ausgangszustand. In unserem endgültigen Zustand werden Sie sehen, dass es reflektiert wird. Aber wie bekommen wir es, das tatsächlich zu animieren und es dahin zu übergehen? Wir brauchen ein Ereignis, dass es am besten reagiert, wenn Sie dies oben, soll es dieses Symbol auf dieses X-Symbol hier übergehen, also doppelklicken Sie auf die Aktionstaste und klicken Sie auf den Blitz-Button, um ein Ereignis hinzuzufügen. Also wählen Sie die obere Seite aus und halten Sie einfach an der Maus und ziehen Sie sie den ganzen Weg in den endgültigen Zustand, den Sie wollen. Also, wenn wir klicken, können Sie sehen, dass es tatsächlich animiert. Und wahrscheinlich ist es jetzt nicht so auffällig, denn die Grade, die irritierend waren, sind in so viel. Also, was ich tun werde, ist, dass ich das Plus-Symbol auswähle, und ich werde es wahrscheinlich ein bisschen mehr drehen, ähm, zu etwas. Mal sehen, wenn es das nächste Mal so aussieht, dass jemand 33 es ausgecheckt ist. So einfach ist es. Wenn Sie also auf den Pfeil klicken, können Sie tatsächlich sehen, dass Sie nicht die Option Zehe spielen mit der Lockerung und dem Timing off dieser Animation. Also sehen Sie, ich will, dass eine er ist aus Animation Tante schnell beginnt. Andi, dann und so lassen Sie uns sehen, wie Sie sehen können. Aber ich mag die Standardeinstellungen. Ich behalte das einfach. Aber nur damit Sie es wissen, können Sie diese besonderen Erleichterungen tatsächlich ändern. Sie können das Diagramm eine Suche verwenden, um solche zu erstellen, die eine benutzerdefinierte Bucht ist. Also gehen wir zurück auf die ursprüngliche Animation und ja, ähm, keine glatte, aber du bekommst die Idee. Gehen wir also zurück zu einem Standardwert. Ich mag, wie das funktioniert, wie das aussieht und eine Reihe von Dingen. Sagen wir also in dieser Animation, das ist Aktion. Aber richtig Und in diesem anderen Zustand, lassen Sie uns einfach diese Aktion aufrufen, aber weiter und lassen Sie uns dieses Plus-Symbol zwei nennen und sehen, was das Ergebnis sein wird. Wie Sie sehen können, animiert es nicht mehr, dass wir gewohnt waren, denn was passiert, ist, dass Ihre Ebenen in beiden nach außen auf die gleiche Weise benannt werden sollen . Damit die Animation für den Animationsschuh völlig erfolgreich ist, müssen alle Ihre Ebenen identisch sein und Sie können nicht einmal sehen, dass wir hier erzählt werden. Ja, wie Sie sehen können, indem Sie Leon sowohl auf Brettern, Aktionstaste plus Symbol und so weiter und so weiter animieren . Also, was wir brauchen, um in diesem speziellen Kunstboard zu haben? Wir müssen die Aktionstaste haben, da wir dort beginnen, dass der Startzustand Aktion Butter und Plus-Symbol im Endzustand ist, wird es nach einer Ebene namens Aktionstaste und plus Symbol Toe suchen. Anwenden des Übergangseffekts Also, wenn wir das wieder klicken, wird feststellen, dass es jetzt gut animiert. Also das andere, was wir tun wollen, ist, wenn Sie wieder auf das X klicken, muss es zurück gehen. Das ist also ziemlich einfach. Und was Sie tun, ist, klicken Sie einfach auf die Aktion klicken, aber wählen Sie Stopp und zeigte auf das Ziel, das wir wollen. Und wenn wir klicken, haben wir den Effekt, der einen endgültigen Zustand haben kann, und Sie können zwischen den Zuständen der Unterseite umschalten, was wir im Wesentlichen wollen. Bald in unserer nächsten Klasse, werden wir uns die Verwendung von Komponenten ansehen, so dass wir nicht für jeden einzelnen letzten Übergang einen neuen Außenborder erstellen müssen . Und es ist ein kurzer Schnitt, wie man Zeit beim Animieren sparen kann. Damit werde ich dir eine kleine Herausforderung stellen. Sie können ein weiteres Element auf dem Bildschirm hinzufügen und einfach versuchen, auf verschiedene Arten zu animieren. Sie können die Position dieser Flasche ändern, wahrscheinlich verschieben Sie sie von, sagen wir, haben die Position Startposition dort und sagen, die endgültige Position sollte hier sein. Und wenn ich das tue, wie Sie sehen können, wird es einfach dorthin verlegt. Also die Herausforderung, die ich Ihnen geben, ist einfach mit den verschiedenen Arten der Lockerung auf , dass spielen um mit den verschiedenen Arten von Effekten. Es ist sehr, sehr einfach und machen Sie sich mit ihnen vertraut, dass ich euch in der nächsten Klasse sehen werde. 6. Letzte Animation: Die Option: hallo. Über heute werden wir uns ansehen, wie diese drei Schaltflächen animiert werden können. Tut mir Leid. Wie man diese drei Schaltflächen animiert und haben sie von unter dem Plus-Button kommen und auf dieser Seite herausspringen Ähnlich wie wir die markierten im Übergang haben. Die Art und Weise, wie wir das tun werden, ist zuerst, wir brauchen jedes einzelne der Symbole eines Ursprungs. Die Idee sollte also sein, wenn ich darauf klicke, sollten sie unter dieser Schaltfläche herausspringen. Also dort vom Staat, das ist in dem ursprünglichen Zustand, den ich tun werde. Wir werden hier eine Abwechslung haben. Also werde ich tun, ist, dass ich das nur die Optionen ergreifen werde, die enthüllt und was ich tun werde . Ich werde es kopieren. Und ich werde das einfügen, und ich werde das hier verschieben. Ich werde das nur einreißen. Ok. Ehrfürchtig. Ich werde das vorerst ausschalten, weil wir das nicht in Aktion sehen müssen. Und wenn wir bemerkt haben, wenn Sie sich das letzte Mal für weniger 20 Fleisch erinnern , dann müssen sie tatsächlich gleich benannt werden. Also, im Finale, wo ist das? Ja, in den letzten Zuständen sind langweilig. Wir brauchen auch die gleichen Schichten auf der anderen Seite. Also werde ich zu diesem werde ich. Ich werde die aus der Sicht verstecken, und ich werde kopieren und Biest. Jep. Also, gleich nach dem Kopieren Einfügen, können wir jetzt beginnen, diese Zustände zu animieren und ich kann beginnen, diese Elemente unter dieser speziellen Schaltfläche neu anzuordnen . Also, jetzt nehme ich das einfach in dem Moment, in dem ich es einfach manuell mache. Oh, lass mich sie einfach hier hinzufügen, wenn du sie übereinander stapelst und sie oben stapelst und dann werde ich den Action-Button oben verschieben, so dass es auf ihnen sitzt und ich werde auch in der Tat, da wir bereits getan haben, werde ich das kopieren löschen. Eigentlich gibt es keine Notwendigkeit für diese Aktion, aber jetzt auch, löschen Sie die Aktionstaste und ja, da gehen wir. Es gibt also eine Sache, die wir ändern müssen. jedoch Dies liegtjedochbei einem Nullgrad-Winkel. - Ja. Also mal sehen. Ist irgendetwas genau nichts. Genauso wie erwartet. Wenn wir also animieren, wenn sie dies von hier nach hier klicken, werden also zwei Dinge passieren. Zuerst sollten wir den Action-Button auf das X-Symbol übergehen. Und die zweite Sache ist diese Icahn sollte auftauchen amüsant die Pfeiltasten, um sie einfach zu bewegen . Aber sie sollten tatsächlich auftauchen. Und das haben wir gerade genau ausgerichtet. Sie sollten also auch von unter dem Symbol kommen. Wenn wir also darauf klicken, werden diese auch herauskommen. Also das erste, was wir brauchen, um sicherzustellen, dass unsere Schichten tatsächlich den gleichen Namen. Und wie Sie sehen können, ist die Benennung anders. Das wird also nicht wirklich funktionieren. Also werde ich mir etwas Zeit nehmen und das aufräumen. Um dies nicht zu animieren, wird alles nur tun, wenn wir lange darauf drücken, ist das Standardereignis, das ausgewählt wird, ein Top. Also, wenn wir fallen, was passieren wird, ist gut, äh, aber es gibt eine Sache, die wir animieren müssen, und das ist das X-Symbol. Also lassen Sie uns einfach direkt in die Plus-Symbol stürzen, die jüngere Waas 133 und mit diesem Buh und wie wir es getan haben, obwohl wir bei Mädchen ein Top zurück hinzufügen werden. Und genau wie diese glatte Animation aller Icons direkt dort 7. Wiederverwendbare Animationen mit Komponenten und Schließen: Es gibt also eine Funktion, die im Prinzip Komponenten genannt wird, die uns die Möglichkeit gibt, wiederverwendbare Animationen zu erstellen . Also meine ich, solche Komponenten wie diese müssen im Wesentlichen nicht ständig einen ganzen Hintergrund hinter sich haben . Sie können dieses bestimmte Element einfach als eigene Komponente haben und nur von alleine animieren. Also, um eine Komponente oder angeblich darauf in eine Komponente zu erstellen, was wir tun werden, werde ich darauf klicken. Und wenn Sie Ihr eigenes Prinzip drei. Klicken Sie einfach auf die Create Component und das sollte Ihre Ebene in eine Komponente verschieben. Also der Grund, warum es diese Adresse hat, weil es ein Ereignis gibt, an das es bereits angeschlossen war , also wird es stattdessen gut gehen, na ja, berühren Sie es nicht. Wir brauchen es nicht mehr. Und gehen wir zurück zu der Instanz und was ich tun werde. Ich werde dies nehmen und bearbeiten Sie wählen Sie die Komponenten, die das Zahnrad-Symbol hat und klicken Sie auf Komponente bearbeiten, und ich werde eine neue Kunst erstellen würde, wo ich einfügen werde. Lassen Sie mich nur sicherstellen, dass sie aufstehen. Ok, die stehen an. Ich werde die Größe von diesem nach oben erhöhen. Lassen Sie mich davon duften und das auch zentrieren. Ok, also das Gleiche. Und wenn ich dort ausgewählt, weil Sie sehen können. Aber es scheint sich vorwärts zu bewegen. Das bedeutet also, dass es einen Teil davon gibt, der nicht ausgerichtet ist. Ja, das ist die Sache mit Animation. Sie müssen sicherstellen, dass sich das Chili so wenig wie möglich bewegt, um die statische zu erstellen. Ich fühle, dass wir nur ein bisschen mehr gewinnen wollen und dort waren. Okay, also nur für die Umbenennung, werde ich diese Optionen nennen. Ja. Wenn Sie also zur Instanz zurückkehren, können wir jetzt sehen, dass wir keine Beziehung dazu haben müssen. Klicken Sie hierauf. Und genau so brauchen wir keine zwei Zustände zu haben, besonders für kleine Komponenten wie die, die Sie über verschiedene Bildschirme animieren müssen . Benennen Sie Ihre Komponenten wie gewohntum. wie gewohnt Ja, das war's also. Und Sie können das löschen, würde. Es wird nicht mehr benutzt, und das war's. Sie haben also gelernt, wie Sie die Animationen ohne die Komponenten erstellen können. böse Zeh hat gelernt, wie die Komponenten hereinkommen können, damit Sie wiederverwendbare Animationen erstellen und Ihre Arbeit beschleunigen können. Grippe Also ermutige ich Sie auf jeden Fall, den nächsten Kurs zu überprüfen, den ich haben werde, tiefer in das Prinzip in Dinge wie Parallax-Effekte Scrollen, wie man verschiedene Ereignisse verwendet, um bekannte Animationen zu erstellen, die auf Dribble gefunden werden. Und ich ermutige Sie auf jeden Fall, allein zu bleiben. Abgesehen davon ermutige ich Sie, Ihr Projekt zu teilen, zu teilen, was Sie kommen, und ich werde sicher sein, es zu kommentieren. Damit habe ich einen schönen Tag und danke fürs Zuhören.