Interaktive Animationen in Rive: Ein Leitfaden für Anfänger zur Staatsmaschine

1. Einführung: Willkommen alle zusammen und danke, dass ihr zu mir gekommen seid. Ich heiße Yaya Und in diesem Kurs werden wir uns auf RIV State Machine konzentrieren und interaktive Animationen erstellen RIV verwandelt statische Grafiken in interaktive Animationen , mit denen die Leute eigentlich herumspielen und auf die sie klicken wollen Es ist ein totaler Game-Changer für Web, Apps und Spiele. Wenn Sie Animator, Motion-Designer oder Produktdesigner sind und Ihrer Arbeit Interaktivität verleihen möchten, sind Sie hier genau richtig Ein bisschen über mich: Ich bin ein freiberuflicher Motion-Designer mit über zehn Jahren Erfahrung in der Arbeit mit Kunden aus der ganzen Welt Die meiste Zeit habe ich traditionelle Tools wie After Effects und Cinema 40 verwendet. Aber als ich Drive entdeckte, fühlte es sich ehrlich gesagt so an, als würde ich mich erneut in Motion Design verlieben . Es ist so ein lustiges und aufregendes Tool. Seitdem habe ich viel Zeit damit verbracht, die Besonderheiten von Wohnmobilen kennenzulernen, und ich freue mich sehr, und ich freue mich sehr was ich gelernt habe, mit Ihnen zu teilen. Ich habe dieses Tuch entworfen, um die Lernkurve etwas weniger einschüchternd und unterhaltsamer zu gestalten Sobald es klickt, ist es ein mächtiges Werkzeug, das Sie beim Sprechen haben Richtig, lass uns anfangen. zunächst sicher, dass Sie RV installiert haben , und richten Sie ein Konto ein. Den Link finden Sie in der Kursbeschreibung. 2. Die Benutzeroberfläche von Rive verstehen: Nun, da wir alles eingerichtet haben, lassen Sie uns einen Rundgang durch die Benutzeroberfläche von Re machen. Nur eine Vorwarnung. Das Wohnmobil wird ziemlich oft aktualisiert. sehen die Dinge möglicherweise anders aus Auf Ihrem Bildschirm sehen die Dinge möglicherweise anders aus, aber machen Sie sich keine Sorgen. Die Funktionen und Tools sind alle noch da, nur vielleicht an einer etwas anderen Stelle. Wenn Sie sich mit der Oberfläche vertraut machen, wird Ihr Arbeitsablauf in RIV viel effizienter Nehmen Sie sich etwas Zeit, um jeden Abschnitt zu erkunden Sobald Sie bereit sind, werden wir uns mit der Animation mit der Steakmaschine befassen Animation mit der Steakmaschine Hier im Home-Bereich findest du deine letzten Dateien, Links zu einigen nützlichen Tutorials und Community-Beispiele, in denen du Projekte anderer Künstler in der Community erkunden und sehen kannst , was die Leute machen Hier können Sie Ihre Dateien nach Namen durchsuchen, und hier unten haben Sie Ihre persönlichen Dateien. Wenn Sie möchten, können Sie Ihre Dateien in Projekten organisieren , wie ich es hier für diesen Skillshare-Kurs getan habe Sie können mit der rechten Maustaste klicken, um einen neuen Ordner oder eine neue Datei zu erstellen , oder auf die Symbole oben rechts klicken Oben haben wir die Werkzeugleiste. Hier können wir unsere Datei anpassen, Links zum Teilen exportieren und erstellen, Zeichenflächen, Layouts und Gruppen erstellen und Werkzeuge wie Stift und Formen, Grenzen, Text und Ereignisse entwerfen Grenzen, Text und Hierarchie und Asset-Panel. Auf der linken Seite befindet sich das Hierarchiefenster. Hier werden alle Objekte, Elemente, Steuerelemente und Animationen in Ihrer Datei ihren übergeordneten und untergeordneten Objekten und der Renderreihenfolge angezeigt . der Registerkarte „Assets“ können wir alle Assets sehen, die sich in diesem speziellen Projekt befinden, und dort können wir Assets wie Bilder, Ladifils und Audiodateien importieren Ladifils und Audiodateien Auf der rechten Seite haben wir den Inspektor. In diesem Bereich können Sie die Eigenschaften für das ausgewählte Objekt anpassen Eigenschaften für das ausgewählte Objekt dynamisch auf der Grundlage Ihrer Auswahl und des aktuellen Modus aktualisieren . Der zentrale Bereich ist die Bühne, eine unendliche Leinwand, auf der Sie Zeichenflächen mit all Ihren Grafiken platzieren können Zeichenflächen mit all Ihren Grafiken platzieren Bisher waren wir im Designmodus. Aber wenn wir hier klicken, gehen wir in den Animationsmodus. Hier richten wir unsere Zustandsmaschinen und Zeitlinien ein. Hier auf der Timeline können Sie Animationen erstellen, können Sie Animationen erstellen Wiedergabesteuerung zugreifen und Keyframes für Ihre Objekte festlegen Im Zustandsmaschinenmodus wird die Zeitleiste durch das Zustandsmaschinen-Diagramm ersetzt, sodass Sie Animationen visuell miteinander verbinden und die Logik der Übergänge definieren 3. Einführung in die Staatsmaschine: Okay, lassen Sie uns über die State Machine sprechen. Dadurch reagieren Animationen auf Benutzeraktionen. Stellen Sie sich das als eine Reihe von Regeln vor, die vorschreiben , wann und wie ein Übergang zwischen Staaten erfolgen soll Hier ist ein Beispiel. Wir haben einen Zustand, in dem sich der Schalter links befindet, dann einen anderen, in dem sich der Schalter rechts befindet und seine Farbe geändert hat. In der Zustandsmaschine können wir Eingaben und Listener verwenden, um Interaktionen einzurichten und Übergänge verwenden , um den Fluss zwischen den Zuständen herzustellen Wenn wir dann spielen, können wir hier unsere Interaktionen testen Jetzt werden wir diese interaktive Animation gemeinsam neu erstellen diese interaktive Animation gemeinsam Laden Sie die Ressourcendatei herunter, ziehen Sie die Dot Rev-Datei in RIV und folgen Sie dann meinen Schritten 4. Die Hierarchie aufräumen: Bei RIV ist es wichtig , dass Sie Ihre Ebenen und Ihre Hierarchie organisieren , bevor Sie in den Animationsmodus wechseln Wenn Sie anfangen, Keyframes hinzuzufügen und dann in den Entwurfsmodus zurückkehren und Dinge ändern, können Ihre Animationen kaputt und Sie erhalten unerwünschte Ergebnisse Bleiben wir also im Entwurfsmodus und organisieren wir die Dinge schnell Wenn Sie mit SVG-Dateien arbeiten müssen, können Sie im Bedienfeld „Elemente “ unter „Bilder“ auf die Plus-Schaltfläche klicken, “ unter „Bilder“ auf die Plus-Schaltfläche klicken, Ihre SVG-Datei auswählen und auf Hochladen klicken. Ich kann es auf die Bühne ziehen oder mit der rechten Maustaste auf „Zeichenfläche generieren“ klicken In der Hierarchie können wir unser Design sehen, und in dieser Gruppe sehe ich alle meine Objekte Bevor wir etwas anderes tun, müssen wir die Hierarchie in Gruppen organisieren und alle Ebenen umbenennen. Das wird uns das Leben erheblich erleichtern, wenn wir später animieren Ich verwende das Symbol „Einblenden “, um zu erkennen, welche Ebene ich gerade bearbeite Ich gehe von unten nach oben vor. Das ist die Hintergrundebene, und ich lösche sie gerne einfach weil Rave der Zeichenfläche hier bereits Füllfarbe hinzugefügt hat der Zeichenfläche hier bereits Füllfarbe hinzugefügt Also werde ich das auf Weiß ändern, aber wisse einfach, dass du es komplett entfernen kannst , wenn du eine transparente Tafel haben willst Ich möchte hier auf die Symbole auf der linken Seite hinweisen. Dieser sagt uns, dass es sich um eine benutzerdefinierte Formebene mit einem benutzerdefinierten Pfad handelt , wohingegen die Rechteck- und Ellipsensymbole uns sagen, dass es sich um prozedurale Formen handelt , die einige zusätzliche Parameter wie Eckrunde und Ursprung haben einige zusätzliche Parameter wie Eckrunde und Ursprung Sie können jederzeit in einen benutzerdefinierten Pfad konvertieren , indem Sie auf die Eingabetaste klicken. Beachten Sie jedoch, dass Sie ihn nicht wieder in eine prozedurale Form konvertieren können ihn nicht wieder in eine prozedurale Form konvertieren Jetzt möchte ich dir eine harte Regel aufstellen und ich möchte, dass du darauf schwörst. Gruppiere deine Objekte immer, immer, immer. Immer, vertrau mir. Das würde Ihnen später viel Herzschmerz ersparen und Ihnen viel Flexibilität beim Animieren geben viel Flexibilität beim Animieren Großartig. Lass uns alles gruppieren und umbenennen. Der grüne Punkt dient nur als Referenz, also gruppiere ich ihn und verschiebe ihn später nach oben, ich werde ihn einfach löschen. noch , Ich möchte noch, dass du immer eine Stammgruppe erstellst . Immer. Diese Gruppe wird nicht animiert, aber sie ermöglicht es Ihnen, die gesamte Animation neu zu positionieren und zu skalieren, ohne dass etwas kaputt geht Und ich möchte diese Gruppe genau in der Mitte der Zeichenfläche Jetzt habe ich diese Hauptgruppe mit dem Ankerpunkt in der oberen linken Ecke Zuerst werde ich die Gruppierung mit der Tastenkombination Shift Command G aufheben mit der Tastenkombination Shift Command . Dann ist es am besten , eine Stammgruppe genau in der Mitte zu erstellen, indem Sie eine leere Gruppenebene erstellen Sie können die Tastenkombination G verwenden und auf eine beliebige Stelle auf der Zeichenfläche klicken Richten Sie dann mit dem Ausrichtungswerkzeug zur Mitte aus und ziehen Sie alle anderen Ebenen hinein Ich werde diese Gruppe umbenennen. Dann möchte ich für alle Fälle eine weitere Gruppe erstellen , und das war's. Wir haben die Hierarchie organisiert und sind bereit, in den Animationsmodus zu wechseln 5. Einrichten von Staaten mit Zeitleisten: In Ordnung, schnall dich an. Wir wechseln in den Animationsmodus und richten Zeitleisten und Jetzt werde ich hier einige neue Konzepte vorstellen. Machen Sie sich also keine Sorgen, wenn die Dinge nicht Meine Empfehlung, sich diese Lektion einmal komplett anzusehen , um ein Gefühl dafür zu bekommen, wie alles funktioniert, und es wirklich zu verstehen. dann zurück, spulen Sie zurück, machen Sie eine Pause, wenn nötig, und folgen Sie den Anweisungen in Ihrem eigenen Tempo Du hast das. Wechseln Sie in den Animationsmodus Standardmäßig haben wir eine Zustandsmaschine und eine Zeitleiste. Mein Plan ist es, zwei Zeitleisten zu erstellen, eine für jeden Status, eine für den eingeschalteten Zustand und eine weitere für den ausgeschalteten Gehen Sie dann zum Graphen der Zustandsmaschine und verbinden Sie sie mit Übergängen , um die Animation zu erstellen Ich gehe zur ersten Zeitleiste und benenne sie in Status eins um. Es ist also klar, dass diese Zeitleiste einen unserer Animationsstatus darstellt. Ich kann mit der rechten Maustaste darauf klicken und es duplizieren und es dann in Status zwei umbenennen. Jetzt müssen wir Rive mitteilen , welche Eigenschaften wir animieren möchten In diesem Fall weiß ich, dass ich möchte sich der Punkt entlang der X-Achse bewegt Dazu füge ich einen Keyframe hinzu. Ich klicke auf das kleine Diamantsymbol neben dem Positionswert Sobald es blau wird, bedeutet das, dass ein Keyframe hinzugefügt wurde Sie werden es auch in der Timeline unten sehen. Wenn ich die Ebene erweitere, kann ich genau sehen, was animiert wird. Es ist die Position der Punktebene, X-Achse und ihr aktueller Wert. Lassen Sie uns jetzt dasselbe in Status zwei tun. Aber dieses Mal ziehe ich, anstatt auf den Diamanten zu klicken, einfach den X-Achsenpfeil nach rechts. RIV fügt automatisch einen Keyframe hinzu, wenn Sie etwas anpassen, neben dem sich ein Diamant befindet Ich gebe -63,5 für die Position ein, da dies der entgegengesetzte gespiegelte Wert Um das zu testen, springen wir zwischen Zustand eins und Zustand zwei hin und her Ja, sieht gut aus. Der Positionswechsel funktioniert perfekt. Machen wir jetzt dasselbe mit den Farben. Klicken Sie im Inspektor auf die Punktebene , um die in dieser Gruppe verwendeten Farben zu sehen. Wir können jedem von ihnen Keyframes hinzufügen, genau wie wir es bei der Position getan haben Wechseln Sie nun zu Status zwei und wählen Sie diesmal sowohl die Punktebene als auch die Referenzebene Auf diese Weise können wir die Farbwerte aus beiden Ebenen gleichzeitig abrufen . Sie im Inspektor unter den ausgewählten Farben Kopieren Sie im Inspektor unter den ausgewählten Farben einfach die Hex-Werte und fügen Sie sie ein. Wenn ich Sie auf der Timeline treffe, kann ich schnell alle Eigenschaften mit Keyframes anzeigen, und Sie werden sehen, dass die aktualisierten Gelbtöne jetzt im zweiten Status angezeigt werden Lassen Sie uns zwischen den beiden Zuständen hin- und herschalten. Großartig. Der Farbübergang funktioniert. Wir sind jetzt bereit, das an die Zustandsmaschine anzuschließen. Standardmäßig gibt uns RIV eine Zustandsmaschine mit einer bereits verbundenen Timeline Wenn ich auf Abspielen klicke, wirst du sehen, dass diese Timeline nur einmal abgespielt wird, noch nichts Besonderes Lassen Sie uns nun Status zwei hineinziehen und Zustand eins damit verbinden. Dadurch entsteht ein Übergang zwischen den beiden Zuständen. Aber wenn wir es jetzt abspielen, werden Sie feststellen, dass es sofort Zustand eins überspringt und direkt in Zustand zwei springt Das passiert, weil wir Rive nicht gesagt haben , wann dieser Übergang erfolgen soll Jetzt müssen wir also eine Bedingung einrichten , um zu kontrollieren, wann der Übergang stattfindet. Bevor wir unseren Übergängen Bedingungen hinzufügen können, müssen wir einige Eingaben einrichten. Sie finden das Eingabefeld gleich hier. RIV gibt uns drei Arten von Eingaben. Zahl, Boolean und Trigger. Fangen wir mit dem Auslöser an. Wenn ich klicke, um einen hinzuzufügen, wirst du sehen, dass er wie eine One-Shot-Eingabe funktioniert. Perfekt für Dinge wie einen Klick, bei denen Sie möchten, dass etwas nur einmal passiert und dann zurückgesetzt wird. Jetzt können wir zum Übergang zurückkehren und im Inspektor unseren Trigger als Bedingung hinzufügen. Also hier ist jetzt die Logik. Wir betreten hier die Zustandsmaschine. Es spielt den ersten Status ab und wartet dann darauf, dass der Trigger ausgelöst wird, bevor es in den zweiten Zustand übergeht. Lass es uns testen Drücken Sie auf Play, klicken Sie auf den Auslöser und es funktioniert. Aber wenn ich erneut auf den Auslöser klicke, passiert nichts. Und das liegt daran, dass wir keinen Übergang eingerichtet haben , der von Zustand zwei zu Zustand eins zurückführt. Um das zu beheben, erstellen wir einen Übergang, der von Zustand zwei zu Zustand eins zurückführt. Sobald Sie sie verbunden haben, sehen Sie einen kleinen Pfeil, der zurück zu Status eins zeigt. Fügen Sie jetzt einfach denselben Trigger wie die Bedingung für diesen neuen Übergang hinzu. Und wir haben es geschafft. Jetzt wechselt die Zustandsmaschine zwischen den beiden Zuständen hin und her 6. Tauchen Sie tiefer ein – Übergänge und Zuhörer: wir nun die grundlegenden Übergänge zwischen Zuständen haben, wollen wir noch einen Schritt weiter Lassen Sie uns unsere Übergänge etwas interessanter gestalten. Im Moment erfolgt der Wechsel von Zustand eins zu Zustand zwei sofort. Es gibt kein Bewegungssinn. Wenn wir den Übergang auswählen, werden Sie feststellen, dass wir einige Parameter haben, mit denen wir spielen können. Fangen wir mit der Dauer an. Sie ist derzeit auf null Millisekunden eingestellt. Ändern wir das also auf 500 Millisekunden. Wenn wir jetzt die Animation abspielen und den Auslöser auslösen, bekommen wir Der Punkt gleitet über eine halbe Sekunde von links nach rechts entlang der X-Achse. Als Nächstes können wir das Gefühl des Übergangs verfeinern indem wir die Interpolation mithilfe dieses Diagramms hier unten anpassen mithilfe dieses Diagramms hier unten Dieses Diagramm stellt die gesamte Dauer von 0 bis 500 Millisekunden dar, und die Kurve zeigt, wie sich der Übergang im Laufe dieser Zeit von Zustand eins zu Zustand zwei bewegt von Zustand eins zu Zustand zwei Im Moment ist die Kurve perfekt linear, weshalb sich die Bewegung etwas steif oder roboterhaft anfühlt Aber wenn wir hier diese kubische Option wählen, erhalten wir diese wunderschöne geschwungene Linie Jetzt lässt die Bewegung nach, geht linear durch die Mitte und lässt am Ende wieder nach Diese Art der Animation wird als Easing bezeichnet. Beachten Sie, wie viel glatter es sich jetzt anfühlt. Es ist natürlicher, weil Objekte in der realen Welt Gewicht und Masse haben Sie starten und stoppen nicht sofort. Sie brauchen einen Moment, um schneller zu werden, und einen weiteren Moment, um langsamer zu werden. Sie können die Kurve auch fein abstimmen , indem Sie die Griffe anpassen. Wir können zum Beispiel einen längeren Ease-Out einrichten. Die Animation beginnt also schnell und verlangsamt sich dann allmählich. Siehst du, wie das das Gefühl verändert? Ich ermutige Sie wirklich, mit dem Diagramm herumzuspielen, verschiedene Kurvenformen auszuprobieren und zu sehen, welche Art von Bewegung Sie erzeugen können. Abhängig von Ihrem Projekt möchten Sie vielleicht etwas Schnelles, Geschmeidiges oder Dramatischeres Bleiben wir vorerst bei der kubischen Option. Es ist eine solide Standardeinstellung, die in den meisten Fällen gut funktioniert. Oh, als kleiner Tipp: Du kannst deine Kostüm-Lockerungskurve auch kopieren und einfügen , wenn du sie in anderen Übergängen wiederverwenden möchtest Lassen Sie uns nun über einen wirklich wichtigen Teil der Arbeit mit RIV sprechen , nämlich das Hinzufügen von Bis zu diesem Zeitpunkt haben wir die Animation manuell ausgelöst, indem wir auf die Eingabe geklickt Aber das ist nur zum Testen. Was wir wirklich wollen, ist, dass der Benutzer direkt mit der Schaltfläche auf der Zeichenfläche interagiert Wie machen wir das also möglich? Hier kommen die Zuhörer ins Spiel. Öffnen wir das Listener-Panel und klicken Sie auf das Plus-Symbol , um ein neues zu erstellen Sie werden sehen, dass der Inspektor uns jetzt ein Zielfeld gibt. Klicken Sie darauf und RIV fordert Sie auf, ein Element auf der Leinwand auszuwählen In diesem Fall möchten wir, dass die Vorderseite der Schaltfläche das interaktive Ziel Sie können es auch in der Hierarchie auswählen. Jetzt, wo wir das Ziel festgelegt haben, fragt der Inspektor, welche Aktion wollen wir achten? Hier gibt es ein paar Optionen, aber für unsere Schaltfläche wählen wir Klick. Also, wann immer der Benutzer auf die Schaltfläche klickt, wollen wir eine Eingabe auslösen. Okay, kurze Zusammenfassung dessen, was wir getan haben. Wir haben einen Listener erstellt, ein Ziel festgelegt, die Interaktion ausgewählt und sie mit einer Eingabe verknüpft, die die Animation steuert Lass es uns testen. Drücken Sie auf Play, gehen Sie über das Gesicht der Taste und klicken Sie. Nett. Es funktioniert. Und wenn wir irgendwo anders klicken, passiert nichts. liegt daran, dass die Interaktion nur an das Ziel des Zuhörers gebunden In unserem Fall das Gesicht des Buttons. Ich werde diesen Zuhörer in Face Click umbenennen, nur um die Dinge zu organisieren Ich denke, wir sind jetzt bereit, eine weitere Interaktionsebene hinzuzufügen , einen Hover-Effekt Das wird dem ähneln, was wir gerade mit einem Klick gemacht haben, also werden wir es etwas schneller durchgehen Wir beginnen damit, zwei neue Zeitleisten zu erstellen , um die Hover-Zustände zu definieren Bewegen Sie den Mauszeiger ein und fahren Sie mit dem Mauszeiger weg. Ziehen Sie die State Machine nach oben, nur um Ordnung zu halten Fangen wir mit dem Mauszeiger an. Wenn der Benutzer den Mauszeiger über die Schaltfläche bewegt, möchte ich, dass das Gesicht etwas heller aussieht Also wähle ich die Gesichtsebene aus und erhöhe die Helligkeit in den Farbeinstellungen auf 100% Denken Sie daran, dass Rive Keyframes in beiden Zuständen sehen muss. Stellen Sie also sicher, dass Sie der Farbe auf der Gesichtsebene in jeder Timeline Keyframes hinzufügen der Farbe auf der Gesichtsebene in jeder Machen wir einen kurzen Test. Schweben Sie mit dem Mauszeiger an, fahren Sie mit dem Mauszeiger aus und wieder ab. Perfekt. Wir haben jetzt zwei Arbeitszustände für die Hover-Interaktion Jetzt fragst du dich vielleicht, wie wir das mit der vorhandenen Klick-Animation kombinieren Dafür müssen wir unserer Zustandsmaschine eine neue Ebene hinzufügen . Im Moment läuft alles auf Ebene eins. Also benenne ich das um in etwas wie Klicken auf Aus, um die Dinge zu organisieren. Das Coole an RV State Machine ist, dass Sie damit mehrere Ebenen von Interaktionen übereinander stapeln können mehrere Ebenen von Interaktionen übereinander stapeln . Lassen Sie uns also weitermachen und eine neue Ebene nur für die Hover-Interaktion hinzufügen eine neue Ebene nur für die Hover-Interaktion Ziehen wir nun die beiden Hover-Zeitlinien in das Diagramm und verbinden Wir möchten, dass die Animation mit dem Mauszeiger aus beginnt und dann zum Hover über geht, wenn der Benutzer den Mauszeiger bewegt, und zum Hover off zurückkehrt , wenn er den Cursor Also hier ist die Logik. Wenn der Cursor die Schaltfläche betritt, wechseln wir zu „Hover on“, und wenn der Cursor beendet wird, wechseln wir zurück zu „Hover Um diese Interaktion zu steuern, müssen wir eine neue Eingabe hinzufügen Und für Hover ist Mobbing die perfekte Wahl. Es ist ganz einfach. Es kann entweder wahr oder falsch sein. Es funktioniert hervorragend für so etwas wie in anderen Staaten. Jetzt können wir diesen Bullaner als Bedingung benutzen. Sie für den Übergang von Hover Off zu Hover On so ein, Stellen Sie für den Übergang von Hover Off zu Hover On so ein, dass er losgeht, wenn der Bullian Und für den Übergang zurück stellen Sie den Wert auf Start, wenn das Bullion falsch Machen wir einen kurzen Test. Klicken Sie, um den Tyrann auf wahr zu setzen, und wir setzen Hover ein. Klicken Sie erneut, um es auf „Erzwingen“ zu setzen, und wir schalten Hover wieder Nett. Das funktioniert genauso wie erwartet. Lassen Sie uns jetzt etwas Feinschliff hinzufügen, genau wie wir es bei der Klick-Interaktion getan haben. Ich lege die Dauer auf 150 Millisekunden fest und wende eine kubische Interpolation an, um eine gleichmäßigere, natürlichere eine gleichmäßigere Lass es uns noch einmal abspielen. Ja, das fühlt sich gut an Der letzte Schritt besteht darin, diese Hover-Interaktion tatsächlich auf der Zeichenfläche zum Laufen zu bringen Hover-Interaktion tatsächlich auf der Zeichenfläche zum Laufen zu Dafür benötigen wir zwei Zuhörer. Einen, um zu erkennen, wann der Cursor die Schaltfläche betritt, und einen, um zu erkennen, wann der Cursor die Schaltfläche verlässt Ich nenne sie Hover Enter und Hover Exit, nur um die Übersicht zu behalten In Ordnung, lassen Sie uns die beiden Zuhörer einrichten. Legen Sie für den ersten Wert das Ziel auf „Face“ fest, wählen Sie den Zeiger Enter und setzen Sie die Bullion-Eingabe Sie dann für den zweiten Zuhörer dasselbe Ziel, Verwenden Sie dann für den zweiten Zuhörer dasselbe Ziel, aber wählen Sie diesmal die Option Pointer Exit und setzen Sie den Tyrann auf Um noch einmal zusammenzufassen, was wir getan haben: Wir warten darauf, dass der Cursor auf die Schaltfläche fährt, wodurch der Tyrann auf „Wahr“ gesetzt wird und der Mauszeiger über den Status bewegt wird. Und wenn der Cursor beendet wird, wechselt das Mobbing auf „Falsch“, sodass wir wieder mit dem Mauszeiger abfahren müssen. Lass es uns testen. Drücke auf Play und bewege den Mauszeiger über die Schaltfläche. Mauszeiger darauf. Bewegen Sie den Cursor weg. Bewegen Sie den Mauszeiger weg. Perfekt. Das ist unsere Hover-Interaktion, die funktioniert Und hier ist der coole Teil. Wenn Sie auf die Schaltfläche klicken, funktioniert die Ein-/Aus-Interaktion auch weiterhin. Jetzt haben wir also mehrere Interaktivitätsebenen in einer Animation kombiniert mehrere Interaktivitätsebenen in einer Animation Machen Sie weiter und probieren Sie es selbst aus. Finden Sie heraus, ob Sie Ihren Designs Interaktionen mit der Maus hinzufügen können. Jetzt hast du alles, was du brauchst, um deine erste interaktive Animation zu erstellen Seine Fähigkeiten gehen weiter als das , was wir in diesem Kurs betrachten, aber er basiert auf diesen Grundlagen, Zuständen, Übergängen, Eingaben und Zuhörern Es ist also an der Zeit, dass Sie diese Grundlagen in die Praxis umsetzen Ich kann es kaum erwarten, es zu sehen. 7. Interaktives Klassenprojekt: Okay, jetzt ist es Zeit zu üben. Es ist toll, sich die Lektionen anzusehen, aber wenn du wirklich besser werden willst, musst du sie selbst in die Hand nehmen. Dinge ausprobieren, Mist bauen, Dinge herausfinden, dort findet das wahre Lernen statt Nur so können Sie Selbstvertrauen aufbauen und wirklich verstehen, wie das alles funktioniert für dieses Klassenprojekt also Wählen Sie für dieses Klassenprojekt also eines der Designs in den Ressourcendateien aus und versuchen Sie, Ihre eigene interaktive Animation von Grund auf neu zu erstellen. Hier ist ein vollständiger Zeitraffer des Prozesses von Anfang bis Ende. Es ist eine kurze Zusammenfassung, damit alles und das, was wir bisher gelernt haben, untermauert Stellen Sie sicher, dass Sie Ihre Hierarchie organisieren, Ihre Objekte gruppieren und die Ebenen umbenennen Erstellen Sie zwei Staaten. Fügen Sie Übergänge hinzu. Fügen Sie Eingaben hinzu. Fügen Sie den Übergängen Bedingungen hinzu. Fügen Sie Listener hinzu und legen Sie die Eingabeänderungen fest. Hover-Interaktion hinzufügen. Ich kehrte zum Entwurfsmodus zurück und fügte einen neuen Füllverlauf hinzu, der als Hover-Highlight verwendet werden soll Verwenden Sie eine Mobbing-Eingabe. Fügen Sie zwei Zuhörer für „Wahr“ und „Falsch“ hinzu. Und es ist geschafft. Viel Glück. Wir sehen uns in der nächsten Lektion, um Ihnen zu zeigen, wie Sie Ihre Arbeit mit anderen teilen können. 8. Teile deine Arbeit: Sie haben also gerade Ihre erste interaktive Animation erstellt . Gut gemacht. Jetzt ist es an der Zeit, es mit uns in der Projektgalerie zu teilen. Fangen wir mit einem Titelbild an. So erstellen Sie ein RIV. Klicken Sie auf Zu Render Q hinzufügen. Wählen Sie den Entwurfsmodus. Wählen Sie den Entwurfsmodus Wählen Sie das PNG-Format und klicken Sie auf Start. Sobald es fertig ist, gehen Sie zur Registerkarte „Vollständig“ und laden Sie Ihr Bild herunter. Sie können dieses PNG als Titelbild hochladen, den Maßstab Ihres Bildes wählen und auf Senden klicken. Fügen Sie der Beschreibung einen Projekttitel und einige Wörter hinzu. Wir haben also zwei Möglichkeiten, unsere Arbeit hier zu teilen. Option eins, kostenpflichtiger Plan. Wenn Sie den kostenpflichtigen Tarif von RV nutzen, klicken Sie auf Link zum Teilen generieren. Kopieren Sie dann den Einbettungscode von hier. Dann geh und füge den Code in die Beschreibung ein. Es ist eine großartige Möglichkeit, Ihre interaktive Animation in Aktion zu zeigen Ihre interaktive Animation in und den Benutzer in Echtzeit damit interagieren zu lassen. Option zwei, der kostenlose Plan. Wenn Sie die kostenlose Version von RIV verwenden, können Sie keinen Link zum Teilen erstellen Wenn Sie also Dinge wie Interaktionen mit dem Mauszeiger oder Klicken anzeigen möchten , können Sie ein Bildschirmaufzeichnungstool wie Jiffy Capture auf dem Mac oder PC verwenden wie Jiffy Capture auf dem Mac oder PC können Sie Ihren Bildschirm aufnehmen und in JIF konvertieren Öffnen Sie einfach Ihre Animation in RIV, starten Sie Jiffy Capture und positionieren Sie den Aufnahmerahmen Stellen Sie sicher, dass in den Einstellungen der Capture-Cursor aktiviert ist, damit Ihre Interaktionen sichtbar Rufen Sie dann Ihre Interaktionen ab und exportieren Sie sie als Jif. Ziehen Sie dann Ihren Jif per Drag & Drop oder fügen Sie Ihren Einbettungscode ein. Wenn du fertig bist, klicke auf Veröffentlichen und deine Arbeit wird live in der Galerie angezeigt. Das ist es. Ich kann es kaum erwarten zu sehen , was du geschaffen hast. Deine Arbeit mit anderen zu teilen ist ein großer Schritt vorwärts, also überspringe es nicht. 9. Abschließende Gedanken & nächste Schritte: Okay. Glückwunsch. Du hast es geschafft. Sie haben den Kurs bestanden und die Grundlagen interaktiver Animationen mit RV State Machine gelernt. Sie sollten sich jetzt wohl dabei fühlen, Animationsstatus zu erstellen , Übergänge einzurichten und Interaktionen wie Klicken und Bewegen der Maus zu verwenden , um Ihre Designs zum Leben zu erwecken Das ist ein großer Schritt, vor allem, wenn Sie zum ersten Mal mit RV arbeiten Natürlich ist, wie bei jedem kreativen Werkzeug, der Schlüssel zur Beherrschung von RV die Praxis, Praxis Je mehr Sie experimentieren und bauen, desto selbstbewusster werden Sie Also mach weiter. Ein guter nächster Schritt ist die Erkundung des Rives-Marktplatzes Sie können sehen, was andere bauen. Und wenn Ihnen etwas auffällt, können Sie auf die Remix-Taste klicken Es wird im Editor geöffnet, und Sie können unter der Motorhaube und dem Rückwärtsmotor nachschauen, wie die Dinge gebaut wurden Ehrlich gesagt habe ich so viel gelernt, als ich gesehen habe, wie andere Designer Probleme in ihren Dateien lösen. Vielen Dank, dass du an diesem Kurs teilgenommen hast. Ich hoffe, du hattest Spaß und freust dich darauf, weiter zu kreieren. keine Angst zu spielen, Dinge kaputt zu machen, seltsame Ideen auszuprobieren. Von dort kommen all die guten Sachen. Animiere weiter und wir sehen uns beim nächsten Mal.