Motion-Design für UI-Designer:innen mit Principle für Mac

1. Willkommen beim Kurs!: Hallo und Bettina. Ich bin Lead Designer und lebt in Vancouver, ER. Ich arbeite mit User Experience und User Interface Design für Web-Anwendungen, und ich mache auch Motion Graphics für Erklär-Videos. In diesem Kulturkurs werde ich Ihnen beibringen, wie Sie Animationen für die Benutzeroberfläche erstellen und unterschreiben und diese Kurse für Sie. Ich Designer mit wenig oder keinen Hintergrund in Motion Graphics. Wir beginnen mit dem Gespräch über die Prinzipien der Animation und Best Practices für Interaktion , Design und für das Klassenprojekt wird eine Landing Page im Prinzip für Mac animieren. Sie benötigen einen Mac für diese Klasse, und am Ende dieses Kurses können Sie eine Zielseite mit Animationen erstellen, die vertikal und horizontal ist. Scrollungseffekte übertrieben Übergänge und Lippen. So können Sie Bewegungszeichen auf jede Interphase anwenden, an der Sie arbeiten, sowohl für Web als auch für Mobilgeräte. Fangen wir an 2. Lernziele: Hallo und willkommen zurück zu den Motion Graphics für Sie. Ich entwerfe Klasse in diesem Video, Ich werde die Lernziele zu erklären. Diese Klasse ist in zwei Abschnitte unterteilt. Zuerst werden wir über die Zukunft der Animation sprechen und was gute Animation ausmacht. Dann werden wir die Wut in die Praxis umsetzen und eine Landing Page animieren. Am Ende dieser Klasse werden Sie in der Lage sein, die Prinzipien der Animation zu verstehen und wie Sie diese für Bewegung in Ihnen verwenden können , die ich entwerfe. Sie werden lernen, wie Sie die Principal apt verwenden, um vertikale und horizontale Scroll-Effekte zu erstellen , um Prototypen über Effekte und Interaktionen zu erstellen, mit mehreren Bildschirmen zu arbeiten, um Übergänge zu erstellen und musste Ihren Prototyp exportieren und teilen . Für das Klassenprojekt erhalten Sie eine Vorlage einer Landingpage, die mit Fig MMA erstellt wurde. Also lasst uns anfangen. 3. Animation verstehen: Okay, jetzt fangen wir damit an, zu verstehen. Animation in diesem Abschnitt wird über die Prinzipien der Animation sprechen und wie wir einige dieser Prinzipien in Bewegung übersetzen können . Sie I design Die 12 Prinzipien der Animation wurden von Disney-Animatoren alle Johnston und Frank Thomas in ihrem Buch The Evolution of Life eingeführt . Das ist so ziemlich die Bibel eines jeden Judy und drei D Animators da draußen. Es gibt eine Menge Ressource ist online zu diesem Thema, aber heute werde ich Ihnen zeigen, die Beispiele auf dieser Website gezeigt Die 12 Prinzipien der Animation, dass tumbler dot com. Lassen Sie uns schnell überprüfen, was sind diese Prinzipien? Nummer eins, Squatch und Stretch. Dieses Prinzip zielt darauf ab, das Geschwindigkeits- und Gewichtsofenelement zu betonen. Nummer zwei Vorfreude. Dies ist, um das Publikum auf Untätigkeit vorzubereiten. Es ist eine Bewegung, die beginnt, bevor die Hauptanimation stattfindet. Nummer drei Inszenierung. Dies ist eine Präsentation eines Objekts in einer Weise, die klar ist. Dies ermöglicht es dem Publikum, sich auf das Objekt zu konzentrieren und Zerstörung zu vermeiden. Dies ist die meisten Übergabe in der Benutzeroberfläche. Wenn Sie über den Eingang einer Animation nachdenken, geschieht dies in der Mitte des Bildschirms? oder ist es Stern, bevor das Objekt auf dem Bildschirm erscheint? In beiden Fällen ist es wichtig, dass Sie sicherstellen, dass der Benutzer versteht, was vor sich geht. Nummer vier geradeaus und postete Post die Luft zwei verschiedene Ansätze der Animation geradeaus. Szenen werden Frame für Frame animiert, während Post-Gegen-Szenen, beginnen mit den Schlüsselposen und gehen dann zurück, um die Frames dazwischen zu fühlen. Dies wird nützlicher, wenn Animationen von Illustrationen oder Symbolen Nummer fünf folgen und sich überlappende Aktionen. Das ist in gewisser Weise. Das Gegenteil von Antizipation ist die Animation, die nach der Hauptaktion passiert. , Dieses Prinzip zielt darauf ab,dem Verlust der Physik zu folgen, um Objekte natürlicher aussehen zu lassen, als ob sie ein Gefühl von Gewicht oder Volumen haben. Nummer sechs verlangsamt und verlangsamt das Streit Lockerung, und er ist raus, und Sie werden dieses Prinzip viel verwenden. In Motion Design und digitale Animation. Die Leichtigkeit in kann leicht mit einer belebten Kurve angepasst werden, und wir gehen über und detailliertere mit Beginn Animierung mit Prinzip Nummer sieben Bögen. So folgen die natürlichsten Bewegungen einer Kurvenbewegung, die ohne Kurven animiert wird, normalerweise unnatürlich und weniger flüssig aussehen, so dass Bogenhaut nützlich ist, ging animierte Schriftrollen oder fegte für einfaches Fegen durch Autos Links und rechts. Nummer acht. Sekundäre Aktion. Eine sekundäre Aktion betont in der Regel die Hauptaktion. Im Fall von Ihnen könnte ich diese nützlich sein, ging animieren Schieberegler oder Programme, Balken oder jede andere Komponente, die die Hauptinteraktion klarer machen wird. Nummer neun Timing in der Animation Dieses Prinzip bezieht sich auf die Anzahl der Frames oder Zeichnungen zwischen Beginn und Ende der Untätigkeit. Mehr Frames waren niedrig. Die Aktion endlose Frames wird es schnell aussehen lassen. Aber in Bezug auf die Benutzerinterphasen, um, Geschwindigkeit wird wichtiger, wenn es um Mikro- und Mikroanimationen geht. Nummer 10 Übertreibung. Dies verbessert die Aktion, macht es jedoch deutlicher und vermeidet Animationen, um langweilig zu wirken. So zum Beispiel Dinge nützlich sein, können zum Beispiel Dinge nützlich sein,wenn sie dem Benutzer in einem öffentlichen Fenster Feedback für montiert zur Verfügung stellen und ich komme wie eine Benachrichtigungsglocke. Nummer 11 dumme Zeichnungen in Animation. Solar Deutsche bedeutet, den Objekten in der Szene Volumen und Gewicht hinzuzufügen und der Szene einen dreidimensionalen Raum zu geben. Also in Ihnen, ich können wir dies als die Höhe der Höhe einer Komponente interpretieren und wie man die Hierarchie der Elemente und Nummer 12 deutlich zeigt , was etwas interessant und mit Charakter aussehen lässt. Dies wird Ihr Bewegungsstil sein. Dies in gewisser Weise eine ist in gewisser Weise eineKombination zwischen den Einschränkungen im Motion-Design und der Persönlichkeit der Marke mit der Sie arbeiten. 4. Grundsätze der Animation: Jetzt, da wir mit den Prinzipien der Animation vertraut sind, lassen Sie uns schnell eine Zusammenfassung machen, welche Prinzipien auf Interaktionsdesign angewendet werden können, damit Squash und Stretch auf I Kegel und Illustrationen angewendet werden können. Staging kann auf Schnittstelle angewendet werden, die zugewiesen ist, um ein Objekt auf dem Bildschirm deutlich anzuzeigen. Folgen Sie durch. Eine überlappende Aktion kann verwendet werden, wenn mehrere Komponenten animiert werden, und auch vier Ich kommt und Illustrationen, die verlangsamen und verlangsamen, können sehr nützlich sein, um Ihre Animationen zu glätten . Und das ist wahrscheinlich das Prinzip, das Sie verwenden werden Die meisten Bögen sind gut für Symbole und Illustrationen und vielleicht einige Arten von Interaktionsdesigns, die Sie animieren können, mit denen Sie einige Kurven erstellen können. Timing ist interessant, denn normalerweise werden Sie, wenn Sie über Animation nachdenken, über Frames nachdenken. jedoch Wenn esjedochum Bewegung für die Benutzeroberfläche geht, werden Sie darüber nachdenken, wie lange eine Animation in Millisekunden ist, und wir werden in einem späteren Video ausführlicher darüber sprechen und schließlich ansprechen. Das ist also dein Stil und die Persönlichkeit über deine Animationen. Gehen wir nun zum nächsten Video über, wo ich über die wichtigsten Dinge und Einschränkungen sprechen werde, die spezifisch sind, um Sie zu bewegen. Ich entwerfen 5. Die Illusion einer Benutzeroberfläche: jetzt sind Sie mit den 12. Prinzipien der Animation vertraut. Lassen Sie uns über die Prinzipien der Bewegung sprechen, die für Sie entwickelt wurden. Ich in den folgenden Videos werde ich über die wichtigsten Dinge zu beachten, wenn Sie eine Benutzeroberfläche animieren . Lassen Sie uns über die Prinzipien des Motion Design für Sie sprechen. I Dies unterscheidet sich von den 12 Prinzipien der Animation darin, dass diese Flieger für Interaktivität und wirklich sind sie die wichtigsten Dinge zu berücksichtigen. Erstens sollten Ihre Animationen effizient sein. Sie dürfen die Leistung nicht opfern. In einer Welt, in der die Aufmerksamkeitsspanne von Menschen immer kürzer wird, müssen Sie sicherstellen, dass Ihre Animationen nicht viel Zeit brauchen, um auf dem Bildschirm zu laden. Zweitens müssen Ihre Animationen intuitiv sein. Sie müssen natürlich aussehen. Sie müssen sich vertraut und erwartet fühlen und sollten von den Gesetzen der Natur zurück sein. Weißt du, sie sollten Dinge wie Wadebeschleunigung, Volumen usw. heiraten , Volumen . Und zu guter Letzt dürfen Ihre Animationen keine Ablenkung sein. Die Höhe der Bewegung sollte gerade genug sein, um sinnvoll und gerechtfertigt zu sein, und ihr einziger Zweck ist es, die Absicht zu erreichen und nichts anderes. Nun war es gut, die nächste Videowelt. Sprechen Sie über die A-Deal-Dauer Ofen-Animation in Ihnen 6. Dauer: Wenn ich für Sie animiere, werde ich über Millisekunden im Gegensatz zu Frames sprechen. Und laut dieser Forschungsstudie einer Nelson-normalen Gruppe alles unter 100 Millisekunden für den Benutzer nicht sichtbar genug sein. Und alles, was länger als 500 Millisekunden ist, wird zu lange dauern und meine Kosten für Langeweile oder Zerstörung. In diesem Sinne bleibe ich in der Regel gerne zwischen 100 und 500 Millisekunden, wie so in Bewegung. Ja, Sie können sich zwei Arten von Animationsmikro- und Makroanimation vorstellen, so dass alles zwischen 100 Millisekunden und 300 Millisekunden als Mikroanimation angesehen werden kann . Dies könnte Farbverblasse über Effekte sein, Akkordeons , Tooltipps, etc. und alles ab 400 Millisekunden werden. Betrachten Sie eine Makroanimation. Dies kann ein Siris von Komponenten innerhalb eines Abschnitts und Zusammenfügen sein, oder ein Übergang von einer Seite zu einer anderen Seite oder nur generell jede große Bewegung auf dem Bildschirm. Hier ist ein Beispiel für die unterschiedliche Dauer, die heute verwendet wird. Ich habe diese Quadrate animiert, um sich von Seite zu Seite mit den verschiedenen Arten von Dauer zu bewegen, und dies sollte Ihnen eine Vorstellung von Mikro- und Makroanimationen geben, wie Sie hier sehen können. Gehen wir nun zu den entspannenden Effekten 7. Lockerung: Lockerung ist ein weiterer wichtiger Aspekt des Motion Designs. Dies ist Ihre lobende und langsame ABT, und es ändert die Geschwindigkeit Ofen Animation im Laufe der Zeit. Dies lässt ein Objekt natürlicher aussehen, denn in der physischen Welt beschleunigen und verlangsamen Objekte mehrere Male der Lockerung. Aber im Interesse dieser Klasse wird die Verwendung der drei häufigsten Lockerung Arten ese ausgerichtet. Er ist draußen und er ist rein und raus. Sie können die Werte anpassen, um die verrückte Menge der Verwendung zu erhöhen, abhängig von dem Effekt, den Sie suchen. Aber das Prinzip verwendet standardmäßig den Standard-Beschleunigungsstil für IOS. Aber ich empfehle Ihnen, verschiedene Werte auszuprobieren und zu sehen, wie sich das auf das Gefühl aus Ihrer Animation auswirkt . 8. Arbeitsdatei: In Ordnung. Also, jetzt schauen wir uns etwas Wut an. Es ist Zeit, Feind zu beginnen. Ich weiß es. Endlich. Richtig. Also für diese Klasse haben eine Einreichung Sigma erstellt, die Sie jetzt folgen müssen, Principal ist auch kompatibel mit Skizze. Wenn Sie also besser damit vertraut sind, Sie Ihr eigenes Design verwenden und einfach das anwenden, was wir im Prinzip tun werden. Okay, also lassen Sie uns schnell einen Blick auf eine Arbeitsdatei werfen, und ich möchte erwähnen, dass einige Dinge sehr wichtig sind, wenn Bewegung im Prinzip entwerfen. zunächst sicher, dass Ihre Schichten klar angeordnet sind. Ich empfehle, Ihre Ebenen von oben nach unten zu organisieren, indem Sie der Position auf Ihrem Design folgen. So, zum Beispiel, Ihre Navigationsleiste wäre oben und Ihr Fuß. Es wäre unten, so dass sich die Navigationsebene oben in der Liste befindet und die Fußzeilenebene am Ende der Liste befindet. Und das wird die Dinge viel einfacher machen, wenn sie im Prinzip animieren. Und zweitens ist sehr wichtig, um Ihre Layer korrekt zu benennen. Wenn nicht eine Datei mit vielen Ebenen animiert wird, kann es sehr schnell chaotisch werden, und es wäre sehr schwierig, Ihre Datei in der Zukunft zu aktualisieren. Stellen Sie also sicher, dass alle Ebenen einen klaren Namen haben und die nach Gruppen oder Abschnitten organisiert sind da Hauptduplikate der Laien Jahre, die animiert werden. Also würden Sie nicht mit Namen wie Lay your Want oder 350 arbeiten wollen, wissen Sie? Stellen Sie also sicher, dass Sie sie intuitiv benennen, und das ist für Sie klar. Mit wem Sie sich beschweren, arbeiten Sie. Ok, großartig. Also jetzt lassen Sie uns zum nächsten Video gehen, wo wir über die Hauptschnittstelle gehen und dann werden wir Datei importieren. 9. Prinzip: Importieren unserer Datei: in diesem Video nehmen wir die Prinzipien der Animation, über die wir gerade gesprochen haben, und wir werden sie in die Praxis umsetzen. Lassen Sie uns damit beginnen, sich mit der prinzipiellen Schnittstelle vertraut zu machen. Zuerst auf der linken Seite haben wir unsere Layer-Eigenschaften und wir haben unsere Ebenen und auf der rechten Seite haben wir unser Vorschaufenster und hier können mit unserem Prototyp herumspielen. Und wir werden auch in der Lage sein, unsere Animationen in Echtzeit zu spielen, während wir die Täler und Eigenschaften von Animationen bearbeiten und ändern. Also im Prinzip gibt es zwei Arten von Timeline die Treiber und die Animate, die Sie tun können, gehen und aus tut so. So finden Animationen zwischen Kunstbrettern statt und sie Luft ausgelöst durch Ereignisse wie oben oder Click oder Click oder Cursor innerhalb und außerhalb. Und Fahrer sind technisch nicht als Animationen klassifiziert. Im Prinzip, ähm, sie passieren innerhalb und in unserem Board, und sie sind eher wie Scrolling-Effekte oder ziehen Sie ein ble. Spätere. Also, um zu beginnen, ich mag mein Vorschaufenster einfach so zu trennen, und ich mag es auf der Seite zu haben, weil er sonst irgendwie Thea Art Boards im Weg ist. Und so werde ich mein Fenster einfach so bewegen. Auf diese Weise können wir uns auf unsere Boards konzentrieren und arbeiten und sehen, was hier in Echtzeit passiert . Jetzt gehen wir voran und importieren sind Feige meine Datei. Lassen Sie uns auf den Import-Button klicken und werden aufgefordert, sich mit unserem weiblichen Konto zu verbinden. Also lasst uns weitermachen und das tun. Dadurch wird ein neues Fenster in Ihrem Browser geöffnet, und Sie müssen Achsen prinzipiell zulassen. Also klicken wir darauf. Und um sicherzustellen, dass das wichtig war, das richtige Projekt. Gehen wir zurück zu Fig MMA, und diese können sowohl in der Desktop-App als auch in der Browser-App durchgeführt werden. Wählen wir also den Rahmen aus, den wir wichtig sein möchten, und gehen Sie zurück zum Prinzip, und wir werden auf die importierten ausgewählten Frames klicken. Okay, jetzt sind wir bereit, mit der Animation zu beginnen 10. Prinzip: Page: Okay, hier ist also unsere Seite, und das erste, was ich tun möchte, ist, dass ich die View-Port-Größe ändern möchte. Um das zu tun, gehen wir zu Größenvoreinstellungen und wählen Fenster den Stopp und das Web. So, wie Sie hier sehen können, wurde ein Vorschaufenster entsprechend aktualisiert. Und nun werfen wir einen Blick auf unsere Dateistruktur für eine Sekunde. So überall Abschnitte oder Gruppen einzeln und ihre versteckten. Und wenn Sie sie sehen oder auf Ertragselemente zugreifen möchten, müssen Sie nur die schnellen Clip-Sub-Layer hier überprüfen, damit wir sie für jetzt versteckt leben. Wir kommen zu diesen späteren Zustand zurück. Nun, dieses Miststück macht im Moment gar nichts. Also möchte ich sicherstellen, dass wir tun können, ist Scrollen vertikalen Scrollen hier. Um dies zu tun, müssen wir die vertikalen Einstellungen hier ändern, um zu scrollen statt statisch. Also lassen Sie uns alle Abschnitte gruppieren, indem Sie Befehl G drücken. Und lassen Sie uns diese Gruppe in Eichhörnchen-Fenster umbenennen, und Sie können dies durch Drücken von Befehl tun sind so jetzt unsere Ebenen ausgewählt. Lassen Sie uns auch die statische Einstellung ändern . Scrollen Sie hier. Etwas Interessantes ist hier passiert. Principal hat hier einen Treiber erstellt, der angibt, dass das Bildlauffenster einen Treiber aus dem Bildlauf auf der Y-Achse hat . Und wenn Sie diese Linie Jahr nach links auf Braut ziehen, können Sie sehen, wie die Schriftrolle nach oben und unten bewegt. Aber lassen Sie uns später darauf zurückkommen. Und im Moment bringen wir diese wieder auf Null. Also, wenn Sie in das Vorschaufenster gehen, tatsächlich, nichts passiert hier und beginnen, versuchen Sie Dragon dies Aber das ist nicht wirklich wollen. Um dies zu beheben, muss die Gruppe die gleiche Größe wie unsere Ansicht für die Größe haben. Also lasst uns, äh, hier Einstellungen anpassen. Also tauschen Sie hier Nachrichten aus und machen Sie dann die hohen neun Pixel wie Sie. Und so gehen Sie zum Vorschaufenster, dann haben Sie eine skalierbare Seite. Okay, das war also einfach. Ähm, nächstes Video wird animiert. Wie geht es London? Die Seite wird schauen 11. Grundlegend: Okay, in diesem Video erstellen wir einen Ladeeffekt für die Elemente, die sich im Heldenbereich befinden. Also, was ich hier tun möchte, ist eine sehr einfache Animation, bei der diese Elemente verblassen und von unten in einem Kaskaden-Stil schweben, so irgendwie wie eins nach dem anderen. Um das zu tun, werden wir unsere Zielseite hier auswählen, und ich werde sie umbenennen in „In true Transition“. Ok. Und ich klicke auf diese kleine Lebenssache Bull, Icon und wähle Auto, was im Grunde bedeutet, dass unsere Übergänge Luft automatisch spielen, damit wir diesen kleinen blauen Pfeil hier sehen können , der, ähm, wird auf die nächste unser Board zeigen. Aber da wir keine anderen sind Wildschweine hier wählen die, die wir bereits haben , so dass es dupliziert es so. Und wie ich bereits erwähnt habe, funktioniert die animierte Zeitleiste zwischen unseren Türen. Wie Sie hier sehen können,hat der Principal diesen Pfeil erstellt, und wenn Sie darauf klicken,können Sie die animierte Timeline out sehen und wie es alle unsere Ebenen hat. Wie Sie hier sehen können, hat der Principal diesen Pfeil erstellt, und wenn Sie darauf klicken, Und deshalb ist es wichtig, eine gute Angewohnheit zu haben, Ihre Ebenen korrekt zu benennen, denn es wird sehr traurig sein zu sehen, welche Dinge Sie hier animieren und nur im Grunde, genau das, was hier vor sich geht. Also lasst uns damit beginnen, sein Hofbrett in Eichhörnchen-Seite umzubenennen. Jetzt lassen Sie uns Creavy Floating Effekt hier. Ich werde diese Elemente auswählen und 30 Pixel nach unten verschieben, und Sie können dies tun, indem Sie dreimal auf Shift und die Nach-unten-Taste klicken. Also jedes Mal, wenn Sie in einer Pfeiltaste erreicht klicken, bewegt sich. 10 Plektren halten in diese Richtung. Also, wenn ich diese Spion hier klickt, wird es uns zum ersten unserer Tafel bringen. Und wenn Sie Ihren Mund irgendwo auf dem Vorschaubildschirm platzieren, können wir beweisen, dass Sie standardmäßig Animationen sind. Principal hält Sie eine Dauer von 300 Millisekunden und verwendet drei D-Falten Lockerung Stil für uns. Jetzt bevorzuge ich persönlich Leichtigkeit. Beides, Ähm, ich denke, es macht Animationen etwas glatter, aber fühlen Sie sich frei, zu verwenden, was Sie bevorzugen. Hier werde ich alle diese ändern, um beide zu erleichtern, und ich werde auch die Navigationsleiste hier auswählen und alle diese ausgewählten Elemente zu Null Gefängnis ein Pass Team ändern . So, wie Sie hier sehen können, Principal hat automatisch erstellt sind Animationen. Wenn Sie die Maus nach links und rechts über die Timeline bewegen, können Sie eine Vorschau Ihrer Animation anzeigen. Auf diese Weise können wir die Animationen sehen, die irgendwie kommen. Und wie gesagt, ich möchte, dass die Elemente eins nach dem anderen eingeben. Also werde ich diese ziehen und sie durch jeweils 100 Millisekunden trennen. Okay, also sieht es so aus. Es sieht ziemlich schön und glatt aus. Ich denke, wir können mit, ähm, vielleicht die Animation der Position nur ein wenig erweitern, um es wie ein Söhne der Elemente zu geben , die aber ein bisschen hineingezogen werden. Okay, also werde ich diese hier auswählen und sie um weitere 100 Millisekunden erweitern, schätze ich. Mal sehen, wie es jetzt aussieht. Ok, einige passieren damit. Lassen Sie uns zum nächsten Video übergehen. Wo wird animieren, wie diese Autos in den Bildschirm gelangen? Nun, scrollen Sie die Seite nach unten 12. Prinzip: Hover Effects: Richtig. Also hier sind wir wieder und was ist nur ein wenig aufräumen. Was ich jetzt tun möchte, ist, dass ich diese Karten animieren möchte, und ich möchte, dass die Karten einen Khobar-Effekt haben. Und ich möchte auch einen Scroll-Effekt erstellen, so dass, wenn wir nach unten scrollen, die Wagen auf eine nette, fließende Weise erscheinen . Um das zu tun, werden wir eine neue Kunst für schaffen, und ich werde hier auswählen. Scroll beginnt, und ich werde es erneut duplizieren. Und dann werde ich diese Scroll-Effekte ausführen. In Ordnung, also lasst uns, ähm, entclippen sind hier festgelegte Ebenen. Ich will nur sehen, was los ist. Und hier werden wir anfangen, unsere Treiber hier zu benutzen. Nun, bevor wir anfangen, diese Karten zu animieren, möchte ich die Khobar-Effekte erstellen. Um das zu tun, werde ich eine Komponente machen. Also lassen Sie uns eine ihrer Karten hier auswählen, und gehen wir zu dieser Schaltfläche hier, die Komponente erstellen sagt. Und dann werde ich hier klicken und über Einsicht auswählen gehen, um dies zu duplizieren und dann wenn Sie draußen gehen, um zurück zum Anfang zu gehen. Wir haben hier gerade eine Schleife erstellt. Nichts passiert wirklich, weil wir nichts geändert haben. Ich werde mein Kunstpferd hier June aktiv wechseln. Und dann hier will ich, dass das Auto 10 Pixel hoch ist. Und ich will hier auch einen Schatten haben. Also werde ich den gleichen Schatten verwenden, den wir hier wirklich finden müssen. Äh, nur wegen der Übung, äh, äh, gehen wir hierher zu 16 Jahren ein in 4% Null, das in unsere Mittel für OK abzielt. Also möchte ich auch mehr lernen, um hier eine Linie zu haben, diese Art von Missbrauch von links nach rechts. Und wenn wir hier zurück zu ihrer Akte gehen, werden Sie feststellen, dass ich schon viel vorbereitet habe. Diese Komponenten für Sie. Wenn Sie zur Learn more -Komponente gehen, sehen Sie, dass bereits eine aktive und eine Übergruppe vorhanden wäre. Und weil wenn Sie eine Datei in Prinzipal jedes Kranke im Jahr importieren und gruppieren ,dass sie versteckt ist, wird es , hier nicht wichtig sein, und es hätte getan, dass die Überzustände transparent gemacht haben. Also hier, lassen Sie uns unsere Kapazität von 0 auf 200 ändern und dann lassen Sie uns den aktiven Zustand auf Sirup Prozent setzen und ich war Sie können hier sehen, wir haben jetzt eine Linie hier. Was ich wollte, ist eine Eins der Linien, die von links nach rechts gezogen werden. Okay, also gehen wir in unseren aktiven Zustand. Und dann lasst uns die Linie hier im Khobar State ändern, 20 mit. Also, wenn wir gehen und Vorschau, dass es jetzt funktioniert. Also lassen Sie uns es einfach schließen. Gehen wir zurück zum Elternteil. Also, was ich jetzt tun möchte, ist, dass ich das duplizieren möchte und dass wir drei Autos haben, die dasselbe tun. Also zuerst werde ich es Karte eins umbenennen, und dann werde ich duplizierte Zwanziger, aber drücken Befehl tief. Und dann werde ich nur sicherstellen, dass sie eine Linie sind. Nach den ursprünglichen Karten, Ich wähle nur Karten und ausrichten sie, und jetzt können wir gehen und treffen unsere vorherigen Karten, und wir sehen, dass Sie sehen können, es gibt über-Effekt funktioniert jetzt gut, richtig? Das war's also für dieses Video. In der nächsten werden wir einen Scroll-Effekt für drei Karten erstellen 13. Prinzip: Scroll (Teil 1): Okay, jetzt stimmen wir diesem wachsenden Effekt für unsere Karten zu. Hier werden wir unsere Fahrer benutzen und was ich dir wollte. Wenn die Karten diese Position auf dem Bildschirm erreicht haben, sehen Sie genau so aus. Wir werden unsere Herzen auswählen und dann gehen wir zu diesem kleinen Plus-Symbol und wählen Zentrum. Warum? Und kreiere Cree Frenk und ich will auch, dass sie verblassen. Also werde ich Kapazitäten weit unten auswählen. Gehen wir zurück zu Null , wo unsere Animation beginnt und ich werde sie 100 Pixel nach unten verschieben. Diese Zeit von einem ist ein bisschen drastischer als die 30 Pixel. Und dann werde ich sie auch durch jeweils 100 Pixel trennen, wie so immer Prevue. Das, was nach unten scrollte? Sie können sehen, wie der Effekt jetzt kommt. Das ist großartig, schön und glatt. Stellen wir sicher, dass wir auch unser Fading hinzufügen. Also lassen Sie uns ändern, was sie alle verkauft, und ändern Sie die Kapazität auf Null. Also lasst uns Proview gut, das ja, also machen wir es von Anfang an. Ok? Und oder Homer-Effekte funktionieren immer noch. Das ist großartig. Lassen Sie uns nun in das nächste Video gehen, wo wir den nächsten Abschnitt animieren werden 14. Prinzip: Scroll (Teil 2a): Also hier sind wir wieder und lassen Sie uns zum nächsten Abschnitt gehen und wir werden hier etwas sehr Ähnliches tun . In der Tat werden wir so ziemlich dasselbe für jeden Abschnitt tun. Sie werden nur ein bisschen anders sein in ein paar kleinen Details. Aber so ziemlich der Kern der Animationen und der Stil der Animationen werden gleich sein . , Wir werden das gleiche hier tun,indem wir diese in Komponenten verwandeln. Und der Grund, warum wir die Komponenten zuerst tun, ist, dass wir einige Interaktionen für diese Seite erstellen werden. Aber um Korea, diese Interaktionen müssen wir unsere Boards erstellen und jedes Mal würde auf unserem Board e Kopien über jede Komponente und jede arme hübsche Sie haben duplizieren . Wenn wir im Kunstkrieg duplizieren, ohne Komponenten zu erstellen müssen wir unsere Arbeit zweimal erledigen. Also, um das aus dem Weg zu bringen, machen wir es jetzt einfach. Jetzt fangen wir mit diesem an. Also lassen Sie uns mit einer großartigen Komponente gehen. Und wie ich sagte, ich habe bereits diese Zustände für Sie war aktiv und darüber hinaus wird dieser einen anderen Zustand brauchen , der jetzt die Auswahl bei ST sein wird. Zuerst möchte ich sehen, was los ist, denn als ich zu dunkel war, werde ich einfach einen Hintergrund für diesen weißen Hintergrund erstellen. Also werde ich nur auf ein Rechteck drücken, und dann werde ich nur ein sehr,weißt du, nur um zu weißt du, sehen, was los ist, das in Weiß zu ändern, und dann werde ich Verschieben Sie es hier rüber. Fall kann ich jetzt sehen. Nun ändern wir den Namen hier zu aktiv, und dann lassen Sie uns unseren Übereffekt erzeugen und dann unsere Rückkehr nach draußen, und ich werde diese beiden ändern , und ich werde diesen vorliegenden Befehl D duplizieren und entfernen, der sich in Richtung beweist. Ich will vorbei, begeistert, weil ich nicht versehentlich in verschiedene Zustände bewegen will, wenn ich es nicht beabsichtige. Es wird also geändert werden, wie, Okay, jetzt gehen wir hier. Und dann werden wir unseren aktiven Zustand zeigen, was eine Pastis 100%, die gut ist. Und unsere Khobar, es ist 0%. Aber ich möchte eigentlich, dass diese beiden aussehen wie ausgewählten Zustand, denn wenn man sich das Design anschaut. So sieht der ausgewählte Zustand im saudischen aktiven Steak aus. Sieht aus, als ob so geändert wurde. Das zu sein, dass Dube sich ändern wird, lügen auf Null, und dann werde ich dich ändern. Übergeben Sie es auch hier. 60%. Und dann hier, werde ich es tun. Aber die ganze 100% sind Sie aktiv 0%. Und dann möchte ich, dass diese Linie von links gezeichnet wird. Richtig, also werde ich es hier 20 ändern und die hier lassen, da es so schwach ist, jetzt können wir sehen, dass wir perfekt sind. Großartig. Also gehen wir zurück zu den Eltern. Und hier, wie Sie sehen können, hat es die Art und Weise verändert, wie es aussieht, Aber wir können hier gehen und von aktiv zu wählen wechseln. Jetzt haben wir das genau so, wie wir es entwerfen. Jetzt werden wir das Gleiche für diese Komponente tun. Lassen Sie uns einfach diesen ersten 201 Schritt umbenennen und dann Überschwemmungen erstellen Komponente dafür. Gehen, um ein Rechteck hier zu erstellen, um zu lange zu sehen, ändern Sie es in weiß. das Verschieben nach hinten änderte sich diese beiden aktiven Status. Aber ich werde seine zweimal duplizieren. Und dann wird die hier vorbei sein. Das sollte ausgewählt werden. Dann wird die Inhaber-Tatsache das 200% ändern. Er ist 1 bis 0% und wir werden den gleichen ersten gewählten Staat machen. Also 100% und 0%. Und dann ist unser aktiver Zustand ein sehr das Gewicht, das Sie suchen. wir sicher, dass wir eine Verbindung herstellen. Die Kunst langweilt hier und dann für etwa Wirbelsäule. Und jetzt funktioniert es. Und vergiss nicht, wenn du das tust, Linus. Nun, also gehen wir zurück zu hier rüber und ändern unsere Linie. 20 Was? Und Netzwerke? Großartig. Also gehen wir zurück zu unseren Eltern. Und dann hieß Leben diesen 202 Schritt, und dann sehen wir eine Vorschau darauf. Das funktioniert. 15. Prinzip: Scroll (Teil 2b): Also lassen Sie uns jetzt unsere Scrolling-Effekte dafür erstellen. Also will ich, dass diese beiden ziemlich ähnlich aussehen. Ich wand den Text nach oben und verblassen, und ich werde immer noch mögen sie hier auch mit diesen. Und ich werde hier einen Fahrer erstellen, einen Schlüsselrahmen hier und Sandra warum? Und auch für die Passage. Nun gehen wir zurück, wo die vorherige Animation beendet ist und wir werden diese 100 Pixel verschieben . Ich werde die Anarchie 10 Mal drücken und dann werde ich sie um jeweils 50 Pixel trennen . Ich will nur nicht, dass es mit 100% Zellen zu verrückt ist, denn sonst wird es lange dauern , um zu laden. Richtig? Also überwiegen wir. Jetzt sieht er sehr glatt aus. Ich mag es. Jetzt wählen wir sie alle aus und ändern die Rapazität. 20 Wir können hier sehen. Das ist schön. Wir machen das Gleiche. Außer dieser Zeit würde das Zentrum X dafür verwenden. Also lasst uns hier gehen und wir werden auf Centre X und Kapazität klicken. Gehen wir zurück hierher und lassen Sie uns dann 100 Pixel bewegen und die Kapazität auf Null ändern. Also überprüfen wir unsere Informationen hier. Das kommt zusammen. Sehr nett. In Ordnung, das war's also für diesen Abschnitt. Im nächsten Video machen wir etwas sehr Ähnliches für den nächsten Abschnitt. Und dann gehen wir, Sir, Grüße oder komplexere Interaktionen. 16. Prinzip: Scroll (Teil 3): In Ordnung, also hier sind wir mit diesem Abschnitt. jetzt Gehen wirjetztzu unseren Fahrern und bringen sie in die richtige Position. Also wieder, wenn der Abschnitt den Punkt der These erreicht, wollte ich so aussehen. Nun, hier werden wir nur unsere Karten anpassen, weil es drei Autos gibt, die wir hier haben, nur Platzhalter sind . Die Rial-Karten sind hier drin, und wir werden das Prinzip benutzen, aber um sicherzustellen, dass sie in der richtigen Position sind. Also werde ich diese hier einfach löschen, und ich werde das auf 200% ändern. Und ich werde die Skala hier auf 0,9 in den 12 0,8 ändern. Und der Grund, warum die älteren, wo ein Platzhalter ist, weil der Text anders ist. Und ich wollte die Skalierungseigenschaft hier verwenden, denn später werde ich Ihnen zeigen, wie wir eine Interaktion schaffen, um diese Karten durchzublättern. Okay, also stellen wir sicher, dass sie an der Unterseite der ersten Karte ausgerichtet sind, und dann werde ich sie jeweils 20 Pixel nach unten verschieben und Sie sehen, wie sie aussehen. Es gibt nur einen anderen Text. Natürlich ist das Demi-Text, aber ich möchte nur, dass sie anders aussehen. Jetzt, wo wir das aus dem Weg haben, ist es zu schließen und mal sehen, wie wir den nächsten Abschnitt machen werden. Also wieder gewann ich die Tags zu verblassen und gleiten, und ich möchte diesen Hintergrund animieren, um die Autos aufzudecken und dann, in einem thes zwei Stunden zu animieren. Es wird einander von links und rechts begegnen. Lassen Sie uns also mit dem Text beginnen. Ich werde dies auswählen und ich werde einen Schlüsselrahmen erstellen. Ich denke, hier ist in Ordnung für Sandra Y und Deckkraft. Gehen wir zurück zu dem Ort, an dem unsere vorherige Animation endete, und lassen Sie uns hier unsere Schlüsselbilder begrüßen. Also lasst uns nochmal um 100 Pixel runtergehen. Ich möchte nur sicherstellen, dass alles konsistent und verwendbar ist. Dasselbe basiert hier, also lassen Sie uns diese Wörter auch durch 50 Pixel trennen. Hoppla. Okay, lassen Sie uns eine Vorschau auf diesen Moran. Das ist ziemlich glatt. Lassen Sie uns nun bei unserem Fade-Effekt, indem Sie die Kapazität auf Null ändern. Also gehen wir hierher, jetzt sehen wir sie ein Treffen. In Ordnung, also gehen wir zu diesen Teilen über. Also hier werde ich einen Schlüsselrahmen vier Mitte X und mit etwas mit ihnen wie das erstellen . Und lassen Sie uns hier überprüfen, Also okay, ich denke, hier möchte ich, dass der Hintergrund ein wenig früher endet. Also, um das zu tun , werde ich das hier größer machen und seine Runde bewegen. Also denke ich, ich will Ende. Lass uns mal sehen. Also will ich mit ihrem Ding richtig enden. Das wäre das A d on. Also lass uns hier sehen. Ja, damit wir die Karten jetzt besser sehen können? Ja. Jetzt lassen Sie uns diese zwei Stunden hier animieren. Also wieder, ich werde einen Schlüssel von einem Zentrum X erstellen, und dann möchte ich, dass sie ein wenig skalieren. Ich werde eine Fähigkeit que Frame hinzufügen und dann eine Vergangenheit zwei Schlüssel frei. Nun gehen wir zurück zum Anfang der Animation, und dann gehe ich zu der 20 Pixel jeweils auf die Website. Und dann werde ich die Skala auf 0,8 ändern und es gibt Passagen, also lasst uns sehen, wie das aussieht. Okay, also will ich, dass Teoh direkt vor dem Text fertig wird. Uns? Nun, und ich will nicht, dass sie früh danach anfangen, auch weil er aussieht, nicht sollte, dass sie einfach dort schweben. Und ich möchte, dass sie näher an der Linie zur Animation des Hinterzimmers hier sind. Also lasst uns hier vorbeigehen. Ändern Sie dies in ein wenig früheren Umfang, wahrscheinlich um dort herum, nur ein bisschen mehr. Und dann will ich, dass sie auch ein bisschen früher fertig sind. Vielleicht gibt es da vielleicht. Lass uns dich sehen. Okay, ich denke, wir wollen nur sicherstellen, dass wir dem Benutzer nicht sagen können, dass Sie diese Drucktasten kennen und Sie hier durchklicken können, und ich möchte, dass sie das sofort verstehen. Also denke ich, das funktioniert vorerst. Im nächsten Video werden wir die Scroll-Effekte beenden, und dann werden wir einige komplexere Interaktionen für Karten und unser Pferd bis zum Kritzeffekt erstellen . 17. Prinzip: Scroll (Teil 4): In Ordnung. Also gehen wir zum nächsten Abschnitt hier und wollen nur mehr davon sehen. Also machen wir das genau so, wie wir es getan haben. Die vorherigen Abschnitte wollten tatsächlich, wir werden diese Karten Befehl G gruppieren, und ich werde dies ändern, um zu testen. Das fühlt sich nur an, dass es meine Karten sind. Und lasst uns auch so . Ich werde den Rahmen für das Zentrum süchtig machen. Warum? Und Keep Frame hat ein Team. Und hier drüben mit dem Ende unserer Provinzinnovation hier geht Teoh behebt das. Das ist ein tapferer Mann. Ähm, 15. Werfen wir einen Blick. Ja, ich will nicht, dass diese wirklich zu viel sind, weil ich diese will, damit wenn wir nach unten scrollen , diese Autos tatsächlich automatisch seitwärts scrollen. , Also will ich nicht, dass diese Ablenkung werden und hier zu viel los sind, also lebe es so. Und dann hat Alice einfach alles auf Null positiv gesetzt. Ok? Das tut nett. Okay, also gehen wir jetzt zu diesem Abschnitt hier mit viel geht und diese wird wieder sehr ähnlich sein . Wir werden nur dafür sorgen, dass wir die richtig machen. Also wählen wir hier unsere Logos und diese Komponenten. Und dann lasst uns auf Mitte Wein und dann Deckkraft klicken. Gehen wir hierher zurück. Verschieben Sie diese 100 Pixel nach unten. Okay, dann für die meine 50. Und wir machen das gleiche mit diesem Knopf hier. Und ich möchte auch, dass sie wie Kaskadenstile aussehen. Erscheinen Sie eins nach dem anderen. Und wir können das auch auf andere Weise tun. Also war es gerade in unserer Vergangenheit t hier, nur um diese Schlüsselbilder fertig zu haben. Dann können wir hier unsere Logos auswählen und dann einfach die Keyframes verschieben. Lasst uns das ABC Lobel so verlassen. Und in diesem, werden wir sie einfach bewegen. Aber so, dann der nächste. Ich mache das nur von I. Aber ich meine, wenn du wirklich spezifisch sein willst, kannst du hier drin konsumieren und dann buchstäblich so perfekt wie du sein willst , ich Nehmen wir an. Und schließlich ging der Ohnmacht Kuss verloren. Wiederholen Sie das. Ja, das sieht so aus wie Yeah, ich denke, das ist wohl zu viel weniger, nur ein bisschen weniger hier. Genau wie diese Lucy wieder. Fall von diesem mehr Also, ich bin OK. mit, dass. Und dann möchte ich nur sicherstellen, dass das Essen oder nicht im Weg ist, so können Sie hier nicht zu Kleidung zu Essen zu verdienen weg sehen . Also lasst uns das auch bewegen. Es ist nur, ähm, erstellen Sie Schlüssel von hier für Zentrum Warum? Und lasst uns an den Anfang gehen. Und mit den 100 Pixeln unten, und ich denke, wir können es schaffen, damit es viel später beginnt, vielleicht dort , ja, das ist es schöner. Vielleicht sogar Miete. - Ja. Okay, da haben wir es. Lassen Sie uns eine Vorschau von Anfang an. Sie sind Scroll-Effekte oder Khobar-Kämpfe um Karten. Testimonial Karten sind Logos in den Fuß Buchung Größen, die wir getan haben. Wir sind mit unseren Scroll-Effekten in den nächsten Videos fertig. Wir werden weitere interessante Attraktionen hier und Animationen zu schaffen gehen. Ich habe die Teile davon gemacht. Wir können hier klicken und zum nächsten Schritt gehen, und dann werden wir eine Indirection Jahre, die durch unsere Autos blättern können, indem Sie auf seinen Pfeil. Und dann werden wir nur einen automatischen Kurs bis zum Scrollen hier erstellen, so dass, wenn wir nach unten scrollen diese Luft seitwärts bewegen und wir können sie sehen Alles klar, großartig. Also lassen Sie uns zu den nächsten Videos gehen 18. Prinzip: Interaction (Teil 1): Okay, hier sind wir auf dem nächsten Abschnitt. Nun, was ich hören wollte, ist, dass ich una gemacht thes Taste, so dass, wenn wir darauf klicken, können wir die Zukunft Schritt Nummer zwei kommen von rechts sehen. Also lasst uns hier aufräumen. Nur Klamotten, die Ordner und ich werde meine Schichten hier abschneiden. Jetzt gehe ich zu, ich gehe zurück zu diesem Abschnitt hier, und was ich zuerst tun möchte, ist meine Interaktion zu schaffen. Also lassen Sie uns auf diese Schaltfläche klicken und wir werden auf tippen und unsere Karte duplizieren. Und das erste, was zu tun ist, wäre, diese Zustände von aktivem tun zu ändern, ausgewählt in diesen einen von ausgewählt zu handeln. Und dann lassen Sie uns erstellen und tippen, um zur vorherigen Seite zurückzukehren. Also im Moment passiert nichts wirklich. Manchmal passiert es Dinge. Äh, eine Sache, die ich mache, wenn das passiert, ist, dass ich das richtig mache. Also, jetzt ist nichts wirklich passiert ist, Sie können hier sehen, aber beginnen wir mit der Erstellung unserer Animation. Also lasst uns später unsere Suppe aufklappen, damit wir sehen können, was hier vor sich geht. Und das ist der zukünftige Schritt Nummer zwei, der jedes Fleisch will. Öffnen wir unsere feindliche Timeline, und ich werde die Fahrer-Zeitachse für eine Sekunde schließen. Jetzt gibt es etwas, das ich hier erwähnen möchte. Wie Sie hier sehen können, gibt es zwei Symbole, so dass das Wasser diese drei Zeilen hat. Das bedeutet, dass diese Animation in der Timeline des Fahrers erstellt wurde, und die Wanda hat diese Schneeflocke bedeutet, dass die Animation in der Animationszeitachse erstellt wurde . nun leider Wenn Sienuneine Eigenschaft und die Treiber-Timeline geändert haben, können Sie die gleiche Eigenschaft in der Animationszeitachse leidernicht ändern. Lassen Sie uns also ein Beispiel hier sehen, um die Ebene hier auszuwählen, die die Animation dieses Bildblocks darstellt, der von rechts hereinkommt und von rechts eingeblendet wird. Also lassen Sie uns hier identifizieren. Jetzt können Sie hier sehen, dass das Center X und ein Pastie von den Treibern gesteuert werden und weil wir diesen Abschnitt so animieren wollen, dass er sich von rechts nach links bewegt, im Grunde auf der X-Achse. Technisch gesehen können wir es nicht tun, weil diese von den Fahrern kontrolliert werden. Aber hier ist ein kleiner Trick, den ich gerne mache. Diese Eigenschaft wird nur auf die Gruppe angewendet, aber nicht auf die Elemente im Inneren. Lassen Sie uns also die Elemente im Inneren und jedes andere Element auswählen, das wir animieren werden. Also lassen Sie uns alle diese als auch auswählen und auch den Hintergrund auswählen, weil mir helfen wird , die Elemente richtig auszurichten. 30. Geh. Wenn wir jetzt hier sehen, hat Theo Enemy Timeline eine Animation für die Centre X-Eigenschaft für beide Elemente erstellt. Werfen wir einen Blick auf das, was wir haben. Hier gehen wir zurück Museumsmerkmale, die man hier mit den Funktionen Schritt zwei klicken würde. 19. Prinzip: Interaction (Teil 2): jetzt denke ich, wir können das noch ein wenig glatter machen, und ich möchte es so machen, dass, wenn wir auf Schritt 2 wechseln, die Animation von den Komponenten im Inneren, es ist wie Glätten und glätten. Und ich möchte, dass sie den Bildschirm eins nach dem anderen verlassen und nacheinander auf dem Bildschirm erscheinen, wiewir in , wie den vorherigen Abschnitten getan haben. Also lasst uns jetzt dazu kommen. Eine andere Sache, die ich über die feindliche Timeline erwähnen möchte, ist, dass die Schneeflocken, die in blau sind , bedeuten, dass Sie die Animation hier nicht ändern können. Er ist im Grunde bedeutet, dass das eine Komponente ist. Und wenn Sie die Animation ändern möchten, müssen Sie innerhalb der Komponente ändern. Also, zum Beispiel, die Karte Nummer eins ist eine Komponente, also wenn ich doppelklicke darauf, kann ich meine Timeline hier sehen, und ich kann These gut zu jeder Lockerung ändern, die so viel wie ich will erweitert wollen. Aber ich werde es einfach so belassen, wie es vorher war, weil ich mag, wie es so weit aussieht. Also gehen wir zurück zu dem Zeug. Eine andere Sache, die wichtig ist, hier zu erwähnen, ist, dass alle diese Ebenen, Grundsätzlich hat fast jede Ebene eine Animation hier, aber es bedeutet nicht unbedingt, dass Informationen, die nützlich für diese Art Board ist. Also in diesen Schwulen waren nur besorgt über die Elemente auf dem Bildschirm. So können wir technisch alle diese Animationen auswählen und einfach löschen, indem Sie auf klicken. Weißt du, Animation und nichts ändert sich hier wirklich. Also ich weiß, dass es hier ein wenig chaotisch werden kann und diese verwenden, weil technisch jedes Mal, wenn wir ein Onboard dupliziert haben, jedes Element, das Principal geändert hat, hier automatisch eine Intimation erzeugt, jedes Element, das Principal geändert hat, hier automatisch eine Intimation erzeugt, obwohl es die Fahrer oder Sie wissen etwas, was wir hier geändert haben. Also ich weiß, dass du hier verwirrst, aber lass uns versuchen, das so viel wie möglich aufzuräumen. Also habe ich diese jetzt getäuscht, und ich werde damit beginnen, die Komponenten zu animieren, die ich brauche. Uhm, ich werde im Grunde alles löschen, was das Fahrersymbol hier hat, damit ich weiß , dass wir diese nicht brauchen. Ok, großartig. Lassen Sie uns also anfangen, unsere Komponenten zu animieren. Wir fangen mit diesem an, und was ich tun möchte, hat eine Art von scheinen, die durch wollen. Ich werde sie nur um jeweils 0,2 Millisekunden trennen. Also, das wären sechs. So können wir hier sehen, wie es aussieht, und das ist es, was ich will. Nun, das nächste, was ich tun möchte, ist, dass ich die Lockerung Stil Tees ändern will. Ok. Und dann lassen Sie uns die Funktion Schritt zwei machen. Das wäre also dieser hier, und ich werde sie wieder trennen. Mein Punkt, Z Zimmer Chew Mills Aiken Rede. Ok. Und wir kümmern uns nicht wirklich um den Hintergrund, also okay. Nein, es funktioniert. Nun lasst uns Thies ändern, um es zu erleichtern. Und es sei denn, dass jede Komponente hier etwa 500 Millisekunden hält. Also über die 0,50. Okay, und jetzt passen wir uns an. Das hier soll anfangen. Vielleicht um 0,20 Uhr. Da gehst du. Also lasst uns das wieder spielen. Und so erscheint unsere Funktionen Step 2, so dass es ziemlich schön ist. Ich mag es. Und der Grund, warum das er gesehen hat, ist, weil ich diese als Ganzes betrachte . Automatisierung. Grundsätzlich ist das ein ganzer Übergang, und ich wollte einfach rein und raus sein. Also die ersten Komponenten leben den Bildschirm für eine einfache und die, die ankommen, sind im Grunde und er ist raus. Und wie ich in Fury Abschnitt in Bezug auf die Dauer erwähnt, weil dies eine Menge von Komponenten bewegt sich auf dem Bildschirm, Sie wollten 500 Millisekunden oder länger insgesamt sein. Also wird es wieder gespielt. Ja, das ist nett. Jetzt werde ich es einfach so lassen. Ich werde zum nächsten Abschnitt übergehen. Aber warum versuchen Sie nicht, dasselbe für Funktionen Schritt eins zu tun und im Grunde, was Sie tun müssten , ist ziemlich dasselbe, außer umgekehrt und dann sehen, wie Sie es tun und im Projektabschnitt gepostet haben. 20. Prinzip: Interaction: Okay, also lasst uns unsere nächste Interaktion hier machen. Und was ich hören wollte, ist eine Interaktion, die zeigt, dass die Autos drehen, wenn ich auf diesen Arm klicke . Lassen Sie uns also mit dem Schließen beginnen. Das ist keine Kraft, die wir nicht brauchen. Und ich werde meine Schichten hier abschneiden und ich gehe Teoh, gehe auch zu meinen Fahrern. Finden Sie die Position aus dem nächsten Abschnitt, wie hier und dann werde ich meinen Pfeil auswählen und ich werde auf Tippen klicken und ich werde duplizieren und ich werde den Namen dieses sind nicht Board-Karte aktuell sein und OK, so dass das erste, was ich wollte ich nur meine Karten hier, Also werde ich die Größe Seite erhöhen, waren hier, so dass ich richtig sehen kann und ich werde meine Karte A nach unten gewinnen. Und dann werde ich die Skala der Karte zu ändern schlagen 21 und ich werde sicherstellen, dass er online ist , um Karte a. Dann kann ich Autos e auf Geschicklichkeit 9.9 und Carte acht zu Maßstab 80.8 ändern. Jetzt kann ich das Einkaufszentrum wieder auswählen. Ich werde sie an der Oberseite der Karte ausrichten und dann wieder auf den unteren Rand der Karte Rindfleisch. Dann wähle ich meine beiden Wagen von unten aus und verschiebe sie um jeweils 20 Pixel. Alles klar, das nächste, was ich wollte, möchte ich die Selektoren hier ändern. Also gehe ich Teoh, kopiere diese Farbe. Und das ist nur 3333 Also ändern Sie diese beiden grauen Lerche wie Great! Und diese hier, es wird dunkler Regen sein. Und das werden wir mit den Stunden machen. , dass Das hier wird hoffen, dasses 33 gehen wird, und der anderen geht es gut. Also lassen Sie uns einfach sehen, wie das für genug aussieht kommen zurück zu meinem vorherigen Kunstboard und dann werde ich meine Animation in einer Vorschau sehen. Okay, also nicht zu dir. Schlechter Weg kann. Trotzdem können wir nicht ein bisschen mehr polieren. Also, was ich jetzt tun möchte, ist, dass ich etwas zwischen diesen beiden Partnern schaffen möchte, weil es immer noch nicht klar ist, dass wir die Karten durchblättern. Also Blut klicken Sie auf eine andere in Traktion hier, gehen, um Geist Taste und klicken Sie auf tippen. Ich werde dies jetzt duplizieren Ich werde den vorherigen Tippen entfernen, den ich vorher sein würde, und stattdessen werde ich einen automatischen Übergang erstellen. Also im Grunde bedeutet es, dass, wenn wir auf den Pfeil klicken, es geht, um diese sind nicht langweilig. Und wenn die Animation hier beendet wird, gehen diese sind nicht so hier. Wenn ich tun möchte, ist, wenn ich meine Karte A und ich werde sie verschieben 40 Pixel nach oben und 40 Pixel nach links. Aber dann werde ich den Winkel auf minus zwei ändern. Dann werde ich meine Selektoren hier ändern, um, um, 40 Prozent Alpha in diesen 12 Dann werde ich meinen Kartenplatz auswählen und die A-Passage E 20 ändern Jetzt finden Sie heraus scheinen. Und wenn wir zurück zu unserem bisherigen Kunstboard gehen und das spielen, sieht es so aus. Okay, also nicht so schlimm. Aber wir können es noch ein bisschen mehr polieren. Und was ich hier jetzt tun möchte, ist, dass ich nur das Timing will, um die Fahrer Timing dieser Animationen zu schließen . Also, wo haben sich hier verändert? Er ist Court A und C und C Selektoren. Also werde ich nur Teoh gehen, stellen Sie sicher, dass ich hier nichts ändere, also werde ich das entfernen und auch all das, und ich werde all das zu leicht ändern, dass ich zum nächsten gehen nicht Board, und ich werde das Gleiche tun. Außer, dass ich mich auch mit diesen ändern werde. Bitte. Raus. Okay, also lasst uns das überprüfen. Ja, nicht so schlimm. Großartig. Also können wir das Gleiche für die nächste Wache tun. Was? Haben Sie versucht, das auf eigene Faust zu tun und im Projektbereich gepostet? Also, jetzt gehen wir zum nächsten Video über. Wo wird dieser Kinderwagen animieren und das wird eine sehr, sehr einfache Animation sein. Wir werden es nur so aussehen lassen, dass die Testimonials so aussehen, dass sie automatisch nach links scrollen. 21. Prinzip: Auto: Das ist also der letzte Abschnitt, den wir animieren werden. Und bevor wir das erreichen, möchte ich Ihnen nur schnell zeigen, dass ich das letzte Auto fertiggestellt habe, das wir animieren mussten . Nun, wenn du die Chance hattest, das alleine zu machen, ist das großartig. Ich will dir nur schnell zeigen, was ich hier getan habe. Also, zuerst einmal, ich habe alle meine Kunstwörter umbenannt. Also Karte übergegangen werden. Das ist die, an der wir in der Vergangenheit gearbeitet haben. Grafikkarte, am Ende sein. Und dann habe ich hier zwei neue Kunstkriege erschaffen. So aktuell Siehe Übergang und Warenkorb. Siehe Ende. Und wenn wir unsere Animationen hier für Karte sehen Übergang. Ich habe alle diese angepasst, um zu erleichtern und Gabel artsy und all dies ist zu erleichtern , so dass sie die vorherige Karte entsprechen. Ok, großartig. Also gehen wir jetzt zum nächsten Abschnitt über. Hier gehen wir, Teoh, gehen in die Zeitachse des Fahrers und das wird sehr einfach sein. Lasst uns, äh, Gold den Weg zum Meer oder Testimonial Carts. Und ich werde den Daumen bewegen. Äh, 23 etwa drei Karten wie diese. Zwei Karten, drei Karten. Ich liebe es, sie am 3. Juni Karten wie das zu bewegen und dann zu meinem Feind rechtzeitig und gehen, um Linie Gewebe Nil Abschnitt finden hier, Zeugniskarten und dieses Zentrum. Warum ist derjenige, den wir treffen wollen? Also schaffe ich es. Ich werde es auf 12 Sekunden verlängern, und ich werde bei der Animation zu Linear wechseln. Gehen wir also zurück zum vorherigen Artboard und scrollen immer noch, und Sie können sehen, dass die Karten dort automatisch scrollen. Großartig. Also lasst uns alles von Anfang an spielen. Wir haben unseren Ladeeffekt Scrollen nach unten und wir haben unsere Karten. Er hat auch eine ganze Wirkung für unsere Karten. Und dann haben wir eine Schriftrolle, er hier zu unserer Funktion Schritt Nummer zwei. Und dann haben wir einen schönen Scroll-Abschnitt hier und wir können durch unsere Karten so blättern. Und dann können wir nicht runtergehen. Sarah, nur Geld, ALS, und dann sehen Sie unsere Kunden und das Essen. Das war's. Großartig. Also gehen wir zum nächsten Video über, wo wir überprüfen, was Sie gelernt haben, und wir werden durch, wie Sie Ihre Datei speichern und exportieren Sie Ihre Datei zu dribbeln oder eine Filmdatei , oder sogar als Programm für Entwickler oder andere Designer, und Sie möchten, dass sie mit Ihrem Prototyp herumspielen und etwas Feedback bekommen. 22. Schlussbemerkung: Alles klar, herzlichen Glückwunsch zum Abschluss dieser Klasse und zur Erstellung Ihrer animierten Landingpage. Lassen Sie uns über das, was Sie bisher gelernt haben, gehen. Zuerst lernen Sie, wie Sie einfache Animationen durchführen, um einen Ladeeffekt für diesen Heldenbereich zu erzeugen. Dann lernen Sie, wie Sie Treiber verwenden, um vertikale Scroll-Effekte zu erstellen. Dann, wie Sie mit Komponenten arbeiten, um Khobar-Effekte zu erstellen. Außerdem erfahren Sie, wie Sie die Animationszeitachse verwenden, um flüssige Animationen zu erstellen und komplexe Interaktionen zu animieren. Die Verwendung mehrerer sind Bohrungen. Schließlich haben Sie einen sehr einfachen Effekt geschaffen, der wie ein unendliches Pferd auf Gelehrte aussieht. Ehrfürchtig. Wenn Sie also bereit sind, Ihre Datei zu exportieren, setzen Sie bitte Ihr Vorschaufenster zurück und drücken Sie die Steuerung und den Buchstaben V für Victor, und es wird alles aufnehmen, was Sie im Vorschaufenster tun. Also gehen Sie über alles, was Sie erschaffen haben. Wenn Sie fertig sind, klicken Sie erneut auf Control V, um die Aufzeichnung zu beenden. Jetzt können Sie Ihre Datei als Videodatei oder Geschenkdatei exportieren, um, um, oder Fortschritt, aber ehrlich gesagt, haben tatsächlich nie die letzte Option verwendet. Eine weitere coole Sache, die Sie hier tun können, ist, wenn Sie zur Datei gehen und wählen erkundete Mac-App. Dadurch wird eine Anwendungsdatei erstellt, die nur auf dem Mac wiedergegeben werden kann Sie können sie jedoch mit Entwicklern oder Designern teilen, mit denen Sie arbeiten. Also da hast du es. Ihr Porta-Typ. Es ist wie geil. Das ist also meine erste Klasse, und ich würde gerne Ihr Feedback hören. Und wenn Sie möchten, spielt die Klasse mit einem Freund geteilt. auch nicht, Vergessen Sieauch nicht,Ihr Projekt in die Galerie einzureichen und Ihre Rezension zu hinterlassen. Ich möchte große mehr Klassen wie diese in der Animation, und Sie Ich Und wenn Sie über sie hören möchten, klicken Sie auf die Fuller, aber danke.