So erstellen Sie animierte Folien für Ihre Videos

1. Willkommen im Kurs: Leute, mein Name ist Adi Purdila, und wenn ihr Videos macht und wollt, dass sie professioneller aussehen, ist dieser Kurs genau das Richtige für Ich werde Ihnen zeigen, wie Sie animierte Folien wie diese erstellen , die Sie direkt in Ihren Videos verwenden können Wir werden das in Lodi Lab, einem sehr einfach zu bedienenden browserbasierten Animationstool, von Grund auf neu erstellen einem sehr einfach zu bedienenden browserbasierten Animationstool Wir lernen zunächst, wie das Tool funktioniert, und erstellen dann eine vollständig animierte Einführungsfolie mit Textanimationen, sich bewegenden Hintergrundformen und richtigen Timing für alle Elemente Sobald die Folie fertig ist, zeige ich Ihnen auch, wie Sie sie exportieren und in einem echten Videoeditor ablegen können, sodass Sie genau sehen können , wie sie in Ihren Arbeitsablauf passen würde Wir treffen uns gerade, mein Name ist Adi. Ich bin ein UIUX-Designer und Designpädagoge. Ich erstelle seit 2010 Video-Tutorials und -Kurse und ehrlich gesagt wollte ich schon lange mehr Animationen zu meinen eigenen Videos hinzufügen, aber die Tools fühlten sich immer viel zu Als ich Lottielab fand, änderte sich das, und genau aus diesem Grund wollte ich diesen Kurs machen Nun, hier sind ein paar Gründe warum dieser Kurs für Sie sein könnte Erstens benötigen Sie keine Animationserfahrung. Ich werde Sie Schritt für Schritt durch alles führen, und wenn Sie noch nie ein Animationswerkzeug angefasst haben, ist das völlig in Ordnung. Wir fangen bei Null an. Zweitens geht das, was Sie hier lernen, über das Erstellen von Folien hinaus. Sobald Sie verstanden haben, wie Animations-Timelines funktionieren und wie man über Bewegung nachdenkt, können Sie das auf jedes Animationsprojekt anwenden, nicht nur auf Videofolien Und drittens haben Sie am Ende dieses Kurses eine wirklich fertige animierte Folie , die Sie sofort in Ihren Videos verwenden können Dieser Kurs richtet sich an Ersteller von Inhalten, Pädagogen und alle, die Videos erstellen Es sind keine Animationserfahrungen erforderlich. Ich würde jedoch empfehlen, grundlegende Figma-Kenntnisse da wir diese verwenden werden, um das Design in Lottielab zu integrieren. In Ordnung, ich freue mich darauf. Ich hoffe, du bist es auch, also lass uns darauf eingehen. In der nächsten Lektion werde ich Ihnen mehr Details über das Klassenprojekt geben. 2. Das Kursprojekt: In dieser Lektion möchte ich über das Klassenprojekt und die Starterdatei sprechen , die ich zusammengestellt habe. Das Klassenprojekt ist einfach. Sie müssen mit Lottielab Ihre eigene animierte Folie erstellen . Es muss nicht mit dem übereinstimmen, was wir im Unterricht erstellen, also zögern Sie nicht, die Farben, Texte und Formen zu ändern, was auch immer Mach es zu deinem. Und natürlich ist es völlig in Ordnung, dasselbe zu kreieren wie ich. Es ist deine Wahl. Um Ihnen den Einstieg zu erleichtern, habe ich eine Figma-Datei mit allen Designelementen vorbereitet , die wir im Kurs verwenden werden Den Download-Link finden Sie im Bereich Projekte und Ressourcen Die Datei enthält alle Formen, die Textebenen und das Gesamtlayout, mit dem wir arbeiten werden Alles ist bereits organisiert, sodass Sie sich auf den Animationsteil konzentrieren können , anstatt das Design von Grund auf neu zu erstellen. Sobald Sie mit Ihrer Animation fertig sind, würde ich mich freuen, wenn Sie sie im Projektbereich veröffentlichen würden. Sie können einen Screenshot, eine Bildschirmaufnahme oder sogar einen Link hochladen . Posten Ihres Projekts ist nicht verpflichtend, aber ich denke wirklich, dass es sich lohnt, es zu tun Es hilft dir, deinen eigenen Fortschritt zu verfolgen. Es gibt Ihnen etwas , auf das Sie zurückblicken können, und es hilft auch Ihren Kommilitonen, verschiedene Herangehensweisen zu erkennen und sich inspirieren zu lassen. Wenn Sie fertig sind, teilen Sie es bitte mit uns. Also gut, lass uns in die Klasse gehen. 3. Erste Schritte mit Lottielab: In dieser Lektion beginnen wir mit Lottielab. Ich zeige Ihnen, wo Sie sich registrieren können, führe Sie durch die Benutzeroberfläche und zum Schluss erstellen wir eine einfache Animation, und zum Schluss erstellen wir um zu sehen, wie Aber bevor wir auf all das eingehen, möchte ich eine Frage beantworten, die sich meiner Meinung nach viele von Ihnen stellen werden. Warum sollte ich Lottielab anstelle von Adobe After Effects verwenden , dem Industriestandard für Nun, der Grund ist einfach. Lottielab ist browserbasiert. Es ist viel einfacher zu erlernen und wurde für genau diese Art von Animation entwickelt Und After Effects ist sehr leistungsfähig, aber auch sehr kompliziert. Es ist teurer und benötigt viel Rechenleistung, um reibungslos zu funktionieren. Lassen Sie mich nun damit beginnen, Ihnen einige Alternativen zu Lottielab zu geben einige Alternativen zu Lottielab zu Jitter ist einer von ihnen, und das habe ich tatsächlich vor Lottielab Und dann gibt es noch Rive , das Motion Design wirklich, wirklich gut macht Rive, soweit ich weiß, ist es etwas komplexer, weil man damit quasi eine Menge Sachen erstellen kann, wie Spiele, wirklich coole Benutzeroberflächen und alle möglichen animierten Assets. Nun, Jitter ist eher simpel und es ist eine sehr einfache Methode, und es ist eine sehr einfache Methode Motion-Design für das Web zu erstellen Der Grund, warum ich Jitter nicht mehr verwende ist, dass es sehr teuer geworden Sie hatten irgendwann sehr erschwingliche Dienstleistungen oder Preise, aber sie haben kürzlich ihre Preisstruktur geändert Das veranlasste mich , mich woanders umzusehen. Und am Ende habe ich mich für Lottielab entschieden. Jetzt kann Lottielab verwendet werden, um viele Dinge zu erstellen. Es sind nicht nur Videofolien, oder? Lottielab eignet sich hervorragend für alle Arten von leichten Animationen, Dinge wie, Sie wissen schon, UI-Mikrointeraktionen, Logoanimationen, App-Onboarding-Bildschirme, sogar Marketingbanner, animierte Beiträge in sozialen Medien, Mit Lottielab können Sie eine Menge Dinge erstellen. Lassen Sie mich Ihnen einen kurzen Überblick über die App geben. Zuallererst können Sie zu ladilab.com gehen und dort ein Konto erstellen Sie gehen zur Registrierung oder Anmeldung und können sich mit Ihrem Google-Konto oder mit einer E-Mail anmelden Ihrem Google-Konto oder mit Ich werde dafür mein Google-Konto verwenden. Sobald Sie angemeldet sind, werden Sie zu Ihrem Dashboard weitergeleitet , wo Sie Ihre letzten Dateien sehen können. Sie haben auch Zugriff auf bestimmte Vorlagen. Und hier ist ein kurzer Vorgeschmack auf die Art von Animationen, die Sie mit Lottielab erstellen können . Die Animationen hier sind nicht sehr flüssig, weil ich auch dieses Video aufnehme , diesen Bildschirm, also ist meine CPU ein bisschen Aber ja, du kannst alle Arten von Animationen erstellen. Die sind ziemlich cool. Sie können nach Hause zurückkehren und Ihre Arbeit in Projekten organisieren oder einfach eigenständige Dateien erstellen. Klicken wir also hier oben rechts auf Neue Datei und erstellen eine neue Animationsdatei. Hier werden wir all unsere Animationen erstellen. Und es gibt vier Hauptbereiche, über die wir sprechen müssen. Wir haben dieses Bedienfeld auf der linken Seite, das Zugriff auf verschiedene Werkzeuge, Ebenen, verschiedene Formen und Symbole bietet . Wir können das Textwerkzeug hinzufügen und auch Bilder hinzufügen. Dann haben wir in der Mitte die Leinwand, auf der wir Zeichenflächen hinzufügen Zeichenflächen sind wie Seiten in Ihrem Projekt, und jede Animation ist in einer Zeichenfläche enthalten Auf der rechten Seite haben wir ein Eigenschaftenfenster, dem wir auch Dateien exportieren können Und ganz unten, über die gesamte Breite, befindet sich unsere Animations-Timeline, und ich werde Ihnen gleich zeigen, wie das funktioniert. Sie können die Größe der Zeichenfläche jederzeit steuern, indem Sie ihre Breite und Höhe in diesen Feldern ändern Und Sie können auch die Dauer, die endgültige Dauer der Animation, ändern endgültige Dauer der , indem Sie diesen Wert ändern Auch hier können wir den Hintergrund unserer Zeichenfläche ändern. Lassen Sie uns vorerst einfach Weiß verwenden. Lassen Sie uns nun eine sehr einfache Animation erstellen damit Sie verstehen, wie das Tool funktioniert. Lassen Sie uns ein Textelement animieren, oder? Und weil wir in diesem Kurs eine animierte Folie erstellen, ist das der häufigste Anwendungsfall für dieses Tool Ich drücke also T, um das Textwerkzeug aufzurufen, klicke darauf und gebe dann meinen Text ein. Ich fange mit Lottielab an, und ich werde es einfach in der Mitte meiner Zeichenfläche positionieren der Mitte Jetzt, wo der Text ausgewählt ist, kann ich im Eigenschaftenfenster die Schriftfamilie, Stärke, Größe, Zeilenhöhe, Buchstabenabstand, Ausrichtung und Farbe ändern Größe, Zeilenhöhe, Buchstabenabstand, Ausrichtung und Farbe So kann ich Text und andere Elemente sehr einfach anpassen. Und oben haben wir eine Schaltfläche mit der Aufschrift Animation hinzufügen. Wenn wir darauf klicken, haben wir Zugriff auf bestimmte Voreinstellungen. Und wenn ich mit der Maus auf ein bestimmtes Preset fahre, kann ich die Animation in Echtzeit auf meiner Zeichenfläche sehen Hier ist ein Fade, hier ist Show Height. Hier ist eine Folie und ein paar andere. Wir haben auch Ebenentransformationen, oder? Dies sind Animationen oder Voreinstellungen wir auf jede Art von Ebene anwenden können, nicht nur Und wir haben noch ein paar andere hier. Ich kann den Mauszeiger über sie halten, um eine Vorschau anzuzeigen. Ich persönlich werde Blur und Slide wählen. Für diese Demo Also werde ich darauf klicken und habe einige zusätzliche Optionen. Ich kann die Richtung wählen, in die der Text kommt. Wenn ich also hier klicke, beginnen die Buchstaben von der oberen linken Ecke aus zu animieren Aber ich bleibe einfach bei der Standardeinstellung. Ich kann die Dauer der Animation und die Beschleunigung ändern. Entscheiden wir uns für Smooth, weil ich denke, das funktioniert ein bisschen besser Und wenn ich nach unten scrolle, kann ich wählen, ob ich diese Animation auf Zeichenbasis anwenden möchte, also jedes Zeichen animieren, oder ich kann das Wort animieren, oder ich kann die Linie animieren, wenn ich einen mehrzeiligen Text habe Lassen Sie uns ein Wort auswählen. Außerdem werde ich hier die Glättung auf Glätten statt auf Linear einstellen. Okay, cool Sobald Sie eine Animation auf ein Element anwenden, wird die Animationszeitleiste geändert. Wir haben jetzt einen Eintrag für das Textelement, das wir verwendet haben, und dann die Animation , die wir darauf angewendet haben. Und wenn wir hier auf dieses Element klicken, ja, wir können die Eigenschaften der Animation ändern , genau wie ich es Ihnen zuvor gezeigt habe. Wenn ich jetzt meine Zeichenfläche auswähle, kann ich die Dauer der gesamten Animation ändern , die auf dieser Zeichenfläche stattfindet das für diese Demo Lassen Sie uns das für diese Demo auf 4 Sekunden einstellen Wenn wir nun herauszoomen und uns die Animations-Timeline ansehen, können wir sehen, dass der Cursor 0-4 Sekunden bewegt, was genau der Animationsdauer entspricht, die wir zuvor festgelegt haben Und ich kann den Cursor ganz einfach nehmen und ihn bewegen, wohin ich will Und ich kann auch auf diesen Bereich klicken, um den Cursor zu bewegen. Und wenn ich die Animation abspielen möchte, drücke ich einfach die Leertaste und sie wird in einer Schleife abgespielt. So wie das. Bisher haben wir diesen Text animiert, oder? Aber was ist, wenn wir ihn animieren müssen? Das heißt, wir haben den Text erscheinen lassen. Jetzt wollen wir ihn nach einer bestimmten Zeit verschwinden lassen . können wir tun, indem das Element auswählen und eine weitere Animation hinzufügen. Jetzt wird diese Animation an der Stelle hinzugefügt, an der sich der Cursor gerade befindet. Okay? Wenn ich es also ganz am Anfang positioniere und das Element auswähle und eine Animation hinzufüge, sagen wir, ich möchte dieselbe Animation hinzufügen , ja, dann wird die zweite Unschärfe-Folie demselben Element hinzugefügt , wieder an der Nullposition Aber jetzt habe ich zwei Animationen, die auf demselben Element miteinander konkurrieren Wenn ich also auf Play drücke, kann ich die Startanimation sehen, aber sozusagen nicht die Endanimation. Lassen Sie uns hier also ein paar Dinge tun. wir zunächst Wählen wir zunächst die zweite Animation aus, die wir hinzugefügt haben. Und im Eigenschaftenfenster wählen wir die Option aus, und wir können hier eine Vorschau sehen. Die Lockerung, ich möchte, dass das glatt geht. Und ich möchte auch pro Wort animieren. Außerdem möchte ich, dass diese Animation zu einem späteren Zeitpunkt stattfindet Ich kann also einfach auf die Timeline klicken und sie an eine andere Position ziehen. Okay? Gehen wir also davon aus, dass diese erste Animation bis zu 1,5 Sekunden dauert, und ich kann ihre Größe einfach so Dann kann ich eine Sekunde warten, und ich kann die zweite Animation bei etwa 2,5 beginnen lassen und bis zur Vier-Sekunden-Marke laufen lassen, was der Gesamtdauer meiner Animation Wenn ich jetzt auf Abspielen drücke, kommt der Text rein und der Text geht raus. Sehr, sehr einfach. Wir fügen also im Grunde zwei Animationen zu demselben Element hinzu. Eine davon animiert den Text in. Mit anderen Worten, es lässt ihn 0-1 0,5 Sekunden erscheinen. Dann warten wir ungefähr eine Sekunde, und dann beginnt die zweite Animation, wodurch der Text ungefähr im gleichen Zeitraum , 1,5 Sekunden, verschwindet ungefähr im gleichen Zeitraum , 1,5 Sekunden, Und wenn Sie mit diesen Timings genauer sein möchten, können Sie hier einfach das übergeordnete Element auswählen und die Dauer auf 1,5 setzen, und dann können Sie es genau dort bis zum Ende setzen, und Sie können dies auch auf 1,5 setzen Und jetzt sind diese beiden genau gleich. Cool. Also, unsere Animation ist jetzt fertig. Lassen Sie uns das exportieren, und ich möchte das schnell durchgehen. Gehen Sie dazu in die obere rechte Ecke und klicken Sie auf Exportieren . Dadurch erhalten Sie eine Vorschau Ihrer Animation und können einen Dateityp auswählen. Dies sind die Dateitypen, die Sie wählen können. Da wir in dieser Lektion eine animierte Folie für ein Video erstellen , wählen wir das Videoformat aus. Und dann können wir die Größe des Videos wählen , richtig, die Auflösung. Wie oft wollten wir loopen. Das ist uns egal, und dann können wir die Bildrate von hier aus 30 oder 60 FPS wählen . Und dann Hintergrund, verwenden wir den Hintergrund von der Zeichenfläche oder machen wir ihn transparent Und dann klickst du auf Exportieren. Dadurch gelangen Sie zu einem anderen Bildschirm, dem Sie eine Vorschau mit Ihren Einstellungen sehen können, und dann wählen Sie Herunterladen. Und sobald das heruntergeladen ist, können Sie sehen, wie es als MP Four exportiert wurde und Sie können das Ergebnis hier sehen. Nun, nur eine kurze Erwähnung Wenn Sie die kostenlose Version von Lottielab verwenden, werden Sie feststellen, dass einige der Optionen hier für Sie nicht zugänglich sind Ich habe die Pro-Version, sodass ich mit jeder Auflösung aus dieser Liste exportieren kann Und falls Sie neugierig sind: Die Pro-Version kostet 12$ pro Monat, wenn Sie jährlich zahlen , und 18$ pro Monat, wenn Sie monatlich zahlen Aber im Grunde schaltest du alles frei. Sie können so viele Dateien haben, wie Sie möchten. Sie können ohne Wasserzeichen exportieren, und Sie können in der höchstmöglichen Videoqualität exportieren Und Sie haben auch einige zusätzliche Vorteile. Ordnung, das war also nur ein kurzer Überblick über das Tool und seine Funktionsweise also als Nächstes Lassen Sie uns also als Nächstes mit der Arbeit an einer viel komplexeren animierten Folie beginnen , richtig, etwas, das Sie tatsächlich in einem Ihrer Videoprojekte verwenden würden . Wir sehen uns also in der nächsten Lektion. 4. Animieren: Vorbereitungsarbeiten: In dieser Lektion beginnen wir mit der Erstellung der animierten Folie, die ich Ihnen zu Beginn des Kurses gezeigt habe Beginn des Kurses gezeigt Wir richten das anhand Ihrer Datei ein. Wir passen Größe und Farben und bringen alle Folienelemente von Figma Lassen Sie uns also darauf eingehen. Dies ist die Figma-Datei, die Sie kostenlos herunterladen können indem Sie dem Link im Bereich Projekte folgen Es ist ein sehr einfaches Design, das als Einführungsfolie für die Lektion verwendet werden kann , beispielsweise für einen Skillshare-Kurs oder einen YouTube-Kurs, was auch immer es ist Dieser Text kann der Titel der Klasse sein. Dies ist die Nummer der Lektion, und dies ist der Titel der Lektion. Abgesehen von diesen haben wir auch einige dekorative Elemente, die ich auch gerne in Lottielab animieren würde. Das allererste, was wir tun müssen, ist diese Datei in Lottielab zu bringen Jetzt können wir jedes Element einzeln neu erstellen, oder wir können ein Plug-In verwenden, das einfach alles kopiert und wir können es in Lottielab einfügen Aber zuerst müssen wir den Hintergrund und die Größe der Folie anpassen der Folie Okay? Wie Sie sehen können, habe ich hier eine Folie mit 4 K, 38, 40 x 21 60, weil ich sie mit 4 K exportieren möchte 4 K exportieren Und da ich schon hier bin, werde ich diese Füllfarbe kopieren. Und ich gehe zurück zu Lottielab. Hier drin habe ich eine neue Datei und lass mich sie nur ein bisschen vergrößern Drücken Sie eins, damit der Zoom passt. Und für die Zeichenfläche werde ich ihre Größe auf die gleiche Größe für vier Groß- und Kleinbuchstaben einstellen Also 38 40 mal 21 60. Wir werden die Dauer festlegen. Im Moment stellen wir sie einfach auf 10 Sekunden ein, obwohl wir das später jederzeit ändern können und die Hintergrundgröße auf die Farbe setzen , die wir zuvor kopiert haben, FDF drei E neun Drücken wir also Shift 1, damit wir die Zeichenfläche wieder sehen können, und ich gehe zurück zu Figma und drücke Strg oder Command K, wenn Sie auf einem MAC sind, um das Schnellmenü aufzurufen Und ich werde nach Lodi Lab suchen. Animation von Figma zu Dame. Lass mich einfach heranzoomen, damit du es besser sehen kannst . Das ist ein Plugin. Sie können darauf klicken, und dann fordert Sie das Plugin auf , Designs zum Kopieren oder Exportieren auszuwählen. Also klicke ich auf eines der Elemente in Figma und drücke Befehl A. Dadurch wird alles ausgewählt Sie können das auch hier im Ebenenbedienfeld sehen. Jetzt zeigt mir das Plug-In alle ausgewählten Ebenen. Ich kann einfach auf Kopieren klicken und dann zu Lottielab zurückkehren, meine Zeichenfläche auswählen und Strg oder Command V drücken. Dadurch wird alles an der richtigen Stelle eingefügt Beachten Sie, dass bei dieser Aktion auch alle Gruppierungs - und Ebenennamen aus Jetzt wurden sie nicht genau an der richtigen Position eingefügt , also müssen wir ein wenig an der Positionierung herumbasteln Wählen wir zunächst diese drei Elemente aus, indem wir ein Feld durch sie ziehen Und ich klicke mit der rechten Maustaste und wähle Gruppenauswahl. Wenn diese ausgewählt sind, gehe ich zur oberen rechten Ecke und richte sie horizontal und vertikal aus, damit ich sie genau in der Mitte meiner Seite positionieren kann . Und dann kann ich erneut mit der rechten Maustaste auf dieses Element auf Gruppe klicken , um diese Gruppe zu entfernen. Als Nächstes verschieben wir diese Elemente manuell an ihren Platz, und ich wähle diese Kreise hier aus oder ich beginne mit diesen Kreisen. Und soweit ich das beurteilen kann, sollte das vielleicht so sein, und diese werden sich hier überschneiden. Und diese verwenden tatsächlich einen anderen Mischmodus. Wenn sie sich also überschneiden, zeigen sie eine andere Farbe Ich kann das auch in Lottielab tun, indem ich im Eigenschaftenfenster Multiplizieren auswähle Das ist der Mischmodus, den ich in Figma gewählt habe. Und wie Sie jetzt sehen können, ja, wenn sich diese Elemente überlappen, wird der Schnittpunkt im Grunde unterschiedlich gefärbt sein Was sonst? Dieses Element hier. Ja, wir können es ein bisschen nach oben verschieben , etwa so. Das Dreieck hier, wir können es ungefähr an diese Position bringen. Und dann das größere Dreieck hier und das Schachbrettmuster, die werden wir wahrscheinlich in etwa so verschieben Auch hier muss es nicht absolut pixelgenau sein , weil wir diese Positionierung jederzeit ändern können Okay, jetzt, wo alle Elemente drin sind, ist es an der Zeit, mit der Animation zu beginnen, und das werden wir in der nächsten Lektion tun, in der wir uns mit diesen dekorativen Elementen befassen werden . Wir sehen uns dort 5. Animieren: Erstellen Sie die Formanimationen: In dieser Lektion beginnen wir mit dem Animieren. Aber bevor wir etwas tun, möchte ich, dass du wie ein Filmregisseur denkst Siehst du, ein guter Regisseur kennt die ganze Geschichte, bevor die Dreharbeiten beginnen. Hier ist es dasselbe. Bevor Sie etwas animieren, denken Sie darüber nach, wie sich jedes Element bewegen soll und in welcher Reihenfolge Das macht alles viel einfacher. Lassen Sie mich Ihnen zeigen, wie ich diese Animation machen würde. Also hier ist der Plan. Ich möchte zuerst die beiden Kreise animieren, vielleicht eine Wachstumsanimation oder ein Slide-In Und dann würde ich dieses Schachbrettmuster und das Dreieck animieren dieses Schachbrettmuster und Und dann würde ich diese Punkte und dieses Dreieck animieren diese Punkte und dieses Dreieck Das wird also die Intro-Sequenz der Ereignisse sein. Erst danach würde ich den eigentlichen Text animieren. Das ist also der Plan. Mal sehen, wie es läuft. Fangen wir mit dem grünen Kreis an, wählen ihn aus und fügen dann eine Animation hinzu wählen wir „Wachsen“. Wir werden es einwachsen lassen. Die anfängliche Opazität hält sie bei Null, weil das der Anfangswert ist, oder? Und die Anfangsskalierung ist 0,5, wodurch die Animation so aussieht. Stimmt das? Es skaliert also von der Hälfte seiner Größe bis zur vollen Größe. Aber ich möchte, dass dieser anfängliche Faktor etwas kleiner ist. Lassen Sie uns also die Anfangsskala auf 0,8 ändern. Ich möchte also, dass es von 80% seiner Größe auf 100% seiner Größe animiert 80% seiner Größe auf 100% seiner Größe Ich möchte, dass diese Animation 1,2 Sekunden lang ist, und ich werde die Beschleunigung auf Glatt umstellen Unsere Animation sieht jetzt ungefähr so aus. Machen wir dasselbe für den anderen Kreis. Wählen Sie ihn aus, drücken Sie, vergrößern Sie ihn, vergrößern Sie ihn in der ursprünglichen Skala, ändern Sie den Wert auf 0,8. Übrigens können Sie die Umschalttaste gedrückt halten und die Aufwärts - und Abwärtspfeiltasten verwenden. Sie können diese Skala ändern. Dauer, ändere sie auf 1,2, dann wird die Lockerung wieder reibungslos funktionieren Außerdem möchte ich diese zweite Kreisanimation am Anfang verschieben diese zweite Kreisanimation am Anfang Diese beiden Elemente animieren also gleichzeitig auf diese Weise. Als Nächstes wählen wir den Container für horizontale Linien und den Container für vertikale Linien und erstellen mit diesen eine Gruppe Im Ebenenbedienfeld können wir also mit der rechten Maustaste auf die Gruppenauswahl klicken. Ich mache das, weil ich diese Animation gleichzeitig auf beide Elemente anwenden möchte . Und ich werde das tatsächlich umbenennen, indem nur auf Zeilen doppelklicke. Oh. Nun, dafür werde ich eine andere Animation verwenden. Ich werde einen Fade wählen. Also noch einmal einblenden, 1,2 Sekunden. Und noch einmal, ich werde den Abspielkopf ganz an den Anfang stellen Diese Elemente animieren also gleichzeitig. Lassen Sie uns als Nächstes dieses große Dreieck animieren. Dafür wähle ich eine Folienanimation. Ich möchte, dass das von unten reinkommt, oder? Also rutsche. Ich werde hier die Richtung wählen. Also von unten. Und so sieht es aus. Folie B bestimmt die Entfernung, die sie zurücklegt, oder? Derzeit ist sie also auf 46 86 eingestellt, was eine sehr große Zahl ist, und die Animation sieht ungefähr so aus. Lassen Sie mich tatsächlich herauszoomen. Stimmt? Ich reise einfach viel zu viel. Lassen Sie uns stattdessen die Animation selbst auswählen und ihren Wert auf 200 ändern, oder? Ich möchte also nur eine sehr subtile Animation. Ich wollte nur ein kleines bisschen nach oben gehen und diese sanfte Lockerung haben , um die Animation zu stoppen Was die Dauer angeht, 1,2 Sekunden, und ich werde das auf Glatt umstellen Und noch einmal, wir werden diese Animation ganz an den Anfang bringen. All diese Elemente animieren jetzt also gleichzeitig, und das haben wir bisher gemacht Okay, das sieht also ziemlich gut aus. Als Nächstes haben wir zwei weitere Elemente, die wir benötigen, um den gepunkteten Container und dieses Dreieck zu animieren Lass uns etwas anderes machen. Lassen wir sie nach den anderen Hintergrundelementen animieren nach den anderen Hintergrundelementen In unserem Fall würde die Animation also genau hier beginnen, und wir lassen dieses Element von links nach rechts hineingleiten , und lassen wir das Dreieck, also vielleicht von rechts nach links drehen Wenn wir uns also das Gesamtbild ansehen, werden diese beiden Elemente im Grunde das tun. Ich weiß nicht, ob du das gesehen hast. Sie werden im Grunde von entgegengesetzten Seiten reinrutschen. Wenn sich unser Cursor an der richtigen Position befindet, wählen wir die Punkte fügen eine Folie hinzu. Und lassen Sie uns die Eigenschaften einstellen. Die Richtung ist korrekt, wenn von links nach rechts gleiten und weiter gleiten werde, verwende ich denselben Wert von 200, den ich hier für das Dreieck verwendet habe, weil ich möchte, dass hier für das Dreieck verwendet habe, weil ich möchte die Animation konsistent ist. Ich werde dieselbe Dauer von 1,2 Sekunden und dieselbe sanfte Lockerung haben Dauer von 1,2 Sekunden und dieselbe sanfte Lockerung Jetzt, zu dem Zeitpunkt, zu dem diese Animation beginnt, fügen wir auch das Dreieck hinzu, oder? Verwenden wir dazu auch eine Folie. Schieben Sie hinein, aber die Richtung sollte von rechts nach links sein. Derselbe Wert von 200, 1,2 Dauer, gleiche Lockerung von Smooth Ordnung. Gehen wir jetzt zurück und schauen wir uns an, wie die Animation aussieht. Nicht schlecht. Also animieren wir zuerst diese ersten Elemente. Und dann, sobald die Animation abgeschlossen ist, beginnen wir mit der Animation der Punkte und des kleinen Und das haben wir bisher. Cool. Der nächste Schritt besteht darin, die Textelemente zu animieren, und das wird in der nächsten Lektion behandelt 6. Animieren: Erstellen der Textanimationen: In dieser Lektion animieren wir die Textelemente. Dies sind die wichtigsten Teile der Folie, daher möchten wir sicherstellen, dass sie genau richtig aussehen und sich auch so anfühlen. Lass es uns machen. Hier haben wir aufgehört. Und ich möchte meine Textanimation damit beginnen dass zuerst dieses zentrale Element erscheint, okay? Also lass es uns auswählen. Und lassen Sie uns den gleichen Unschärfe- und Folieneffekt verwenden ich Ihnen zuvor gezeigt habe, weil ich denke, das würde gut funktionieren Lassen Sie uns hier die Richtung nach unten festlegen. Lassen Sie mich tatsächlich hineinzoomen. Weiter so, ich werde denselben Wert von 200 Pixeln verwenden. Die Dauer wird 1,2 sein, und ich werde dieselbe Lockerung oder Glatt verwenden Außerdem gilt die Animation für jeden Charakter. Das ist also, was wir bisher haben. Also das ist cool. Aber wann genau lösen wir diese Animation aus? Ist es nach diesem Ende? Würde diese Animation funktionieren? Ich denke, wenn wir das so machen, müssen wir lange warten , bis der eigentliche Text erscheint. Lassen wir also den Anfangstext, den 03, gleichzeitig mit den Punkten im kleinen Dreieck animieren gleichzeitig mit den Punkten im kleinen Dreieck Und dafür kann ich einfach das Textelement von hier aus auswählen und es so verschieben, dass es den gewünschten Elementen entspricht Auf diese Weise beginnt der Text gleichzeitig mit der Animation der Punkte im kleinen Dreieck Das gefällt mir. Was ist nun mit dem Rest des Textes? Nun, ich möchte, dass das Animieren beginnt nachdem die Animation der großen Zahl abgeschlossen ist Und wieder werde ich die Position dieser Textelemente ausnutzen , weil der kleinere Text oben und der größere Text unten positioniert ist. Ich möchte, dass sie hineingleiten Der obere Text wird von oben hineingleitet und der untere Text wird von unten hineinrutschen. Okay? Und lassen Sie uns dafür sorgen, dass diese Animation gleichzeitig passiert. Wir haben also diese Art von Folie gleichzeitig aktiviert. Wählen Sie das obere Textelement aus, und ich wähle eine Ebenenfolie aus. Ich wähle hier die oberste Option Slide um 200, Dauer 1.2, Lockerung glatt Das sieht derzeit also so aus. Okay, positionieren wir unseren Abspielkopf. An dieser Stelle genau hier wählen wir den zweiten Text und fügen ihm auch eine Ebenenfolie hinzu Diesmal wird es von unten angezeigt, eine Folie mit einer Länge von 200, einer Dauer von 1,2 und der gleichen Lockerung von „Glatt Jetzt sieht die Animation ungefähr so aus. Und lassen Sie mich das tatsächlich ein bisschen größer machen. Das ist es. Das ist also die bisherige Abfolge der Ereignisse. In den ersten 1,2 Sekunden animieren wir den Kreis, das Dreieck, die Linien Im nächsten Abschnitt animieren wir den zentralen Text und die Punkte und das kleine Und schließlich animieren wir die anderen beiden Textelemente, von denen eines von unten, von oben und das andere von unten kommt Bisher dauert diese Animation etwa 3,7 Sekunden, und es liegt wirklich an Ihnen, wie lange Sie eine dieser animierten Folien erstellen möchten Ich persönlich bevorzuge es, sie etwas länger zu machen, damit ich sie später bei der Bearbeitung kürzen kann, oder? für dieses Beispiel also Lassen Sie uns für dieses Beispiel also die gesamte Sequenz etwa 10 Sekunden oder tatsächlich etwa 8 Sekunden lang machen . Also wähle ich die Zeichenfläche aus und ändere ihre Dauer einfach so auf 8 Sekunden Okay. Also, was genau machen wir für den Rest von vier und etwas Sekunden? Nun, hier können wir eine langsamere Animation hinzufügen, fast wie eine Restanimation. Wir können die Hintergrundelemente langsamer bewegen lassen , nur um das Gefühl der Bewegung aufrechtzuerhalten . Und das werden wir in der nächsten Lektion tun. 7. Animieren: Erstellen der Restanimationen: In dieser Lektion fügen wir den Hintergrundformen einige langsamere Animationen hinzu, damit die Dinge bis zum Ende in Bewegung bleiben Dann exportiere ich die fertige Folie und zeige Ihnen, wie Sie sie in der Vinci-Auflösung verwenden können, einschließlich des Übergangs von der Folie zu echtem Videomaterial Lass uns gehen. Lasst uns jetzt mit diesem Kreis beginnen. Und ich werde den Abspielkopf genau hier bei 1.2 beenden , wenn dieser Kreis seine Animation beendet hat Um nun eine längere Animation zu erstellen, verwenden wir sogenannte benutzerdefinierte Keyframes Und wenn Sie das Element auswählen, können Sie diese Option im rechten Bereich aktivieren Jetzt, wo die Elemente ausgewählt sind, kann ich mit der Maus über die Timeline fahren und feststellen, dass ich Pluszeichen habe Und wenn ich auf dieses Pluszeichen klicke und es mir erlaubt, hier rein zu zoomen Ich kann wählen, welche Art von Keyframe ich haben möchte. Für diesen Kreis möchte ich seine Position ändern, oder? Ich wollte von hier nach hier gehen. Also vertikale Position. Also werde ich die Position wählen. Nun, das erzeugt genau hier ein Rumbus-Element, und das ist der visuelle Hinweis auf einen Keyframe Dann setze ich meinen Abspielkopf bis ganz zum Ende, bei der Acht-Sekunden-Marke, und ich werde hier einen weiteren Keyframe erstellen Aber dieses Mal die Position und ich kann sie von diesem Feld aus ändern. Ich möchte, dass sie 200 Pixel weniger ist, also kann ich sagen, also kann ich sagen Und wenn ich das mache, beobachte den Kreis, der Kreis bewegt sich nach oben Wenn ich jetzt die Animation von Anfang an abspiele , haben wir das hier. Beachten Sie, wie sich der Kreis langsam zu der Position bewegt, die ich ihm gegeben habe. Das macht eine Keyframe-Animation. Sie animiert ein Element zwischen Schlüsselbild eins und Schlüsselbild zwei In meinem Fall war Keyframe eins die Position, an der der Kreis sozusagen landete, nachdem er seine erste Animation beendet Und Keyframe zwei hatte dieselbe Position, aber 200 Pixel höher auf der Y-Achse Nachdem wir den Kreis nach oben verschoben haben, wollen wir nun einen gegenteiligen Effekt erzielen und den anderen Kreis nach unten verschieben dieser ausgewählt ist, verschiebe ich meinen Abspielkopf erneut hierher und erstelle einen Keyframe für Ich beginne also an dieser Position, wollte aber an einer Position an einer Y-Position enden , die 200 Pixel niedriger ist Also sage ich plus 200. Also sieht die Animation jetzt ungefähr so aus. Sie sehen, jetzt bewegen sich die beiden Kreise langsam auf der vertikalen Achse. Und das ist genau der Effekt, den ich mir wünsche. Die anderen beiden Elemente, die ich im Hintergrund animieren möchte , sind das große Dreieck und das kleinere Dreieck Für das große Dreieck möchte ich, dass es nach unten rutscht, also stelle ich meinen Abspielwert hier auf 1:20 ein, wähle das Dreieck aus, klicke dann genau hier auf Plus und Und dann verschiebe ich meinen Abspielkopf wieder hierher Achte darauf, dass ich bei meiner Positionsanimation derselben Zeile folge bei meiner Positionsanimation derselben Zeile Klicken Sie, und dann füge ich der Position 200 Pixel hinzu. Jetzt bewegt sich das Dreieck langsam nach unten. Und für das kleine Dreieck, mal sehen, das kleine Dreieck beendet die Animation hier. Also werde ich meinen Abspielkopf auf 2,4 positionieren, oder ich kann ihn auf 2,5 setzen, nur um auf einer Linie mit den anderen zu sein, und ich kann das kleine Dreieck auswählen. Klicken Sie auf Plus. Und dieses Mal animieren wir die Rotation. Bewegen wir den Cursor noch einmal zum Ende, fügen wir ein weiteres Schlüsselbild hinzu, und diesmal wird der Rotationswert 180 sein Und wenn wir dann von Anfang an spielen, wird es ungefähr so aussehen. Und das ist alles. So können Sie in Lottielab eine animierte Folie erstellen Lassen Sie uns das nun exportieren, und dann zeige ich Ihnen, wie Sie es in einer echten Videobearbeitungssoftware verwenden es in einer echten Videobearbeitungssoftware Wir werden auf die Schaltfläche Exportieren klicken. Wählen Sie Video aus. Das ist eine Vier-K-Folie, und ich möchte sie in einem Vier-K-Video verwenden, also wähle ich vier K. Ich wähle 60 FPS. Und falls Sie nicht wissen, wofür FPS steht, dann ist das die Bildrate. Im Wesentlichen gilt: Je höher die Bildrate, desto flüssiger die Animation Hintergrund, ich bleibe normal und klicke dann auf Exportieren Es wird also ein paar Sekunden dauern, bis das Video gerendert wird. Und es wird empfohlen , diese Registerkarte beizubehalten und sich darauf zu konzentrieren, damit es schneller gerendert wird. Okay, es ist erledigt. Wir können hier eine Vorschau davon sehen, und es läuft einfach weiter in der automatischen Schleife. Also lass es uns herunterladen. Und schauen wir es uns an. Das ist eine MP Four-Datei, und Sie können sie tatsächlich sehen. Es ist eine MP Four-Datei 4,3 Megabyte. Also lass uns das öffnen Und jetzt wird es in einem Videoplayer abgespielt. Lassen Sie mich das Ganze im Vollbildmodus machen und es mir ansehen. Sehr schöne, flüssige Animation, die 7 Sekunden oder 8 Sekunden lang abgespielt wird . Ordnung. Lass uns das hinter uns lassen. Lassen Sie uns mit der Lösung von Vinci beginnen und Ihnen zeigen , wie Sie sie als Einführungsfolie für ein Video verwenden können Okay, wir sind also im Venture Resolve, wo ich einen MP Four geladen habe Oops, das ist ein nettes Vorschaubild von, du weißt schon, einem echten Live-Filmmaterial das ich für diese Lektion gemacht habe Und dann haben wir die animierte Vier-K-Folie. Jetzt klicke ich mit der rechten Maustaste und erstelle eine neue Zeitleiste. Ich werde auf Erstellen klicken und dann die Folie aufrufen und dann werde ich mein eigentliches Video einfügen. Also werde ich diesen Audiotrack einfach stummschalten , weil uns das nicht wirklich wichtig ist. Ich bin nur daran interessiert, wie das Endergebnis aussehen wird. Also lass mich hier einfach ein bisschen heranzoomen. Lassen Sie mich zum Anfang zurückblättern und ich werde die Effekte aufrufen. Ich füge hier einen Videoübergang hinzu , dippe auf „Farbe auflösen und füge das ganz am Anfang hinzu. Und dann kürze ich diese Folie vielleicht auf etwa, ich weiß nicht, vielleicht 6 Sekunden, ungefähr so. Was auch immer zu meinem aktuellen Projekt passt. Lassen Sie mich diese Lücke löschen, und es wird auch ein Effekt zum Auflösen von Unschärfen hinzugefügt, und das Ergebnis wird ungefähr so aussehen Es ist ein bisschen verzögert, weil ich dabei auch aufnehme Und dieses Video, das wiedergegeben wird, hat eine Auflösung von vier k 60, also ist es ziemlich CPU-intensiv, aber so sieht es im Grunde Wir gehen also von der animierten Intro-Folie zu einem Teil mit dem Talking Head über, genau wie hier Und so können Sie in Lottielab eine animierte Folie für Ihre Videos erstellen Lottielab eine animierte Folie für Ihre Videos Wir sehen uns in der nächsten Lektion mit dem Fazit und den Fazit und den 8. Schlussbemerkung und nächste Schritte: Und das ist abgeschlossen. Du hast es bis zum Ende des Kurses geschafft, und ich möchte nur sagen, gut gemacht. Sie sind von einer leeren Datei zu einer vollständig animierten Folie übergegangen , die Sie tatsächlich in Ihren Videos verwenden können. Das ist ziemlich cool. In diesem Kurs haben Sie Lottielab eingerichtet, gelernt, wie das Tool funktioniert, alle Formanimationen erstellt, die Textelemente animiert und eine fertige, gebrauchsfertige Folie exportiert Ich denke, das sind solide Fähigkeiten, die Sie jetzt auf jedes Animationsprojekt anwenden können Nun, hier sind ein paar Dinge, zu denen ich Sie als Nächstes ermutigen möchte. Nehmen Sie zuerst die Folie, die wir gebaut haben, und machen Sie sie zu Ihrer. Sie haben freien Zugriff auf die Figma-Datei Ändern Sie also die Farben, tauschen Sie die Schriftarten aus und aktualisieren Sie den Text mit Ihrem eigenen Die von mir bereitgestellte Vorlage ist nur ein Ausgangspunkt. Das Ziel ist es, dass Sie am Ende etwas haben , das zu Ihrem Stil passt. Und wenn meine Vorlage für Sie nicht funktioniert, erstellen Sie Ihre eigene von Grund auf neu. Zweitens, wenn Sie möchten , können Sie Ihre Animationen im Bereich Klassenprojekte teilen . Es muss nicht perfekt sein. Sie können einen Screenshot, eine Bildschirmaufnahme oder sogar den Lottielab-Link zu Ihrer Animation senden eine Bildschirmaufnahme oder sogar den Lottielab-Link zu Ich denke, dass es Ihnen hilft, Ihre Fortschritte zu teilen, und es hilft auch anderen Schülern, zu sehen, was möglich ist Ich würde auch gerne sehen, was du geschaffen hast. Und wenn dir dieser Kurs gefällt, würde es mir viel bedeuten, wenn du eine kurze Bewertung hinterlassen könntest. Es können nur ein oder zwei Sätze über deine Erfahrung sein. Diese Bewertungen helfen anderen Schülern, den Kurs zu finden, und sie helfen mir auch zu verstehen, was funktioniert und was ich verbessern muss. Wenn das für dich nützlich war, erwäge bitte, eine Bewertung zu hinterlassen. Ich lese und schätze jeden einzelnen sehr. Jetzt unterrichte ich auf Skillshare auch über Figma, Framer und Webdesign Wenn Sie also an diesen Themen interessiert sind, gehen Sie zu meinem Profil und schauen Sie sich meine Es ist für jedes Level etwas dabei , egal ob du bei Figma besser werden, mehr über Design erfahren oder andere Tools ausprobieren Ich betreibe auch einen YouTube-Kanal dem ich über Figma, Framer und Webdesign im Allgemeinen poste , aber normalerweise poste ich dort kürzere Wenn du also interessiert bist, findest du den Link auf meinem Profil In Ordnung, das ist alles für mich. Vielen Dank, dass Sie diesen Kurs besucht haben. Machen Sie jetzt ein paar Animationen und verwenden Sie sie in Ihren Videos . Wir sehen uns im nächsten. Tschüss fürs Erste.