Animieren mit der JavaScript Web Animations API

1. EINFÜHRUNG: Einfache Animationen sind mit CSS einfach genug. Aber sobald Sie ein paar Dinge auf einmal oder in der Reihenfolge animieren möchten, kann es bald problematisch werden. Es gibt keine einfache Möglichkeit, CSS zu sagen, wenn diese Animation beendet ist, laufen, diese andere, zum Beispiel. ist jedoch etwas, das Sie leicht mit der JavaScript Web Animations API tun können. Und genau das werden wir in diesem Kurs lernen. Nun, wenn Sie ein kompletter Anfänger mit Web-Entwicklung sind, dies wahrscheinlich nicht der Kurs für Sie, aber wenn Sie HTML und CSS kennen und ein moderates Verständnis von JavaScript haben, denke ich, Sie müssen gut machen. Aber ich bin mir selbst voraus. Ich bin Ben Frain, ein Webentwickler und Autor des meistverkauften Responsive Web Design mit HTML5 und CSS. Wenn Sie diesen Kurs nehmen, werde ich Ihnen zeigen, wie Sie Animationen mit JavaScript Web Animations API schreiben . Und wir werden alles tun, von einfachen Animationen, die Sie gewohnt wären, über CSS bis hin zu einer Reihe von sequenzierten Animationen in einem Stück Interaktion, die zusammen gebaut werden. Alles, was Sie für diesen Kurs benötigen, ist ein Texteditor, ein Browser und eine Toleranz für minderwertige Witze. Also machen Sie es sich bequem, besorgen Sie sich ein schönes Getränk. Und wir beginnen mit dem nächsten Video. 2. Die Project: Bevor wir das Ding ausbauen, möchte ich Ihnen zeigen, wo wir landen werden. So können Sie hier auf der rechten Seite meinen Bildschirm sehen, wir haben diese Art von dem, was ich groß kühle den Bühnenbereich. Und wir haben unten eine Reihe von Knöpfen. Und während wir durch klicken, können Sie sehen, wo wir laufen ein paar Sequenzen, Art von Star Wars Text Scroll, die Rakete gehen über. Und Sie können sehen, dass als Anzahl der Animationen laufen Summe zusammen und einige auch in der Reihenfolge. Also die drei dieser Kampfszenen, und Sie können sehen, wie unsere Rocky Art kommt rein und geht über. Und dann unsere letzte Szene am Ende, das sind Rakete London. Die Jets gehen los. Und dann nach nur einer kurzen Verzögerung, UCL kleiner Freund auftaucht, die liebevoll Eddy genannt haben. Was Sie bauen, muss nicht dasselbe sein wie dieses. Das kann es sein. Es könnte etwas Ähnliches sein, oder es könnte etwas völlig anderes sein. Alles ist wichtig ist, dass Sie die Web Animations API gut genug lernen und verstehen , damit Sie beginnen können, Dinge auf dem Bildschirm mit JavaScript zu bewegen. Nun, bevor wir noch weiter gehen, denke ich, es lohnt sich zu betrachten, warum wir dies mit JavaScript anstelle von CSS tun wollen. Jetzt bin ich ein massiver Fan von CSS. Manchmal geht es darum, das richtige Werkzeug für den richtigen Job zu wählen. Also schauen wir uns das im nächsten Video an. 3. Warum du use nicht nur verwendest?: Werfen wir einen Blick auf eine sehr einfache Animation mit CSS. Ich habe hier Live-Nachladen und ich habe ein Tool namens hübscher, die Umformatierungen, die Steuer geht es? Darauf kommen wir in Kürze. Moment werden wir nur eine sehr einfache Animation machen. Also wird sie machen, lasst uns Stick ein div auf der Seite geben. Wir geben ihm eine Klasse von Dingen. Und dann mal sehen, ob wir mit der Kraft von CSS vor allem eine schöne Box machen können . Auf der Seite. Breite, 100 Pixel hoch, 200 Pixel, Hintergrundfarbe. Wir haben eine schöne leuchtend orange. Das ist nur Scheck. Wir haben das R-Quadrat, okay? Und jetzt werden wir eine Animation ausführen. Also werde ich nur zuerst die Animationserklärung schreiben und dann schreiben wir den Keyframe danach. Sie sich also keine Sorgen darüber, dass es in der Minute keinen Schlüsselrahmen gibt. Also Animation, und wir werden es bewegen nennen, richtig? Es wird 1 Sekunde dauern, und es ist vorwärts zu gehen. Und wir werden entspannt gehen. Das ist die Timing-Funktion. Wenn Sie nicht wissen, was 0s in, out ist, werden wir das bald abdecken, machen Sie sich keine Sorgen darüber. Okay, jetzt müssen wir den eigentlichen Zug schreiben, oder? Keyframes. Lasst uns das wenig schnell kriegen. Und wir werden einfach gehen, das wird umziehen. Also, wenn Sie verwenden, in dieser Situation, können Sie nichts Prozent schreiben 200% oder so etwas. Aber es ist einfacher, wenn, wenn Sie nur auf Animation zu etwas Neues bewegen möchten. Wenn Sie es so schreiben, wird es einfach direkt dorthin gehen, wo es enden soll. Also in diesem Fall möchte ich nur unser kleines Quadrat bewegen. Lassen Sie uns übersetzen, und wir gehen, gehen wir 300 Pixel nach rechts. Und ich ziehe nach unten. Und während wir hier sind, ändern wir einfach den Grenzradius auf 50%. Also, mit ein bisschen Glück, was hilft verrückt zu werden? Und lasst uns die Hintergrundfarbe ändern. Und wir gehen zu, wir gehen zu einem schönen Dunkelgrau. Okay, mal sehen, was das für unser Vermögen tut. Was auch immer Dunya tun soll, will das in der Regel nicht oder wollte erwarten, dass es geht. Ich muss eine Schlüsselbilder-Bewegung schreiben, richtig? Ok. Denn das Lächeln auf mich, okay, damit Sie sehen können, dass wir von einem hellen Quadrat kommen, sich rechts bewegen, es in einen Kreis verwandeln, in Ordnung. Was wäre, wenn wir jetzt eine Sekunde warten und dann alle eingekreist nach unten bewegenund es wieder in ein Quadrat drehen wollen Sekunde warten und dann alle eingekreist nach unten bewegen , ist ein paar Möglichkeiten, wie Sie dies tun könnten. Sie könnten entweder eine weitere Animation zu allen Selektoren hinzufügen oder wir könnten sie in die Keyframes einbauen. Also, wenn wir es in die Keyframes zu bauen, Schauen wir uns das zuerst an. Wenn wir in die Keyframes einbauen wollen, nehmen wir an, wir gehen einfach kopieren das nach unten und das wird unser neues sein. Es wird also 0 gehen, dass es 33% gehen würde. Wir wollen, dass es endet. Also 0 wird keine Transformationen darauf haben. Es wird keinen Ebola-Radius haben. Das ist im Wesentlichen unsere Ausgangsposition, und das ist r. Also gehen wir auf unser leuchtend orangefarbenes Drittel des Weges über. Wir sehen so aus. Und dann wollen wir dort auf eine weitere 2,5-te warten. Also, von den ganzen Weg zu 66%, das funktioniert in meinem Kopf des Spenders für Swatch, die Arbeit im wirklichen Leben hier. Und es wird dasselbe sein. Denn wenn wir zu 60, 66% durch unsere Animation kommen, wollte ich an der gleichen Stelle sein. Also, also zwischen 3366 wird hoffentlich eine Pause sein und dann schnappen Sie sich dieses Bit. Ich bin ein Idiot, tut mir leid. Lasst uns das schnappen. Das wird also alles zu 100% sein. Und dann bei 100% wollen wir immer noch auf der rechten Seite sein. Wir werden 300 runterkommen. Wir kehren zurück zu einem Quadrat. Wir setzen uns anders. Und dann gehen wir zurück zu unserem Platz. Das wird ziemlich schnell mit 1 Sekunde passieren. Also werde ich nur die Dauer der Animation ein bisschen länger machen. Also werde ich die 1 Sekunde auf 3 Sekunden ändern. Also sollten wir jetzt etwas wie 1 Sekunde quer, 1 Sekunde Pause, 1 Sekunde nach unten bekommen. Solche sind etwas falsch gemacht. Da gehen wir. Und versuchen Sie es noch einmal. Warte runter. Nun, wir p, OK, also war das okay. Aber nehmen wir an, jetzt, während Designer, die lieben, was wir mit diesem Quadrat gemacht haben, wurden sie mich aus der Party geschlagen, äh, aber sie wollen eigentlich eine Sekunde, zwei Sekunden Verzögerung und 1 Sekunde nach unten. Wir können umgehen, dass das nicht warten konnte. Wir könnten, wir könnten unsere Keyframes ändern. Sie könnten es ausarbeiten, herausfinden, wo der Prozentsatz für die sein würde, für die Pools und dann ändern Sie Ihre Buchung. Es fängt an, ziemlich schwierig zu verwalten. Und das ist nur eine Animation, die wir hier laufen. Ich sagte, bevor wir das anders machen könnten. Also lasst uns das versuchen. Wenn wir, wenn wir zurück, wo wir vor einem Moment waren, wo wir gerade haben, um die richtige Animation zu bewegen. Anstatt dies mit Keyframes zu tun, Nehmen wir an, was wir getan haben, ist, dass wir einen anderen Satz Keyframes gemacht haben. Ich werde diesen Zug nach unten nennen. Und das hier wird es von MEA gehen, das wird nicht funktionieren. Also werden wir von nur gehen, um klar zu sein, wenn wir nach unten gehen wollen, wissen wir, dass wir 300 über 0 runter sein werden. Wir werden ein Kreis sein. Und wir werden in den 3s sein, was die Art von dunkelgrau ist. Und dann, wenn wir fertig sind, würden wir gerne zurück sein und wie ein Quadrat aussehen. Sieht aus wie ein Quadrat, ideal die ganze Zeit. 300 Darrow, Xero, Grenzradius O, aber zwei. 90. Das werden also unsere Keyframes zum Abwärtsbewegen sein. Dann könnten wir hier reinlegen, ausgezogen. Und wir wollen, dass wir 1 Sekunde sagen. Und wir wollen eine Verzögerung von 500 Millisekunden. Und wir wollen einen vorwärts geben und wir werden leichter reingehen. Es gibt einen offensichtlichen Fehler hier drin, warum das nicht funktionieren wird. Ich werde es laufen lassen. Und Finger an den Posen. Sagen Sie mir, wenn Sie wissen, was es ist. Lassen Sie uns das einfach von Anfang an laufen. Hast du das gesehen? Es kommt nicht mal rüber, bevor es anfängt zu kommen. Und der Grund dafür, und das ist, warum CSS, CSS-Animationen problematisch sein können, ist, dass wir in einem All , damit alle zweiten Animation ausgeführt werden, berücksichtigen müssen, wie lange es die erste abnimmt. Es gibt keine Möglichkeit, NCSS zu sagen, wenn das erste fertig ist, dann mache das nächste. Also, was wir hier tun müssen, ist, dass wir gehen müssen, okay, also unsere Verzögerung, wir wollen, dass Sie fünf, wir haben eine 2,5. Verzögerung, nachdem es passiert ist. Es ist also keine Verzögerung von 500 Millisekunden, es ist eigentlich 1500 Millisekunden, 1,5, also kann ich verzögern. Also, jetzt sollte das etwas mehr sein, wie wir es sehen wollen. Wir haben die Verzögerung und dann geht es nach unten. Wir haben dieses Problem hier umgangen. Aber die Realität ist, ist kein fantastischer Weg, diese Dinge durchzudenken. Wahrscheinlich könnten Sie dies mit benutzerdefinierten Eigenschaften ein bisschen einfacher machen, was Sie sicher tun könnten, wir könnten gehen. Die Dauer beträgt 300 Millisekunden. Und das könnte helfen. Es hängt von Ihrer Präferenz oder annehmen, aber wir könnten Dauer tun. Und das wird auch die Dauer sein. Dauer. Und für unsere Verzögerung bin ich nicht einmal davon überzeugt, dass das besser ist und ich bin sicher nicht überzeugt, dass er die Art von Sache ist, über die man leicht nachdenken kann. Wenn Sie in sechs Monaten zu diesem Code zurückkommen, würde es ein bisschen Kopfkratzen erfordern. Es wird also Dauer mal 1,5 sein. Nein, das ist nicht richtig. Ok. Geschlossen an der falschen Stelle. Das ist komisch. Hoffentlich wird dies dasselbe tun und versuchen wir es einfach. Ja, okay, also, das funktioniert. Tun Sie es so. Es macht es etwas einfacher, die Gesamtanimation zu ändern , weil statt zu gehen und neu zu berechnen oder zu verzögern, er ist im Allgemeinen hier können wir zeigen und diese notieren 1 Sekunde. Okay, also haben wir ein zweites Haus. Ich könnte eine Sekunde verzögern. Wir haben es dort umgearbeitet und wir haben uns angesehen, wie Sie das etwas einfacher machen können. Ich benutze benutzerdefinierte Eigenschaften, aber es gibt immer noch keine einfache Möglichkeit Unhöflichkeit zu sagen, als wenn dieses Ding ruinös beendet ist. Als Nächstes, wenn das fertig ist, rennen Sie, diese andere Sache. Und es gibt auch, dass wir hier noch nicht einmal angesprochen haben. Wenn wir Animationen pausieren und dann wieder aufnehmen wollten, werden sie plötzlich wieder in die andere Richtung gehen. Die Wahrheit ist, CSS hat einfach keine gute Antwort dafür. Und weißt du, was ich sagen werde? Die Web Animations API hat eine gute Antwort dafür. Sie sind wahrscheinlich bewusst, dass es viele JavaScript-Animationspakete von Drittanbietern gibt, die Sie in Ihrem Projekt herunterladen und verwenden können, was Sie finden, es gibt einige sehr gute da draußen. Ich denke an Dinge wie grüne Socke. Aber das Problem ist, das ist etwas, das Sie dann in Ihre Webseite einfügen müssen, die Anwendung, die Sie erstellen. Jedes Mal, wenn Sie eine Animation ausführen möchten. Und es ist auch, Sie müssen eine benutzerdefinierte Syntax lernen , die in etwa zehn Jahren sein kann oder nicht. Mit der Web Animations API ist dies ein Standard, dies wird nirgendwo hingehen. Was Sie also mit einer Web Animations API lernen , wird Sie in Zukunft sehr gut an Stelle stehen. Hoffentlich wird das angesprochen, warum wir JavaScript verwenden möchten. Und schauen wir uns im nächsten Video an, wie wir es mit JavaScript machen. 4. Was ist sogar eine API?: Bevor wir unsere erste Animation mit JavaScript schreiben, möchte ich nur den Begriff API abdecken. Api, das Akronym steht für Anwendungsprogrammierschnittstelle. Alles, was wir hier tun, ist, dass es eine JavaScript-Schnittstelle in den Webbrowser integriert ist, die uns erlaubt Animationen mit JavaScript zu steuern, da es ein Web-Standard ist, gibt es eine Spezifikation, die Sie gehen und lesen können. Spezifikationen unterscheiden sich stark, wenn es um Web-Funktionen geht. So sehr einfach, um den Kopf herum zu bekommen und andere weniger Zelle zu verstehen. Ich finde die Web Animations API-Spezifikation etwas intensiv. Nun, hoffentlich, wenn ich hier einen halb anständigen Job mache, sollten Sie sich diese Spezifikation nicht viel ansehen müssen. Es sei denn, du willst, was, weißt du, das liegt ganz an dir. Ich urteile nicht. Viel in Bezug auf die Browser-Unterstützung. Wie ich diese späten 20-20 aufzeichnen. Und wenn wir verwenden, kann ich verwenden.com-Typ in Web Animations API, dann sieht die Unterstützung in etwa so aus. Sie haben eine anständige Unterstützung für alles, was Sie sinnvoll verwenden möchten. Bemerkenswerte Absenzen, IE 11 und Ergänzung zu Version 18. Aber offensichtlich gibt es an dieser Stelle immer weniger Besorgnis. Es gibt auch Polyphenole. Wenn Sie das Gefühl haben, dass Sie das tun müssen, ist offensichtlich schon ziemlich gut. Und es wird nur noch besser werden. Das ist genug Intro. Lassen Sie uns mit direkt in unserer ersten Animation mit JavaScript weitermachen. Im nächsten Video. 5. Ein einfaches Web: Richtig, lassen Sie uns die erste Animation mit der Web Animations API laufen. Wir werden mit der Form beginnen, die wir vor ein paar Videos hatten, die wir mit CSS herumgezogen haben. Also, wenn Sie sich erinnern, war Don sehr einfach und ein einzelnes Element mit einer Klasse von Dingen. Und ich verlinken hier nur auf Animationen ab.js. Jetzt ist Animationen Punkt JS in der Minute sehr einfach. Es gibt nichts, das nur ein Konsolenprotokoll hat, so dass Sie sehen können, dass etwas tun. Und der erste Job ist nur, um loszuwerden alle Stile, die wir vor, die diese Animation gemacht haben. Wenn du dich daran erinnerst. Ich werde nur ein paar von diesem anderen Zeug aus dem Weg räumen. Tut mir leid, nur noch einmal, wir haben das Quadrat über zehn zu einem Kreis und dann wieder runter. Jetzt wollen wir Olof Animations-Zeug für mich loswerden , weil wir nichts von diesem Zeug brauchen. Jetzt. Was wir jetzt haben, ist, dass r-squared nichts tut. Und wir werden diese Animation mit JavaScript neu erstellen. Und nur um es Ihnen zu zeigen, lassen Sie uns die Devtools öffnen, damit Sie Konsole sehen können, die Jess für den Dienst meldet. Wir wissen, dass alle JavaScript-Dateien angeschlossen sind, kein Problem. Das erste, was wir tun werden, und lassen Sie mich const Schlüsselwort hier verwenden, um eine Variable von Arten an das Element auf der Seite zu machen. Du könntest weniger gebrauchen. Sie können VAR für das, was wir tun, verwenden. Es spielt keine Rolle. Ich möchte nur in die Gewohnheit bekommen, cons 20 zu verwenden, ist etwas, das konstant ist und ich werde mich nicht ändern. Also ein anderes Dokument, Punkt-Abfrage-Selektor. müssen nicht alle Abfrageselektor ausführen, da es nur einen von ihnen auf der Seite gibt. Und seine Sache, cool ist, daran zu denken, was Dokument, Abfrage, Selektor gleich ist. Alle. Nur um zu überprüfen, wir haben das auf der Seite. Wir werden das mit allem tun, aber nur um sicherzustellen, dass diese ersten Bits reingehen. Ok. So können Sie hier unten in der Konsole sehen, wir haben alle Elemente geschnappt. Okay, jetzt haben wir es. Wir wollen mehr animiert. Und so werden wir Sache gehen. Und dass die erste Methode, die die Methode, die Sie die meiste Zeit verwenden, ist er animiert. Animieren. Okay, also bin ich hauptsächlich zu animieren nimmt zwei Sätze, na ja, zwei Argumente, keine Sorge in diesem Video, wenn das wie gobbledygook es klingt, werden wir dieses Zeug in einer großen Menge an Details in Kürze durchgehen. Ich werde Ihnen nur zeigen, wie die gleiche Animation die wir in CSS erstellt haben, aussieht, wenn Sie es mit JavaScript machen. Das erste Argument wird ein Array von Schlüsselbildern sein. Unser erster Keyframe ist also Gewinn zu sein Transform. Und Sie werden hier feststellen, dass wir eine Zeichenfolge für das, was in der Transformation passiert, verwenden. Also ich denke, es war 300 Pixel übersetzen , nichts Plot Timing-Funktionen hier drin und wir werden sagen, wird Timings in JavaScript nehmen. Und die JavaScript-API wird immer in Millisekunden ausgeführt. Sie könnten also in CSS gewöhnt sein, sagen wir, in 1 Sekunde ist 1S. Das ist ein No-Go. In JavaScript ist es immer in Millisekunden. Also 1 Sekunde, 1000 Millisekunden. Du brauchst die Einheiten nicht anziehen. Es wird immer davon ausgegangen, dass Sie Millisekunden verwenden würden, füllen. Es wird beides sein. Also, falls wir wieder in beide Richtungen gehen, mach dir vorerst keine Sorgen darüber. Erleichterung, wir werden auch in Justinian JavaScript gehen, dass die Web Animations API, die Standard-Timing-Funktion in CSS, eine Leichtigkeit ist, während in JavaScript landen, der Standard A-linear ist. Also, wenn wir etwas tun wollen, das keine lineare Animation ist, wenn man das wirklich sagen muss. Also lassen Sie uns sagen, wir gehen 0s und hier raus, nur um Ihnen zu zeigen, wie das aussieht, wenn ich das jetzt speichere, wird dies etwas von hübscher neu formatiert. Also, da gehst du. So können Sie sehen, dass das erste kleine Bit, das wir eingelegt haben, nur diese Transformation ist. Und wir werden sagen, bewegen Sie sich über. Und wir werden sagen, alle 1000 Millisekunden zu tun, die wir füllen wollten, so dass wir die Stile des letzten Punktes der Animation persistent erhalten. Und wir verwenden eine Leichtigkeit und Out Timing-Funktion. Jetzt hatten wir auch, wir änderten es von einem Quadrat in einen Kreis, wie es ging rechts. Also, was wir hier eigentlich tun müssen, gehen wir aus dem Grenzradius. Und Sie sind auch in JavaScript Landnutzung, CamelCase, Eigenschaftsnamen. Also in CSS würden wir Grenzstrich haben, Radius in JavaScript ist Grenze und dann Radius mit einem Großbuchstaben R Also ein Grenzradius wird keine Opex sein und wir werden transformieren nicht. Das wird also unser Ausgangspunkt sein. Und dann werden wir das in den Radius des Baumeisters ändern. Und dann wird das 50% sein. Schauen wir uns mal an. Okay, also etwas hier. Während wir uns geirrt haben. Ich vermisse da ein Komma. Mit Ihren Schlüsselbildern können Sie hier sehen, dass sie diese geschweiften Klammern verwenden. Und nach jedem Satz von geschweiften Klammern, das ist, diese sind von jedem einzelnen Keyframe. Und nach jedem von denen müssen Sie ein Komma eingeben. Okay, also gehen wir. Und wieder denke ich, auf dem, den wir mit CSS gebaut haben, wir haben auch die und die Hintergrundfarbe transformiert. Also wäre es zurück Boden Farbe es so. Und wieder, Sie übergeben in eine Schnur und ein Dankeschön war drei. Also gehen wir hin. Das war der erste Teil dessen, was wir mit dem CSS gemacht haben. Interessant daran ist, dass wir jetzt sagen können, dass wir Dinge sequenzieren können. Also können wir sagen, wann das fertig ist. Also, wenn diese Animation fertig ist, werden wir auf eine neue starten. Und wir werden Ding Dot sagen, und ich bin acht. Und wieder werden wir in zwei Dingen passieren. Der erste ist unser Array von Keyframes. Nochmal, nicht, lassen Sie sich vorerst nicht daran hängen. Und es wird in Trends Form gehen. Und es ist wie verdammt unter Pixeln. Lassen Sie uns einfach überprüfen, was hier passiert und Sie können sehen, wie das sequenziert wird. Und so werde ich vorerst gehen. Wir werden das in einem Moment ausführlicher ausfüllen. Und das wird wieder sagen, es gibt hier eine Verzögerung von 2,5. Und dann machen wir das gleiche Zeug wie vorher. Wiederverwendung einfach und heraus. Ok, Dauer. Wieder sehen Sie, dass es keine spezifischen Befehle zu diesen Dingen gibt. Solange du das richtige Zeug da drin hast, wird es gut funktionieren. Ok. Mal sehen, was das für uns tut. Okay, können Sie sehen, wie eine nach dem anderen läuft, obwohl ich die falschen Werte drin habe. Also in der Minute transformiere ich von 300 hier rüber, um dann 0 und die x-Achse zu sein. Also muss ich sicherstellen, dass die 300 da drin sind. Und wir machen die 200 vorerst. Ok. Mal sehen, was das für uns tut. Okay, und wenn du dich daran erinnerst, wollten wir es auch wieder zu einem Quadrat machen. Also nochmal, was wir hier tun müssen, da wir unsere Hintergrundfarbe zurück zu dem machen, was es war. Und das war F9 0. Und wir machen den Grenzradius zurück auf 0 Pixel. Oder wir könnten Prozentsätze verwenden, die phi überlappen. Auch hier erwarte ich nicht, dass Sie dies jetzt verstehen Dies gibt Ihnen nur einen Überblick darüber, wie Sie einfache Animationen mit der JavaScript Web Animations API schreiben würden. Okay, das ist also ein sehr kurzer Überblick, fertig mit und jetzt können wir in das unheimliche Gritty kommen. 6. Project: Willkommen zurück. Lassen Sie uns einfach unsere Erinnerungen auffrischen , was die Hauptprojekte sind, die wir gemeinsam aufbauen werden. Wir haben einen Bühnenbereich Canvas, wenn Sie so wollen, nicht zu verwechseln mit dem Canvas-Element, das Sie bekommen. Sie können auch ein JavaScript verwenden, um Dinge mit zu malen. Wir verwenden das Canvas-Element nicht. Ich nenne das nur, ähm, dieses Element, dass wir alles in Canvas verschieben werden. Und wir haben auch diese Knöpfe unten. Also haben wir als Nächstes die Dinge überspringen. Und dann haben wir auch als zieht Boston, und dann haben wir schwarzes Loch, das wird zu viel später kommen. Wir haben hier ein bisschen Setup zu erledigen. Wir haben auch eine kleine Anzeige von der Szene, die sich auch befindet. Wir werden die Shell aufbauen, dieses Ding zuerst im nächsten Video. Nun, wenn Sie in erster Linie daran interessiert sind, nur zu verstehen und in das Bit zu gelangen, wo wir tatsächlich die API verwenden. Vielleicht möchten Sie ein wenig überspringen, aber in den nächsten Videos, abgesehen vom Aufbau dieser Struktur, wir auch Dinge wie Timing-Funktionen und Keyframe-Animationen abdecken. Im Allgemeinen, nur als eine Art Auffrischung für den Fall, dass er etwas Sie noch nie getan haben, oder etwas, das Sie brauchen nur ein wenig von einem Ich werde wieder auf Geschwindigkeit mit. Wenn Sie sich also keine Sorgen um die Leichtigkeit in Timing-Funktionen, Dauern, wie man Iterationen macht, überspringen Sie jedes dieser Art von Sachen mit allen Mitteln. Ansonsten, hängen Sie für die nächsten paar Videos herum und wir werden durch Elasto gehen und dann bauen oder tatsächlich Projekt zusammen. 7. Grundlegende Einrichtung: Wir fangen mit dem einfachsten Setup an, das Sie sich vorstellen können. Wir haben eine praktisch leere HTML-Datei. Nichts als ein Konsolenprotokoll in unserer JavaScript-Datei. Und ich werde Stile und offensichtlich diese beiden Stylesheet und die JavaScript-Datei beide auf das Stylesheet verlinken. Und sie riefen zu unserem Animationsskript an. Wir brauchen nicht, und Sie brauchen keine Build-Tools, um dies zu folgen und die Dinge zum Laufen zu bringen. Ich werde ein Tool namens Browser Sync in diesen Videos verwenden, nur weil es mir automatisch neu lädt und bedeutet, dass wir schnell weitergehen können , ohne dass ich ständig aktualisieren die Seite. Jetzt können Sie natürlich auch Installateure selbst. Wenn Sie zu BrowserSync dot IO gehen, können Sie hier Installationsanweisungen sehen. Es erfordert nicht ein paar zusätzliche Dinge wie npm und node, die, wenn Sie mit diesen Tools nicht vertraut sind, denke ich, dass mein Rat an dieser Stelle einfach diesen Teil vergessen würde. Lassen Sie sich nicht verdrängt und bringen Sie diese Build-Tools auf und führen Sie das aus. Das ist nicht der Fokus dessen, was wir hier tun. Wir wollen auf die guten Sachen und machen die Web-Animationen. Also, wenn Sie vertraut und bequem sind, schnitzen Sie vielleicht eine halbe Stunde aus und versuchen, dieses Ding Laufbuch zu bekommen. Arbeiten Sie nicht an diesem Punkt, es ist nicht super wichtig. Alles, was es erfordert, ist eine MPI-Installation durchzuführen und Browser-Synchronisierung global zu installieren. Und dann können Sie sehen, ob Sie klicken, beginnen. Auch hier wird es anders sein, je nachdem, auf welchem Betriebssystem Sie sich befinden. Ich bin hier ein Mac. Sie können Windows sein, Sie vielleicht Linux. Und sobald Sie das geöffnet und ausgeführt haben, ist es ein einfacher Fall, dass Sie ein Terminal öffnen und es in einem Befehl übergeben, BrowserSync, den Sie im Grunde BrowserSync anweisen, einen lokalen Server zu starten. Und Sie können hier sehen, ich erzähle das Dingen, die ich hier erzähle. Ich führe die Browser-Synchronisierung als Befehl aus, starte, stoppe die Browser-Synchronisierung. Und dann die beiden Arten von Argumenten, wenn Sie wollen, dass ich übergeben, um zu dienen und sorry, Server und Dateien. Und diese beiden Optionen lassen Sie sagen, wo der Wurzel des Servers sein wird, dass er sich drehen wird und wo die Dateien sind, die Sie wollen, dass er sich ansehen. Nun, in diesem Beispiel hier, meine Schuld, meine Dateien, die wir hier in einem Ordner namens vid sieben betrachten. Von diesem Punkt an führe ich diesen Befehl aus und klicke auf Enter und die dreht mich hier einen lokalen Server. Und dann ist es einfach, als ob ich das ändern will, um orange Farbe zu bevorzugen. Ich bekomme diese sofortigen Nachladungen. Es ist also nur ein sehr hilfreiches Werkzeug, wenn Sie schnell über Dinge iteriert werden. Es spart Ihnen ziemlich viel Zeit des Befehls und alles, um Ihre oder mit der Maus zu aktualisieren, um dies zu tun, großartige Werkzeuge, nur Sie können es schnell laufen. Streß nicht drauf, wenn du weitermachst. Darüber hinaus werden Sie wahrscheinlich hier sehen, dass ich ein Tool namens hübscher verwende. Und wir werden hübscher tut, ist es nimmt die Form tatsächlich Code im Wesentlichen an. Also, anstatt Sie sich Gedanken über Einrückungen oder ob Sie Semikolons setzen und den ganzen Rest davon. Ziemlich kümmert sich nur um das für dich. So können Sie hier sehen, ist ein Beispiel. Wenn ich diese Datei nicht richtig eingerückt habe, kann ich sie einfach speichern. Und hübsch wird es hübsch aussehen lassen. So hübscher, wenn Sie nicht mit ihm vertraut sind. Ich kann es sehr empfehlen. Schöner Punkt-IO. Und wieder, es ist ein weiteres Werkzeug, das Knoten brauchen wird, wird MPM benötigen. Betonen Sie es nicht, wenn es Zeit braucht oder es schwierig ist, aufzustehen und zu laufen, überspringen Sie es. Sie können immer später darauf zurückkommen, aber lassen Sie sich nicht davon abhalten, einige Dinge zu animieren. Also mit dem besagten, lasst uns im nächsten Video weitermachen und tatsächlich unsere Grundstruktur aufbauen. 8. Die Bühne und Kontrollen erstellen: In diesem Video schauen wir uns die Art des Fundamentes an, wenn du willst, dessen, was wir bauen werden. Wenn wir also mit HTML beginnen, können Sie das einzige, was ich aus unserer leeren Datei hinzugefügt habe sehen. Er ist, ich habe hier ein Hauptelement, das wiederum leicht in den Entwicklerwerkzeugen zu suchen ist. Also haben wir ein Hauptelement. Wir haben hier, Sie können den Leinwandbereich sehen, nicht die echte Leinwand. Nur ein div, dass ich 6'2 bin und Canvas, das ist, wo wir ein Gesetz Sachen umlegen werden. Und Sie können hier sehen, es hat nur eine feste Breite und Höhe Grenze um die äußere Hintergrundfarbe. Und Sie können sehen, dass es einen Überlauf versteckt hat, nicht eine Position von relativ. Der verborgene Überlauf ist wichtig, denn sobald wir anfangen, Dinge umzuschalten wollen wir das genauso wie unsere Filmkamera, wenn Sie möchten. Und wenn die Dinge zu beiden Seiten gehen, wollen wir nicht an der Seite unseres Bühnenbereiches hängen. Und die Position relativ ist wichtig, denn wenn wir weitermachen, werden Sie sehen, dass, wenn wir Dinge in unsere Leinwand hinzufügen, wir werden in der Regel werden sie absolut in Kürze zu positionieren. Aber der Verwandte ist wichtig, weil sonst Dinge, die absolut positioniert waren, sich gegen das Ansichtsfenster anstatt unseren Bühnenbereich positionieren würden . Sie können hier sehen, dass wir gerade Standard-Button-Elemente für jedes unserer Steuerelemente auf der Unterseite haben, jeder von ihnen hat eine ID-Typ-Schaltfläche. Ich habe immer die Gewohnheit, Type-Schaltfläche auf Schaltflächen zu schreiben , da das Standardverhalten eines Schaltflächenelements das Senden ist, was in diesem Fall keinen Unterschied machen würde. Aber wenn Sie zufällig eine Schaltfläche hatten, die sich innerhalb eines Formulars befand und Sie keinen Typ schreiben, kann es das Formular absenden. Also, das ist nur eine Abgesehen davon, was eine Erklärung warum ich immer den Typ gleich Button auf fremde Elemente lege. Wir haben eine Klasse von Annie Dash Button, wie in Animationen Button. Auf jedem dieser Gegenstände. Die erste hören die Previous Taste und unsere Black Loch-Taste, die später zu viel kommen wird. Sie können sehen, dass sie das Leben mit deaktivierten Elementen beginnen , denn wenn die Seite zum ersten Mal geladen wird, können Sie weder rückwärts gehen noch das Blackhole ausschalten. Und so sind sie standardmäßig in unseren Stilen deaktiviert. Ziemlich einfach wieder, grundlegende Styling für alle oder Hauptelemente, was uns diese Art von Seitenbreite von 800 grundlegende Canvas Dan gibt, wie ich zuvor erklärt. Und es gibt Tasten haben gerade die Standard-Geister-Button-Stil, wenn Sie möchten. Da drin ist nichts wirklich von Konsequenz. Es ist alles sehr einfaches Zeug. Animationen an dieser Stelle. Alles, was wir getan haben, ist, dass wir Konstanten für jede der Schaltflächen erstellt haben. Also, wenn Sie sich erinnern, haben wir die Kontrolle vorher, das ist das eine, das nächste, das ist das ein schwarzes Loch und strömt hier unten. Und dann ist die Anzeige das Bit Text, das dort erscheint. Also, wenn wir durch die Szenen springen, wird es sagen, einer von zwei, sorry, einer von 32 von 3.3.3. Dann haben wir zwei Ereignis-Listener hinzugefügt, die an diesem Punkt haben wir, wir sind nicht bereit, Sachen zu machen, Pause zu spielen, und wir sind nicht daran interessiert, Dinge rund um das schwarze Loch zu machen. sind wir. Das erste, was wir daran interessiert sind, ist die Verkabelung dieser nächsten und vorherigen Taste. Und was das tun wird, wird uns einen Mechanismus geben Szene vorwärts zu verschieben, wenn du willst. Und ich zeige dir die Mechanik davon, wie wir gehen. Aber im Wesentlichen müssen wir nur einen Listener oder eine Funktion erstellen , die ausgeführt wird, wenn auf diese Elemente geklickt werden. Und wir könnten gleichermaßen anstelle von Clint verwenden, wenn Sie es vorziehen, von den Zuhörern, die wir auf diese beiden Bosonen haben. Sie können hier sehen, es gibt eine max idx, die der maximale Index ist, den ich auf drei gesetzt habe. Nun, das wird die Grenze für wie viele Szenen sein. Die Sache, die wir haben, wird haben. Ich kodiere das hier hart. Aber es kann Fälle geben, in denen Sie etwas bauen , wo es sinnvoller ist, dies dynamisch zu tun. Sie könnten also tun, es könnte ein DOM-Lesen sein, das Sie tun müssen. Es könnte auf den Daten basieren, die hereinkommen. Das sagt Ihnen, dass diese sieben Folien, die Sie an dieser Stelle durchgehen müssen, nur fest codiert sind. Wir haben auch ein paar Runden für den vorherigen Index auf dem aktuellen Index gesetzt. Und das ist so, dass wir herausfinden können, ob wir vorwärts oder rückwärts gehen, was hoffentlich etwas mehr Sinn macht, wenn wir durch diese Prozessrichtung Klickfunktion gehen . Jetzt habe ich absichtlich diese Prozessrichtungsklickfunktion zusammengeklappt gelassen , weil sie ziemlich dicht ist, obwohl hoffentlich gut kommentiert ist. Wenn Sie sich erinnern, werden wir nur eine Dysfunktion auslösen , wenn Sie entweder auf die Schaltfläche Weiter klicken, wenn Sie auf die Schaltfläche Zurück klicken. Und das erste, was wir tun müssen ist festzustellen, auf welche dieser beiden Sie geklickt haben. Diese Sache, die wir machen, funktioniert im Prinzip, indem Sie eine bestimmte Anzahl von Szenen , die Sie auf Weiter klicken können, um durch einen Weg gehen und vorherige, um durch das Gegenteil zu kämpfen. Das erste, was wir festgestellt haben, ist, was ich hier Polarität nenne. Und ich möchte wissen, ob Sie den ersten geklickt haben oder sorry, wenn Sie auf vorherige oder nächste geklickt haben. Und auf dieser Grundlage setzen wir die Polarität entweder auf 0 oder auf eine Eins. So ist hier ein ternärer Operator, der wie eine kondensierte if else - Anweisungen ist. Und alles, was wir tun, sagen wir, ist die ID der Sache, die dieses Steuerelement priv klickt. Wenn es so ist, dann ist unsere Polarität 0, IE wir gehen rückwärts. Und wenn du als Nächstes geklickt hast, oder, weißt du, wenn es nicht so ist, dann ist es im Grunde eine, die bedeutet, dass wir vorwärts gehen. Wir wollen auch den vorherigen Index überall dort setzen, wo wir uns gerade befinden. Das schien verwirrend, denn wenn wir klicken, bewegten sich diese in die eine oder andere Richtung. Wir müssen speichern, wo wir gerade sind, falls Sie dafür zurückkommen wollen. Oder vielmehr können wir sagen, in welche Richtung wir reisen. Wir haben das da gesetzt. Und dann, basierend darauf, ob unsere Polarität als Eins oder 0, wenn es eine Eins ist, Wir gehen vorwärts. Und so, wenn wir gerade sind, ist die gleiche wie der maximale Index, die, wenn Sie sich erinnern, wir setzen MaxIndex an der Spitze erscheinen. Dann beenden Sie im Grunde. Das bedeutet, dass wir am Ende unserer Szenen stehen. Andernfalls möchten wir deaktiviert von der Schaltfläche entfernen. Möglicherweise wurde sie zu diesem Zeitpunkt nicht aktiviert, aber wenn dies der Fall ist, wird sie entfernt. Und dann wollen wir den aktuellen Index setzen. Das wird also für das nächste Mal funktionieren. Wir werden den aktuellen Index setzen, eine Ergänzung dazu machen. Wir werden es auszählen. Wir werden diese ganze Zahl erhöhen. Wenn es also ungleich Null war, wird es warm sein. Aber zuerst müssen wir es überprüfen. Also werden wir sagen, ob der aktuelle Index, wenn er einen hinzugefügt hat, der gleiche ist wie oder gleich 12 MaxIndex ist. Dann setzen wir es auf MaxIndex. Andernfalls setzen wir den aktuellen Index auf den aktuellen Index plus eine Größenumverdrahtung, die, hören Sie sich das noch einmal, verwirrend klingt. Vertrauen Sie Papierkram. Dann auch, wenn der aktuelle Index der MaxIndex ist, wollen wir ihn so einstellen, dass er deaktiviert wird. Also im Grunde, wenn wir zum letzten übergegangen sind, wollen wir neben deaktiviert werden, weil Sie nicht weiter vorwärts gehen können. Sonst ist dasselbe, aber rückwärts zu gehen. Also, wenn Sie rückwärts gehen, wollen wir deaktiviert vorwärts, denn wenn wir rückwärts gehen, dann können wir natürlich vorwärts gehen. Wenn der aktuelle Index 0 ist, können wir beenden, weil wir gleich am Anfang sind. Andernfalls werden wir alle deaktivierten Zustand von der Schaltfläche entfernen, sorry, deaktiviertes Attribut von der Schaltfläche. Und dann werden wir den aktuellen Index auf den aktuellen Index minus eins setzen. Wenn das kleiner oder gleich 0 ist, setzen wir es auf 0. Andernfalls werden wir den aktuellen Index auf den aktuellen Index minus eins setzen. Denken Sie also daran, wenn Sie nicht zu ternären Anweisungsoperatoren in JavaScript verwenden, Sie diese nur als kondensiert betrachten, wenn elses, das ist im Wesentlichen, was sie sind. Und was du tust, ist, dass du sagst, wenn etwas wahr ist, aber es gibt eine Bedingung im Grunde. Und wenn diese Bedingung wahr ist, tun Sie diese erste Sache, sonst tun Sie diese zweite Sache. Und dann, nur um zu sehen, was diese Werte sind, werden wir die Konsole ausloggen. Dieser untere Abschnitt hier wird zu später zurückkommen. Hier geht es darum, wie wir Animationen machen und aufhören, das zu tun, was sie tun, jedes Mal, wenn Sie vorwärts und rückwärts klicken. Also mach dir keine Sorgen darüber. Aber für jetzt, um auf diesem Video auf den neuesten Stand zu bringen. Und wieder, das ist offensichtlich nicht, dies ist nicht wichtig für die Web Animations API. Dies ist nur für das Projekt, das wir bauen, als geben Sie uns nur einen Rahmen für die Abfeuerung dieser verschiedenen Animationen und Szenen. Nur um zu überprüfen, funktioniert dies wenig mit unserem Browser-Synchronisation läuft aus dem letzten Video. Wenn ich auf Weiter klicke, war es ungleich Null und jetzt ist es eins, war auf eins und jetzt war es auch nicht zu und jetzt ist es drei. Und es gibt behinderte Staaten, als ob ich nicht weiter vorwärts gehen kann, um in die andere Richtung zurückzukommen. Ich war auf drei und jetzt war es auch nicht. Jetzt ist es warmes Wasser auf einem und jetzt ist es 0, wenn es nicht weiter zurück gehen kann. Das war eine Menge Werkzeug für das, was scheint nicht sehr viel auf der Seite, aber das wird im Wesentlichen, was wir in den nächsten Videos tun wollen. Nun, bevor wir mit JavaScript richtig animieren, gibt es noch ein paar weitere Themen, die wir nur brauchen, um zuerst in den Griff zu bekommen. Und das sind prinzipiell wichtige Framings. Und dann auch die verschiedenen Timing-Funktionen. Also schauen wir uns die in den nächsten Videos an. Wir sehen uns in einem Augenblick. 9. Web Keyframes: Nur um sicher zu sein, dass wir auf den richtigen Fall gehen. Ich werde jetzt die Grundlagen dessen durchgehen, was wir mit Keyframing und Tweens und Animationen und all diese Art von Sachen meinen . Also nur auf die Chance, dass Sie nicht mit der Idee von Schlüsselbildern vertraut sind. Wenn wir eine sehr einfache Animation haben und lassen, nehmen wir an, wir haben hier einen Ball. Und wir wollen, dass es hier runter kommt und dann hier fertig ist. In Animationsbegriffen, was wir tatsächlich als Endverwendung sehen würden oder wenn Sie es sehen, ein Aufruf an, würden Sie sehen, dass Sie nicht nur sehen würden das Ding sofort von dort nach dort bewegt. Was Sie sehen würden, ist der Weg des Balls, der sich von 1 zu einem anderen bewegt, und dann schließlich zu diesem Punkt. Und die Terminologie für diese Dinge, oder hören oder Ihre Schlüsselbilder. Und dann die Bits dazwischen, oder wo das Wort Tween, Tweening herkommt. Es sind die Zwischenräume zwischen diesen Schlüsselbildern. Was wir uns also hauptsächlich Sorgen machen, wenn wir animieren, ob dies nach Effekten oder ob das durch JavaScript oder CSS ist, ist, dass wir daran interessiert sind diese Keyframe-Punkte zu erstellen und die Computer herauszufinden, die in-zwischendurch. Das sind also die Grundlagen von Keyframe. Wenn wir also über das Organisieren von Keyframes und das Schreiben von Keyframes sprechen, denken Sie daran, dass Sie nur tun, Sie angeben, wo sich diese Punkte befinden. Wo es eine deutliche Veränderung zwischen der Bewegung der Sache, die Sie animieren, wie sich das manifestiert, sehen und darüber nachdenken. Wir werden nicht wirklich etwas animieren. Aber nehmen wir nur an, div Klasse entspricht Box. Nehmen wir an, wir haben hier eine Schachtel und sagen Kastenbreite. Wunder-Pixel, richtig? Auf den Pixeln. Dieser Boden Cola. Wer nicht ein bisschen liebt, Hot Pink, Pink, Pink. Ok. Da ist unsere Kiste. Und wenn wir dieses Ding bewegen wollten, ist die Art und Weise, dass diese Sperre in JavaScript-Begriffen wir würden sagen const Box gleich Abfrage, Sorry, Dokument Punkt Abfrage Selektor. Und da ist eine Kiste. Und dann würden wir sagen, Box dot animieren. Dies ist die Art, wie die API Web Animations API diese animierte Methode hat. Und Sie können hier sehen, dass das Werkzeug in Sublime mir sagt, dass dies zwei Argumente benötigt, eine Reihe von Schlüsselbildern. Und dann, was sind Kühloptionen oder Keyframe-Animationsoptionen? Und wir kommen zu denen im nächsten Video. Das erste, was wir daran interessiert wären, vorbei zu gehen. Also wirst du es passieren. Normalerweise zwei Objekte oder ein Array von Objekten und eine Reihe von Objekten. Was das erste Bit vor dem ersten Argument, das wir übergeben werden, sind immer die Keyframes, ob es sich um einen einzelnen Keyframe oder eine Reihe von Schlüsselbildern handelt, die als Array übergeben werden. Also würden Sie typischerweise sein, wenn dies ein Schlüsselbild wäre, also würde dies passieren, wenn einige Dinge bereits irgendwo anders im DOM sind. Und sagen wir, wir wollen es verwandeln, wir werden sagen, übersetzen seine Val läuft spät und es ist immer ein String hier. Und wir würden sagen, 500 Pixel, 200 Pixel. Das ist nur der Single. Wenn wir es bewegen wollten. Ein paar Schlüsselbilder wie diese Art von unglaublichem Kunstwerk, das ich Ihnen zuvor gezeigt habe. Sie müssten ein Array von Objekten übergeben. Stattdessen, was Sie hier tun, ist, dass wir einfach ordentlich in der oberen Minute, ich werde die wegkriegen, weil Sie sich keine Sorgen um die machen müssen. Anstatt ein einzelnes Objekt zu übergeben, würden Sie ein Array von Objekten übergeben. Also ist es nur notwendig, dies ein wenig in fettigen Aufforderungen macht mehr Sinn für lassen Sie uns vollständig runter. So u, b und das zweite Bit und transformieren und wir bekommen, um das Dreifache seiner Größe zu skalieren. Also in diesem Fall, dass Schlüsselbild, das Übergeben von zwei Schlüsselbildern dort. Der erste ist übersetzen. Jede zweite ändert die Skala. Nun, Sie könnten, standardmäßig nur in einer Dauer übergeben. Das sollte Rom. Also, wenn wir gerade in zweitausend und zweitausend Millisekunden auf Sekunden vorbeigegangen sind, und wir haben diesen Bit loswerden. Also jetzt setzen wir nur in sentient alle Keyframes mit Dauer. können Sie unser wunderbares Stück Animation sehen. Diese zweite Wette hier ist jedoch, wo wir normalerweise würden, und öfter als nicht, werden Sie ein Objekt mit einer Reihe von Optionen für eine Reihe von Timing-Funktionen senden. Und wir werden uns im nächsten Video ansehen. 10. Timing: Im letzten Video haben wir uns Keyframes, Theorie der Keyframes und wie sie im Grunde mit der Web Animations API angewendet werden. In diesem Video werden wir uns das zweite Argument ansehen , das wir in die animierte Funktion übergeben. Hier haben wir das letzte Video hinterlassen. Und wir hatten, wenn Sie sich erinnern, wir haben die Animate, die wir übergeben haben. Das erste Argument, das wir übergeben haben, war ein Array von Schlüsselbildern. Wir haben das am Ende des letzten Videos gelassen und das zweite Argument war einfach leer. Im Wesentlichen haben wir versucht, wenn Sie sich daran erinnern, dies auf eine Dauer zu setzen, die alles standardmäßig ausgeführt wird, aber mit einer Dauer in ihren 3 Tausend Millisekunden, drei Sekunden. Und Sie können hier sehen, das ist der Effekt, den wir bekommen, wenn wir das ausführen. In der Regel werden Sie jedoch nicht nur in der Dauer senden. Du wirst auch andere Dinge schicken wollen. Nun, wenn ich nur Not bin, hoffentlich ein bisschen hier, damit du sehen kannst, was ein bisschen besser los ist. Er ist das Öffnen und Schließen aller animierten Funktionen. Das erste, was wir tun, dass wir uns das letzte Video angesehen haben, ist das Senden in diesem Array von Keyframes. Und was wir an diesem Video interessiert sind, ist, was nach dem Komma kommt, die zweite Reihe von Argumenten. Und in der Regel wird das ein Objekt sein. Nun, Dinge, die Sie in dieses Objekt übergeben können , sind alles mit der Art zu tun, wie Sie die Animation nach Rom wollen. Also Dinge, die Sie in oder Dauer senden können, die wiederum Millisekunden und Sie schreiben es nicht als String, sondern als Ganzzahl. Also 3 Tausend würden uns 33 Sekunden Verzögerung geben. Sie können eine Verzögerung festlegen, damit das Ding nicht sofort läuft. Sie verzögern auch eine ganze Zahl. So würden 500 Millisekunden Ihnen eine 2,5. Verzögerung geben. Iterationen. Wenn Sie etwas eine bestimmte Anzahl von Malen ausführen wollten, könnten Sie sagen, Sie wissen, denn, dass es viermal in CSS ausgeführt wird, wenn Sie eine Animation unendlich ausführen möchten, würden Sie unendlich verwenden. Etwas anders. Und die JavaScript-API, würden Sie tatsächlich unendlich als die JavaScript-Nummer unendlich mit einem Großbuchstaben I setzen . Und unendlich, Füllmodus nimmt, Sie haben keinen Filmhafer geschrieben oder es ist nur füllen und Sie müssen es übergeben eine Zeichenkette. So könnten Sie die Standardeinstellung haben. In JavaScript, eine lineare Timing-Funktion. Css ist anders und CSS ist es eine Leichtigkeit. Damit das dich vielleicht erwischen kann. Also seien Sie sich dessen bewusst. Und was Sie in 0s und aus senden können. Oder wenn Sie wollen, um Phantasie, vielleicht gibt es etwas Nettes, Sie haben gesehen, es leicht gewinnt, und lasst uns eine wählen, wählen wir diese Art von. So können Sie wählen, eine Glockenkurve zu verwenden. Und wieder, übergeben Sie das einfach als String. Also, wenn Sie es zitieren und senden Sie es in. Wenn die Sache jetzt läuft, dauert es drei Sekunden, ich werde diese Verzögerung entfernen, weil wir langweilig werden. Zustimmung zum Zuschauen. Zwei Sekunden. Es wird ewig weitergehen und wir haben diesen Film aufgegeben. Sie können es auch sagen, dass sie sich bewegen soll. Sie können auch die Animationsrichtung festlegen, die, wenn Sie irgendeine dieser Art von Sachen in CSS gemacht haben, Sie wissen, dass Sie normal, rückwärts, ultimativ, alternativ umgekehrt gehen können . Auf den ersten Blick könnte man denken, warum das Gegenteil ist und warum ist das, sorry, Y ist das ultimative Gegenteil. So normal würde von der Kulisse gehen, aber Dampf, normal würde in diese Richtung gehen. Umgekehrt würde offensichtlich in diese Richtung gehen. Ultimativ ist hin und her. Ultimative rückgängig gemacht. Der entscheidende Unterschied, wie es am Ende beginnen würde, diese Weise zu bewegen, und dann weitermachen. Und du würdest diese Richtung schreiben. Und wieder, das ist eine Schnur. Also wäre es normal oder es wäre umgekehrt oder letztendlich umgekehrt. Lassen Sie uns das loswerden. Lassen Sie uns das loswerden. Und sieh mal, was das tut. Nicht sehr viel. Okay, also ein Mistkerl etwas. Jetzt gehen wir und schauen uns kurz an, ob wir feststellen können, was ich falsch gemacht habe. Dieser bearbeitete Redakteur. Okay, also wie ein Idiot, habe ich den Füllmodus so eingestellt, dass er eine glockenförmige Kurve ist, in der er sein sollte. Ist das oder füllen. Phil, wir haben nicht gedeckt. Phil könnte rückwärts normal sein. Los geht's. Es ist weg. Auto rückwärts, beide vorwärts, nicht oft. Du musst wenigstens vorwärts benutzen. Wenn die Animation ausgeführt wird, möchten Sie die Stile beibehalten, die am Ende dieser Animation vorhanden sind. Vielleicht tust du es nicht. Der andere, den ich häufig verwende, ist beides, was bedeutet, dass unabhängig davon, welche Richtung ich diese Animation ausführe, ich möchte, dass die Stile an beiden Enden je nach welcher Richtung es rund ist. Also in diesem Fall würdest du sterben. Ich bleibe da nur beides drin. Also lasst uns sehen, was das für uns tut. Und Sie können dort sehen, dass die Leichtigkeit in etwas ungewöhnlich bekam diese schöne Art von Popping und Timing-Funktion ging dort los. Also im Großen und Ganzen, wenn Sie diese Art von Sache mit CSS gemacht haben, sollte sich das sofort vertraut fühlen. Wenige Unterschiede, aber im Großen und Ganzen sollte es sein, was du früher gemacht hast. Jetzt haben wir uns die Grundlagen dieser Dinge angesehen. Sowohl die Keyframes im vorherigen Video als auch die Timing-Funktionen und -Optionen in diesem Video. Hoffentlich wird es ein bisschen mehr Sinn machen, wenn wir mit dieser API Dinge machen. 11. Die gleiche Animation aus CSS und JS: In den letzten beiden Videos haben wir uns das Schreiben der Schlüsselbilder für eine Animation in JavaScript angesehen. Und dann haben wir uns auch die Optionen angesehen, die Sie an einer Animation Dauer Verzögerung Timing-Funktionen übergeben können . In diesem Video möchte ich nur nach Hause fahren, wie man eine vergleichbare Animation in CSS und JavaScript schreibt . Also werden wir, wir werden zwei Artikel auf die Seite legen. Wir machen einmal einen Spinner mit CSS, und dann mache ich genau den gleichen Spinner mit JavaScript. Also div Klasse, und wir werden diese eine Spinner CSS-Klasse nennen. Du würdest wahrscheinlich Spinner JS erraten. Beide werden einige Stile teilen. Lassen Sie uns also die gemeinsamen Stile festlegen. Zunächst einmal nicht furchtbar Spinner ish Buchmatten, weil wir hier aufgehört haben, Grenze Radius 50%. Und das wird unser Rechteck Kreis machen. Und in der Tat, nur um ein wenig Platz um diese will ein wenig Rand auf der Außenseite bleiben. Und dann CSS drehen. Sagen wir, Animation. Hoffentlich wird er mindestens 102 CSS-Animationen geschrieben haben. Wenn nicht, wird das hoffentlich einen Sinn ergeben. Wir werden die Animationseigenschaft machen, oder die kurzfristige Eigenschaft, die wir in unserem Animationsnamen übergeben werden, was mich drehen wird. Und es wird 1 Sekunde sagen. Es wird vorwärts haben und daher die Stile behalten , wie es geht und es wird unendlich gehen. Und dann, wenn Sie sich erinnern, und Animation in CSS verwendet bei Leichtigkeit Timing-Funktion standardmäßig. Und wir werden wollen, nun, in der Tat, ich werde Ihnen zeigen, was das standardmäßig tut, und dann werden wir setzen, dass den Unterschied initiiert. Keyframes drehen sich also auch. Und hoffentlich erinnern Sie sich in CSS, wenn es Standardzustand ist, woher Sie wechseln möchten. Sie müssen das nicht definieren, also können Sie einfach sagen, wohin Sie gehen möchten. Also in diesem Fall werde ich gehen eine Transformation, die eine Drehe 359 Grad ist. Okay, jetzt können Sie hier sehen, dass das die Standard-CSS Timing-Funktion ist, die eine einfache ist, was diese Art von Staccato Art von Bewegung ist, die Sie dort bekommen. So können wir das und CSS für unsere Bedürfnisse hier lösen, indem wir nur linear sagen. Und das wird uns eine, eine lineare Zeit und Funktionen des Spinats geben einfach weiter. Also, das ist unser CSS eins sortiert. Schauen wir uns an, wie wir die gleiche Animation mit JavaScript schreiben würden. In Wirklichkeit ist es so zu drehen, dass dies kein guter Anwendungsfall für eine JavaScript-Animation mit der Web Animations API ist. Wir tun dies wirklich, nur um das Format nach Hause zu fahren an das wir uns jetzt in JavaScript der animierten Methode gewöhnen, indem wir die Keyframes übergeben. Und dann die verschiedenen Timing-Optionen, die wir auch diesem Kontext zuweisen wollen, ist unser Spinner J S gleich Dokument. Also werde ich mir das und das Dokument zuerst schnappen. Und dann werden wir animieren und wir werden in zwei Objekten übergeben. In diesem Fall wird dies unsere Optionen sein, einschließlich der Timing-Funktion. Und dieser erste wird unser Keyframe sein. Also wieder, Schlüsselwort ist nicht als Zeichenfolge, aber der Wert der Eigenschaft ist, so werden wir drehen 359 Grad. Und dann hier sagen wir Dauer. Wenn Sie sich erinnern, in JavaScript mit der JavaScript-API sind es keine Sekunden, es sind Millisekunden und wir übergeben es als Ganzzahl. Also gibt es unsere 1 Sekunde ist Millisekunden. Wir wollen nicht verzögern. Wir wollen unsere Füllung. Und wir werden noch einmal sagen, als eine Zeichenfolge übergeben, bereit, vorwärts zu sagen, weil es Dinge gibt, die immer nur vorwärts gehen, erzwingen Iterationen. Und JavaScript, wir übergeben es unendlich und nicht unendlich. Und dann, wie wir vor einem Moment besprochen haben, ist JavaScripts Standard-Timing-Funktion eine lineare, also sollten wir das nicht setzen müssen. Sie können sehen, dass sie genau gleich sind. Drehen Sie animiert einmal mit CSS und einmal mit JavaScript. Ein häufiges Problem bei CSS-Animationen ist nun, wenn Sie zum Beispiel zwei Transformationen durchführen und sie gleichzeitig auf demselben Element ausführen möchten. Das ist einfach nicht etwas, was Sie mit CSS tun können, aber es ist etwas, das Sie mit JavaScript Web Animations API tun können. Im nächsten Video schauen wir uns an, wie wir etwas Einfaches hinzufügen können, wie eine Skala. Zusätzlich dazu, transformieren Sie drehen. Und wir werden sehen, wie das mit JavaScript möglich ist. 12. Animationen hinzufügen: Am Ende des letzten Videos hatten wir uns zu Spinner gemacht. Eine animiert mit CSS und die andere animiert mit JavaScript. Und ich erwähnte, dass eines der häufigsten Probleme, die Sie mit CSS bekommen würden, ist, wenn Sie versuchen, auf Keyframes anzuwenden, die Transform zum Beispiel gleichzeitig auf dasselbe Element verwenden . Also zuerst werde ich das mit dem CSS machen. Und Sie können das Problem sehen, das auftritt. Nehmen wir an, wir haben unseren Autopsie-Spinner hier ist die CSS-Version. Und nehmen wir an, dass neben diesem Ding sich dreht, ich will auch, dass es pulsiert. So geht es ein wenig kleiner, ein bisschen größer, wenn der Spin stattfindet. Sie könnten also denken, dass Sie so etwas tun könnten. Also habe ich eine andere Transformation und Sie würden vergeben, wenn Sie glauben, dass dies mit einem anderen Keyframe funktionieren sollte , das und alles, was tut, ist das Element zu skalieren, auf das angewendet wird. Da ist unser erster, ich kopiere das einfach. Er ist, ich werde den Zweiten. Und dieser hier wird Scale me sein. Siehst du, wie es verwirrt ist? Form eines besseren Wortes? Es versucht, beide Animationen zu tun, sind Einsen. Breed weiß nicht, wie man das lösen kann. Es kann nicht, es kann nicht herausfinden, wie man beide Transformationen zusammen anwendet. Jetzt, wie wir das Ende 2020 erfaßt werden, gibt es dafür keine Lösung in CSS. Es gibt jedoch eine Lösung dafür in JavaScript, nur um zu verhindern, dass das Top ruhig ist, so nervig. Und ich werde die Animation von der CSS ausschalten. Flip über die JavaScript-Datei, und dann schauen wir uns an, wie wir das mit JavaScript machen können. In der Tat können wir, wir können hier Zeit sparen, indem wir das nehmen. Und wir kamen, um dieses Bit zu ändern, um Maßstab 0,8 zu sein. Jetzt ist dies genau die gleiche Situation, die wir mit allen CSS hatten. Aber die Javascript Web Animations API als Trick rief die Hülse auf. Sie können auch innerhalb Ihrer Optionen, Sie können Composite verwenden. Und es gibt ein paar. Sie können hier sehen, dass Strings, die Sie an Composite übergeben können, beim Ersetzen akkumulieren , den Standard ersetzt, der die vorherige Animation übernimmt und diese durch diese neue ersetzt. Was wir hier tun wollen, ist wählen Sie aus. Und was das tun wird, ist unsere zweite Animation zu nehmen und sie mit der ersten hinzuzufügen. Akkumulieren ist ähnlich, aber etwas anders. Wir werden nicht in die Differenzen davon eingehen. Jetzt will ich dir nur zeigen, was passiert, wenn wir es auch einstecken. Sie könnten denken, das ist immer noch kaputt, ist es nicht wirklich nur, weil ich nicht getan habe, dass ich nicht die Richtung gesetzt habe , um in der Minute ultimativ zu sein. Es setzt sich selbst zurück. Aber wenn Sie dies tun, können Sie sehen, dass wir diese schöne Kombination dieser beiden separaten Animation bekommen, etwas, das Sie einfach nicht mit CSS tun können. Eine andere Sache erwähnenswert an dieser Stelle ist, dass Sie sehen können, wie diese Animationen hier geschrieben werden, sie sofort spielen. Nun, das ist vielleicht das, was du tun willst oder nicht. Es gibt also ein, es gibt ein paar Möglichkeiten, dieses Problem zu lösen. Der einfachste Weg wäre, mich zuzuweisen, wie unsere andere zu drehen. Und dieser hier wird Scale me sein. Und was wir dann tun könnten, ist gehen Spin kann Dot Pools. Und sie sollten einen von ihnen ausschalten. Und dann könntest du auch Scale me Dipole machen. Und was Sie hier tun können, ist, dass Sie, sobald Sie eine Animation definiert haben, können Sie sofort, weil wir haben, wir haben es zu einer const dort zugewiesen. Wir können das dann verwenden, um zu sagen, dieses Ding ist angebracht, es ist eine Animation und sofort pausieren. Und dann könntest du das abfeuern. Und andere Ereignisse wie eine Schaltfläche angeklickt wird oder andere Animation beenden, wie wir uns diese jetzt ansehen, sowie auch eine Gelegenheit, dies ein wenig aufzuräumen. Jedes Mal, wenn wir uns diese Animationen bisher angesehen haben, haben wir gerade alles direkt in die animierte Funktion übergeben, was hier in Ordnung ist. Aber wenn Sie etwas ein wenig größeren Maßstab tun, wird es schnell schwierig, alle diese Keyframes und verschiedene Timing-Funktionen zu verwalten. Also, im nächsten Video, werden wir nur ein wenig Zeit damit verbringen, zu schauen, wie Sie das umgestalten könnten , um es ein bisschen einfacher zu machen. 13. WAAPI 13: Wenden Sie Ihren Verstand auf hoffentlich Millisekunden zurück. Im letzten Video waren wir zu diesem Punkt gekommen, wo wir würden, hatten wir gemacht, um uns fast CSS oder JavaScript zu drehen. Und wir haben uns die Freude dieser zusammengesetzten Eigenschaft angesehen , die Sie in JavaScript verwenden können , um zwei Animationen miteinander zu kombinieren. Wenn Sie sich erinnern können, gab uns dies die Möglichkeit, eine Skala auf einer Animation laufen zu lassen, eine Drehung, die auf einer anderen Animation ausgeführt wird, und das Ergebnis dieser beiden zusammen im DOM zu erhalten. Nutzen Sie die Gelegenheit, während wir relativ wenig Code auf der Seite haben , der dies nur leicht umgestaltet und es überschaubarer macht. Gegenwärtig. Jedes Mal, wenn wir in dieser animierten Funktion laufen, übergeben in den Keyframes und die Timing-Funktionen genauso, wie Objekte. Also wahrscheinlich das einfachste, was Sie tun können, wenn Sie eine Reihe von Animationen haben , ist, dass Sie Ihre Schlüsselbilder benennen und sie trennen können. In diesem Fall, obwohl dies sehr einfach ist, könnten wir const, spin kf sagen und sie offensichtlich nicht so benennen müssen. Ich nur, Ich neige dazu, kf, kf am Ende oder am Anfang zu setzen , nur so dass ich weiß, dass es ein Keyframe Miss kommt. Und alles, was wir tun werden, ist, das und so öffentlich zu machen. Und dann kommen wir vorbei. Stattdessen werden wir dies in Latein übergeben, in diesem Frühjahr k, f. Und dann können wir dieses Ding herausziehen und wir können sagen const, Spin Timing. Und dann mit einem besseren Blick, ja, da gehen wir. So funktioniert alles immer noch gleich. Aber was wir tun, ist, dass wir unsere Schlüsselbilder in ein anderes Objekt trennen und wir trennen unsere ganze Zeit für diese Animation, normalerweise neigen Sie dazu, dies zu tun, weil Sie mit Keyframes immer nur in einer Sache wie dieser vorbeigehen. Typischerweise wird es ein Array und eine Reihe von Schlüsselbildern sein. Und all das in der animierten Funktion zu sehen, kann ein wenig chaotisch werden. Also machen wir das Gleiche jetzt mit diesem hier. Und du könntest all das stapeln, außer die Spitze, wenn du es wolltest. Nehmen wir an, wir werden diese Skala KF Wiki Frames aufwachsen. Und wir werden sagen, legen Sie es hier unten, nur dort in einem vernünftigen Audit Const, Skala, Timing. Und nochmal, wir schnappen uns die. Und dann, wenn Sie sich hier vorstellen, hat es nur ein bisschen vernünftiger, über diese als irrational zu denken. Also hier ist unsere animierte Funktion und wir werden sie weitergeben, sorry, skalieren oder nur hier, übergeben alle Keyframes. Und unsere Zeit und sparen Sie das nur so, dass hübsch seine Sache tut. Und dann, was Sie finden können, ist, wenn Sie damit arbeiten, ein großes Stück Interaktion. Sobald Sie herausgefunden haben, Sie können mehr an anderer Stelle kleben und nur Männer importieren und halten die, halten Sie die Logik dessen, was Sie Animation tun, um diese nette, prägnante kleine Ursache für die animierte Funktion. Sie werden diese Art von Muster mehr sehen , wenn wir weitermachen, um ein kleines Projekt zusammen zu bauen. Um Ihnen ein Beispiel zu geben, nehmen wir an, wir haben eine Schaltfläche, fügen Sie Ereignis, Listener, hören Sie. Und dann macht es einfach einfacher, solche Anrufe zu machen. Anstatt, wie in der ganzen Zeit bedeutet und älter. Die Keyframes o darin, wenn und wenn Sie es in diesem Herbst geschafft haben, denke ich, Sie wissen, alles, was Sie brauchen, um zu beginnen, dieses Projekt zusammen mit mir zu bauen. Im nächsten Video werden wir uns das Projekt genauer ansehen, und wir werden Zeile für Zeile Abschnitt durch den fertigen Artikel gehen. Und hoffentlich wird es an dieser Stelle ziemlich klar sein, was los ist. Also geh und hol dir eine Tasse deines Lieblingsgetränks. Es wird wahrscheinlich ein langer sein. Wir sehen uns in einem Moment dort. 14. Übersicht ZUR Animationsdatei: In diesem Video werden wir alles abgesehen von dem Schreiben der Animationen selbst abdecken . Also werde ich Sie durch die gesamte Struktur dieses Projekts führen. Nur damit Sie die Mechanik von allem verstehen, was rund um die Animationen selbst vor sich geht und wie ich dazu gekommen bin, dieser Punkt mit den verschiedenen Dingen im DOM und wie sie positioniert sind. möchte nicht, dass es so aussieht, als würde ich über irgendetwas von der Implementierung fliegen. Das ist also all das Zeug, das den HTML bekommt und wie er dorthin kam, die SVGs davon bekamen, wie sie optimiert wurden und in das DOM eingefügt wurden, den grundlegenden Stil und wie das eingerichtet wurde. Also, wenn all das Zeug, das Sie leben können, ohne, mit allen Mitteln, überspringen Sie zum nächsten Video, wo wir über die tatsächlichen Animationen in diesem Projekt sprechen. Aber sonst bleibst du rum und ich führe dich durch alles, was wir getan haben. Sie können sehen, dass wir hier ein Hauptelement haben. Und in früheren Videos haben wir euch Woche gezeigt. Ich habe Ihnen diese Kontrollen unten gezeigt, das ist die, die verschiedenen Tasten, die wir hier haben. Sie können auch hier sehen, gibt es dieses beiseite Element hier, wo das ist nur, wo ich Kredit an das Kunstwerk gebe und woher das stammt. Die, die Art von interessanten Bit in Bezug auf das Projekt selbst und die Dinge, die Sie sehen können , gehen, wie Sie durch diese Szenen zu überspringen. Alle grafischen Assets, die von einer Website namens vector easy bezogen wurden. Wenn Sie also zu Vektor easy gehen, suchen Sie nach etwas, das in der Art von Sache ist, an der Sie interessiert sind. Also offensichtlich wählte ich etwas Raumthema, aber Sie könnten etwas wählen, na ja, was immer Sie wollen. Das Wichtigste, was zu tun ist, zwei Dinge, die man sich bewusst sein muss. Du brauchst den Bildschirm ein wenig breiter. Sie müssen sicherstellen, dass Sie Editor-kompatibel sind. Und dann alle diese Dinge, die Sie dann klicken, können Sie sehen, dass Sie diesen kleinen Bearbeitungs-Button hier bekommen. Aus Gründen, die ich nicht verstehe, wenn Sie Bildschirm klein ist oder dass Funktionen weggenommen. Also bedürftig, es etwas breiter, klicken Sie auf die Schaltfläche Bearbeiten. Und dann, was Sie tun können, ist, dass Sie tatsächlich einfach das Asset direkt aus diesem Editor hier herunterladen können . Das ist es, was ich getan habe. Also, wenn Sie sich vorstellen, ich habe den SVG-Apps Effekt einfach geschnappt. Und dann, was ich getan habe, ist, dass ich alles an Bord gemacht habe. Ich benutze Sketchier, aber offensichtlich könnten Sie gefälschte Spiegel oder was auch immer Ihre Lieblings-Grafik-Pakete verwenden , fügen Sie es in jedem der Assets, die Nein sind, ich war wahrscheinlich zu brauchen und gab ihnen einen Titel. Und dann eine Sache, die ich immer gerne mache, wenn ich jemals SVG-Asset ins Internet bringen werde, dann werde ich es immer durchlaufen. Es gibt ein Tool namens SVG, das im Grunde SVG-Dateien optimiert. Und noch besser als Unbehaglichkeit. Und dieser Kerl namens Jake Archibald Miter, ein Werkzeug, das SVG umschließt, das ein Befehlszeilen-Tool ist, fügt es in eine schöne grafische Oberfläche. Also in diesem Fall würde ich mein Kunstboard hier bekommen, kopieren Sie den SVG-Code. Öffnen Sie SVG, fügen Sie mein Markup ein, und dann gibt es Ihnen diese beiden Registerkarten hier, die Bildtabletten, Sie überprüfen nur, dass nichts schief gegangen ist, nachdem die Optimierungen durchgeführt wurden. Aber Sie können hier den Unterschied im Code sehen. Ich werde nur diesen Vollbildmodus für einen Moment machen. Dies ist der optimierte Code. Und dann war das das Original. Sie können also sehen, dass es viele Leerzeichen wegnimmt, alle Zahlen normalisiert und Elemente entfernt, die nicht benötigt werden. Das Ergebnis ist so lange, wie das Ding so aussieht, als ob es aussieht. Sie können hier sehen, wir haben eine 64% Einsparung in der Dateigröße. So war es vorher nicht massiv, aber es ist ein ziemliches bisschen runtergekommen. Das kannst du jetzt einfach da rauskopieren. Und das war unser Moss. Und dann, was es tat, ist innerhalb des HTML. Bewegen Sie das einfach da rüber. Also ja, innerhalb des HTML, alles, was ich tue, ist für jedes der grafischen Assets, um sie in ein Element zu wickeln. Und ich habe gerade diesen SVG-Code direkt in das Element eingefügt. Und diese Klasse auf dem schnellen Element ist nur so, dass wir einige grundlegende Positionierung CSS setzen können , die für jedes dieser Elemente hier getan wurde. So können Sie diese genau die gleichen Saturn Mond-Malls sehen, Raketenangriffe planen, Eddie. Da gehst du. Oh, über den Mond, Sterne hinteren Boden. Sie können nur über Ebene ausmachen, aber das war eine Art Sternentkommen, wenn Sie möchten, die Sie hinter jeder der Szenen sehen können. So können Sie das einfach mit diesen Amalgamationen machen , ohne es als Hintergrundelement zu verwenden , was Sie in einer Minute sehen werden. Und dann ist dieses div hier nur unsere erste Art von Stowe Scroll-Text. Er ist die Art von Fleisch und Kartoffeln von dem, was wir zu tun haben, wenn wir kommen, um in Sachen und die grundlegenden Stile zu beleben , um das zu kümmern. Sie können hier sehen, wir haben einige Grundlagen, um von HTML. Und unsere Rapid-Element-Leinwand ist das, was wir hier nennen. Es gibt unsere Stores Hintergrund und jedes Set, um uns unsere Sterne Flucht zu geben. Ich dachte, diese Linie wäre es wert, zu rufen, weil ich später daran vorbei ging. Aber ich dachte, es wäre interessant genug, nur kurz darüber zu reden, um die Hintergrundsterne zu haben, diese Dinge hier. Ich hatte die heller als du sie dort gesehen hast. Und was es tat, ist, dass ich sie festkleben wollte. Das war mit dem Hintergrundelement, kleben die Stile auf der Rückseite und dann, um eine dunklere Wäsche über die Oberseite und dunkel und die Sterne nach unten zu legen. Ich war faul und tat es im Code, anstatt es nur im Grafik-Editor zu tun. Aber während ich dabei war, ist es, einen linearen Farbverlauf zu verwenden , der effektiv kein Farbverlauf war, aber das lässt Sie ein halbtransparentes Overlay auf die Oberseite eines Bildes mit CSS setzen. Er ist ein bisschen eine Art CSS-Trick. Was ich jedoch fand, als ich das tat, ist, dass die Animationsqualität, nicht die Qualität, die die Animationsleistung zu leiden begann. Also würde ich sagen, gelegentlich sind es die Art von Dingen, die Sie eine Wahl treffen könnten. Nicht erkannt, warum unsere Animation sie immer noch versucht , halten Sie Ihre Elemente so einfach wie möglich, Dinge, die Sie hinzufügen Kapazität und Filter. Und CSS sind weniger wahrscheinlich zu animieren Nun, wenn Sie sie um den Bildschirm verschieben, den Scheibenwischer, Sie hier sehen können, dass das ist, wenn jedes CNN, können Sie sehen, dass wir verschiedene Arten von Übergängen haben. Wieder, Art von getragen von der Ofen-Stil Bildschirm löst sich. Und der weiße Teil ist das, was wir verwenden, um das zu tun. Und es ist nur ein einzelnes Element, das wir uns wieder mit dem y p auf der Seite bewegen, Sie können sehen, dass es ein gab, Sie können sehen, dass es ein gab,es gab einen Kastenschatten dort bei 1 wo wieder, Ich zog das heraus, weil es nicht wirklich viel hinzugefügt. Und wieder, es ist mehr und es erfordert mehr Rechenleistung. Wenn Sie ein Rendering, einen Schatten auf dem Bildschirm und Ihren Film über uns haben , offensichtlich intensiver für den Computer zu tun. Alles andere, was Sie sehen können, ist alle unsere grafischen Assets positioniert. Ich setze sie in die Leinwand. Absolut in Position. Standardmäßig werden sie alle einfach oben links neben diesem schnellen Element sitzen. Angenommen, die Dinge sind halb übrig, um zu filtern, weil ich das Gefühl hatte, es war es wert. Also, wenn Sie wollen, um Sie zurück an den Anfang hier, Ich mochte diese kleine Art von Glühen vom Mond, eine volle, die ziemlich ein Vermögenswert war übrig, dass in noch alle diese Elemente positioniert sind, einige von ihnen grundlegende Transformation auf nur positionieren Sie sie irgendwo vernünftig auf der Seite. Und dann werden wir von dort nach woanders animieren. Es lohnt sich, es auszukühlen, nur für den Fall, dass Sie nicht wissen, wenn wir die absolute Position in NCSS verwenden, diese Elemente wieder, um relativ zu ihrem nächsten nicht-statischen Element-Elternteil positioniert zu werden . Also in unserem Fall können Sie hier alle Canvas sehen, die das Elternteil für all diese grafischen Assets ist. Wir haben eine Position von relativ gegeben, was bedeutet, dass unsere absolut positionierten Elemente sich relativ dazu positionieren werden . Die andere gute Sache in Bezug auf die Animation ist, dass Sie keine Transformation verwenden müssen und sich nicht auf andere Elemente auswirkt. Wenn Sie Elemente im normalen Dokumentfluss sind und Sie sie mit Rändern, Füllständen und all diesen Dingen verschieben, werden sie in derRegel Elemente im normalen Dokumentfluss sind und Sie sie mit Rändern, Füllständen und all diesen Dingen verschieben , werden sie in der alles andere stören, was sich auch im Dokumentfluss befindet. Also wegen dem, was wir hier tun, habe ich gerade alles absolut positioniert, so dass sie sich alle unabhängig bewegen können und kein anderes Element beeinflussen können. Dann nur ein bisschen weiter unten in der CSS, können Sie hier sehen, wir haben eine Standard-Transformation für diese anfängliche Art von Star Wars-Steuer, nur um es aufzugeben verdrehte Perspektive. Mit ein paar Transformationen drehten sie sie und übersetzten sie sie. Comic von irgendwelchen anderen Wörtern, die sich darauf reimen. Das ist es, was wir damit machen. Und dann haben wir auch hier, Sie können sehen, wie sich schwarze Löcher drehen, wenn wir auf das schwarze Loch kommen. Sie werden sehen, wenn wir das Schwarze Loch abstellen, dreht es sich um. Und ich benutze hier nur eine CSS-Animation, um das zu tun, anstatt es in JavaScript zu tun. Nur um Ihnen zu zeigen, können Sie diese beiden Dinge ganz glücklich miteinander kombinieren. Wenn es um das JavaScript geht. Eine Menge von diesem Zeug werden Sie bereits in den vorherigen Videos in Bezug auf die grundlegende Einrichtung dieser Datei gesehen haben, wir weisen alle unsere Schaltflächen auf Konzerte zu. Und wir haben einige Klick-Listener los, auf der nächsten und vorherigen. Wir haben eine auf den Poren, zu denen wir in einem späteren Video kommen werden und, und auch auf dem Blackhole-Knopf. Alles, was wir haben alle Elemente auf der Seite für die grafischen Assets, die wir im DOM bezogen haben stecken. Sie sind alle hier nur referenziert. Und dann sind wir auf die Variablen, die wir im vorherigen Video für unsere nächste und vorherige Funktionalität eingerichtet haben. So können wir durch diese, diese Sequenzen von Animationen auch in den wenigen Videos bewegen . Wenn Sie sich erinnern, haben wir uns das Refactoring dieses Codes angesehen, so dass unsere Keyframes und Keyframe-Timings in separaten Wissenschaftlern, separaten Variablen oder Konstanten in diesem Fall waren . Also hier ist ein Haufen unserer Schlüsselbilder und dir keine Sorgen um die vorerst. Die Timings hier bieten jede der Szenen und ich werde erklären, warum wir das hier gemacht haben, während wir im nächsten Video weitermachen. Oder Animationen für die verschiedenen Szenen werden alle in dieser Single- und M-Funktion behandelt, die ich zu faul war, um Animation auszuschreiben. Ich wollte nicht, dass es mit animate verwechselt wird , die offensichtlich eine tatsächliche Methode für die API waren. Feinde, in denen all die Magie geschieht. Und abgesehen davon haben wir eine verarbeitete Richtungsklick-Funktion, die wir vorher durchgemacht haben. Darum brauchen wir uns keine Sorgen zu machen. Toggle Play back ist, was wir verwenden, um eine Wiedergabe und Pause zu machen. Und dazu kommen wir in Kürze. Und dann werde ich wieder Black-Hole-Funktion, was weiter kommen wird. In Bezug auf unsere JavaScript-Datei. Wir verweisen nur auf unsere Kontrollen. Wir verdrahten die Steuerelemente an Funktionen, die wir fliegen, um das zu tun, was wir brauchen. Wir machen auch Verweise auf jedes der grafischen Elemente, die wir vielleicht animieren möchten. Und dann im Prinzip, Wir haben eine Bootload von verschiedenen Keyframes Konstanten zugewiesen. Und dann haben wir eine Funktion, Hauptfunktion, die beginnen wird, diese Elemente zu animieren. Und das ist es, was wir jetzt endlich haben und wir werden uns im nächsten Video ansehen. 15. Schreiben der Animationen: Angenommen, Sie haben nicht mit diesem speziellen Video begonnen, werden Sie wissen, was wir hier auf der linken Seite des Bildschirms sehen. Dies sind viele verschiedene Keyframe-Animationen. Die Abdeckung aller möglichen Animationsbits wird die verschiedenen Keyframes, die ich auf verschiedenen Elementen ausführen muss, um diesen Satz von Animationen zum Laufen zu bringen. Oder scrollen genug besteuert sind felsige fliegen quer mit den Planeten, bewegen sich leicht hinein. Die kleine Titelsache kommt, die WIP bewegt sich über. Das. Warum verengt sich dort unten, dass die Rakete kommt und über den Mars, bewegt sich über die Spur der Rakete, Booster, Abschalten und alittle Alien auftauchen als auch. Jeder von ihnen wird von diesen verschiedenen Sätzen von Schlüsselbildern hier abgedeckt. Also habe ich versucht, sie etwas vernünftig zu benennen. Aber das Wichtigste hier ist zu sagen, dass es keine gibt, es gibt keine magische Fähigkeit, die man lernen kann, diese richtig zu machen. Es ist nur viel Zeit, Versuch und Irrtum, die Dinge so zu arbeiten, wie Sie wollen, dass sie funktionieren. Das einzige, was wir bisher nicht angeschaut haben, Es lohnt sich zu rufen, ist, wie Sie unten diese Keyframes sind, Sie werden gelegentlich hier versetzt sehen. Nun, was Offset tut, ist es, dass Sie das Äquivalent von Prozentsätzen in CSS-Animationen machen können. Und CSS Animation. Wir könnten sagen, dass nein, wir tun dies 50%, wir tun dies bei einem 100%, Wir tun dies. Das könnte genauso leicht 73 sein, tut mir leid, nicht 730, 73%. Und das ist offensichtlich das, was Sie an diesem bestimmten Punkt tun , wenn die Keyframes durchlaufen. Und es, wenn es fünf Sekunden lang ist, wird es an einem bestimmten Punkt sein. Und wenn die Animation zehn Sekunden lang ausgeführt wurde, wäre es bei 73% von zehn Sekunden. Sie können also dasselbe mit der Web Animations API mit diesem Offset-Schlüsselwort in nass machen , Sie können sehen, dass es keine Zeichenfolge ist, es ist eine Ganzzahl und es liegt zwischen null und eins, wobei eine 100% -Note 0% ist. Also 0,2 ist bei 20%. So einfach ist es, wenn Sie Keyframes, und entscheidend sind es die Keyframes, mit denen Sie es übergeben, nicht die Timing-Optionen. Sie werden sehen, dass hier drinnen gepunktet ist, aber das ist im Wesentlichen, was es ist. Hier gibt es nichts, was Sie noch nicht gesehen haben, ist, dass wir ein paar Beispiele durchlaufen werden. So grausame Text-Angebote oder Stowes Text. Und Sie können hier sehen, da fangen wir an. Und dann benutzen wir einfach das Translate Y, um Feng in die Ferne zu schaufeln. Die meisten von ihnen haben nur zwei Keyframes, ist eine Art Start- und Endpunkt. Es gibt ein paar, die mehr wie diese haben, die wir uns hier im Großen und Ganzen angesehen haben, obwohl sie aussehen, lassen Sie uns ein bisschen mehr Platz hier. Obwohl sie aussehen, kann es zunächst ein wenig einschüchternd erscheinen, aber es gibt nichts, was Sie in CSS nicht gewohnt sind, wenn Sie überhaupt keine CSS-Animationen gemacht haben. Es sind nur eine Menge von ihnen. Einmal die Gesamtsumme von allem, was vor sich geht. Auch dieses Muster, Sie sollten verwendet werden, um eckige Klammern für die Array-Keyframes, Komma getrennt oder ein Objekt jeweils. Also, hier geht's. Quadratische Klammern als unser Objekt für den ersten Keyframe und als zweiten Keyframe. Und Sie können sehen, obwohl diese an verschiedenen Stellen unterschiedlich geschrieben sind, ist es genau das gleiche Muster. Wenn du das jetzt machst, hast du ein paar Lektionen gemacht, Mark. Ich glaube, du hast das jetzt. In der nächsten Lektion werden wir uns also ansehen, wie wir diese Keyframes tatsächlich zusammen ausführen und tatsächlich die Animationen erstellen. 16. Animationen sequenzieren: Letztes Video, das wir in die Dicke aller Haupt-JavaScript-Datei bekommen, die alle diese Animationen für unser Projekt, das wir zusammen bauen, läuft. Wir schauen durch diese Schlüsselbilder und wir können sehen, dass sie es sind, während es eine Menge von ihnen gibt. Und es kann auf den ersten Blick verwirrend erscheinen. Es ist das gleiche grundlegende Muster, das wir haben, wir haben ein paar Mal verwendet und ist im Wesentlichen das gleiche wie das, was Sie mit CSS machen würden. Darüber hinaus wollen wir nun unsere Haupt-Animationsfunktion betrachten. Und wenn Sie sich erinnern, funktioniert dieses kleine Projekt von uns mit einem einfachen Zähler, der durch die Szenen geht, die wir laufen wollen. Und auf der Grundlage von denen bestimmte Anzahl Ohno-Szene waren, die wir auf waren, um eine Reihe von diesen Animationen und Keyframes zu R1 zu sequenzieren. C1 ist effektiv das, was hier passiert. Der Text des Stowes geht ab. Eine Rakete bewegt sich hinüber, aber ein Text kommt rein und diese Planeten bewegen sich leise. Das erste, was Sie hier im C1-Abschnitt sehen werden, ist, dass ich hier tatsächlich auf Schiff Sachen zurücksetze. Der Grund, der hier gemacht wird, ist, dass Sie möglicherweise wieder in Szene für Szene eins von s2 kommen. Und wenn das der Fall ist, müssen wir dafür sorgen, indem wir alle Teile, die wir brauchen, wieder an der richtigen Stelle mischen . Jetzt können Sie hier mit all diesen Willen sehen, diese, die zurückgesetzt werden, die Dauer ist auf 0 gesetzt, so dass Sie die Animation nicht wirklich sehen. Es ist nur eine schnelle Möglichkeit, alles dorthin zu bringen, wo es bereit sein muss, um die Animation richtig auszuführen. Diese animierte Funktion macht alles, was Sie schon viele Male gesehen haben. Jetzt wählen wir das Element aus. Wir führen die animierte Methode darauf aus. Und dann übergeben wir es in unseren Keyframes, die, wissen Sie, scrollen, Text aus oder verblassen. Also, das bezieht sich auf unsere Keyframes erscheinen. Und dann übergeben wir unsere Animationsoptionen oder Timing-Funktionen oder Dauern und Dinge wie diese. Und in diesem Fall sagen all diese, mit 0 Dauer laufen, nur um sie wieder auf normal zurückzusetzen. Also fängt das interessante Zeug ein bisschen weiter hier unten an. Und Sie können hier den grausamen Textil Stowes Text sehen. Wir beginnen damit, drei Sekunden lang hochzufahren. Der Füllmodus ist vorwärts, sodass die Stile beibehalten werden, wenn sie ausgeschaltet werden. Und dann interessanterweise können Sie hier sehen, dass das nächste, was wir bekommen, am Anfang erinnern, als ich versuchte, Ihnen die Idee zu verkaufen, dieses Zeug zu lernen. Eine Sache, die Sie mit einer JavaScript-API tun könnten, die Sie mit den CSS-Animationen nicht tun können. Als Sequenzierung. Sie können eine Animation der Rückseite einer anderen Animation ausführen. Und wir tun das mit der JavaScript Web Animations API, indem wir eine ziemlich neue Ergänzung der Sprache verwenden, was Versprechen ist. Und was Versprechen tun ist, sie lassen uns sagen, fertig, was im Grunde so ist, wenn dieses Ding fertig ist, dann gehen Sie und tun Sie diese andere Sache. Jetzt im nächsten Video werde ich kämpfen und versuchen, dir eine Laien Version zu geben wie Versprechen funktionieren und warum sie so wichtig sind für das, was wir hier tun. Aber für jetzt, betrachten Sie nur einige der anderen Dinge, die hier in JavaScript möglich sind , die mit CSS nicht möglich oder nicht so einfach sind. Sie können auf einigen dieser Animationen sehen, die in Bezug auf die Dauer ausgeführt werden, sind wir in der Lage, C1 Dauer geteilt durch einen bestimmten Betrag zu sagen. Und das ist nicht nur, um Coyle clever zu sein. Denn wenn wir uns entscheiden, die C1-Dauer auf zehn Sekunden oder 15 Sekunden zu ändern, müssen wir nicht in unsere Animation und in Echtzeit alles zurückkommen. Die Tatsache, dass dies alles auf diesem Anfangswert basiert , bedeutet, dass wir uns keine Sorgen darüber machen müssen. Sie können hier sehen, dass wir sagen, wenn das Ding fertig ist, Realitäts-Sache, wenn das Ding fertig ist, Unrecht Sache. Und weiter und weiter geht es. Und Sie können hier am Ende sehen wir mit dem fertigen nicht eine weitere Animation laufen war eigentlich nur etwas in der Kuppel ändern. Obwohl ich schätzen kann, wenn Sie es nicht gewohnt sind, Animation in JavaScript zu schreiben, könnte dies ziemlich kompliziert erscheinen, ziemlich einschüchternd Buch wuchs den Code auf. Nehmen Sie sich Zeit und schauen Sie sich durch und Sie werden sehen, dass es tatsächlich nur eine ganze Menge Dinge ist, die Sie bereits wissen, wie zu tun. Mit allem, was gesagt wird, möchte ich betonen, wie wichtig und nützlich diese Idee der Verkettung der Animationen diese Versprechen verwendet, die Teil der Web Animations API sind. Im nächsten Video werden wir über Versprechungen im Allgemeinen sprechen und warum das für uns so nützlich ist. 17. Anrufe und Versprechungen Grundlegende Erklärer: Wenn Sie sich dieses Video ansehen und Sie wissen, was JavaScript verspricht, oder ein für Sie das falsche Video. Gehen Sie auf die nächste. Für alle anderen. Ich werde versuchen, auf die einfachste Art und Weise zu erklären, welche Versprechen in JavaScript sind. Jetzt lassen Sie mich klarstellen. Dies wird mir nicht einen Ort gewinnen, an dem Google, Ich bin hier interessiert, nicht an technischer Genauigkeit, sondern nur die Grundlagen des Konzepts der Versprechen zu vermitteln. In JavaScript. Normalerweise geht der Parser Zeile für Zeile nach unten und führt jede Codezeile in der JavaScript-Datei aus. Was es standardmäßig nicht tut, ist zu wissen, auf etwas zu warten. So würde es zum Beispiel „Ausrichten“ drücken. Du wirst sagen, geh und hol mir einen kleinen Text aus dem Internet. Es wartet normalerweise nicht darauf, dass dieses Stück Text zurückkehrt, bevor es zur nächsten Zeile geht, noch sollte es, wo wir etwas sehr, sehr langsames JavaScript in der Wildnis haben würden . Zuvor haben wir dieses Problem jedoch mit etwas namens Callbacks umgehen. Eine Callback-Funktion ist einfach der Begriff, den wir verwenden, um zu beschreiben, wenn Sie eine Funktion als Argument an eine andere Funktion übergeben, die dann innerhalb der Autorenfunktion ausgeführt wird. Und du würdest ein Muster sehen, bei dem etwas reinkommen wird. Sie sind, es wird ein bisschen Code geben und dann würden Sie Ihren Rückruf hier bekommen. Und das hätte den Namen, den er haben muss. Dies wird nach diesem ersten Bit laufen. So haben Sie vielleicht Optionen in ihrer, Angie würde gehen, Hier ist mein Hauptfunktionskörper. Und Sie tun alles, was Sie in Ihrer Funktion tun mussten, indem Sie die Optionen verwenden, die übergeben wurden. Und dann, wenn alles getan worden war, würdest du so etwas tun, um zu rennen. Die zweite Funktion, die Sie übergeben, wenn Sie sie aufrufen. Das hat gut genug geklappt. Obwohl es mit Code endet, welche Art von Mantel die Pyramide des Untergangs, wo es dreieckig, tiefer, dreieckig, wirklich verfolgen wird . Es geht über die Seite. Wir können jetzt besser als das mit Versprechen in JavaScript, wir können uns alle mit der Tatsache identifizieren, dass wir Versprechen an Menschen gemacht haben. Manchmal sind diese Versprechen erfüllt und manchmal sind sie es nicht. Und sie funktionieren in JavaScript genau gleich. In einem Versprechen können Sie etwas darstellen, das erfüllt oder nicht abgelehnt werden kann. Warum das für uns mit einer JavaScript-Animations-API interessant ist, weil eines der grundlegenden Dinge, die wir mit Animationen und CSS tun wollen, falsch ist. Eine Animation der Rückseite einer anderen Animation, ohne die mentale Gymnastik zu tun , um herauszufinden, die richtigen Verzögerungen für die Dinge in der Reihenfolge laufen. Und wir nutzen das ausgiebig in unserem kleinen Projekt, um eines zu verwirklichen. Und wenn das erledigt ist, passiert noch etwas und weiter und weiter. Und die Syntax oder alles, was Sie für den Zweck der Verwendung dieser JavaScript-API verstehen müssen , ist dieser fertige Punkt dann Schlüsselwörter, Schlüsselwörter, Syntax. Wenn eine Animation beendet ist, können Sie sie sehen, wenn dieses Leerzeichen nicht unbedingt ist, sondern nur die Art, wie es formatiert wird. Sie würden die Animate-Methode ausführen. Und dann sofort gehen Sie Punkt fertig Punkt dann. Und Sie können hier sehen, wir verwenden eine Pfeilfunktion so dass Sie etwas durch dort passieren könnten, wenn Sie in der Regel setzen wollen, sind Sie nicht. Und dann geben Sie ihm eine Pfeilfunktion. Und dann ist da der Körper des nächsten Dings, das du passieren willst. In diesem Fall scrollt der Text aus, entfernt ein Attribut im DOM, und dann führe ich eine andere Animation aus. Und dann noch einmal, ich habe hier ein Versprechen. Und wenn das hier fertig ist, mache ich das nächste. Mit der JavaScript-Webanimations-API. Sie müssen nicht auf die Komplexität eingehen, in der Regel ob ein Versprechen aussteht oder ob es abgelehnt wird. Dies sind die Arten von Dingen, über die Sie sich Sorgen machen, wenn Sie echte Programmierung machen, wenn Sie möchten, anstatt nur Dinge in der Benutzeroberfläche zu bewegen. Aber dieses Versprechen Konzept ist immer noch sehr nützlich für uns aus diesem Grund. Also die einzigen Dinge, die Sie wirklich von diesem oder jenem nehmen müssen, versprechen tolle Sache in JavaScript, die uns erlaubt, Dinge asynchron zu tun. Und die Syntax für uns, das mit Animationen zu tun und Animationen zu sequenzieren , ist dot finished dot van Klammern, Pfeilfunktion. Das nächste, was du tun willst. Und Sie können diese so viel wie Sie möchten an und an und weiter verketten. Nun, eine andere wirklich tolle Sache an der Web Animations API ist die Tatsache, dass es sehr einfach ist, Animationen zu pausieren und neu zu starten. Und wir werden sehen, wie das geht im nächsten Video. Mit unseren neuen besten Freund-Versprechungen. 18. Animationen stoppen und neu: Eines der großartigen Dinge. Eine weitere tolle Sache an Web Animations API ist, dass es einfach macht , Videos zu pausieren und dann wiederzugeben. Denken Sie daran, direkt am Anfang, als wir unsere Index-Seite erstellt haben, hatten wir eine Schaltfläche, die wir erfinderisch Pools betitelten. Und wir werden uns das jetzt ansehen und sehen, wie das weit offen ist, Sehen Sie, wie es pausiert und spielt die Animation. Also, nur um dir eine Vorstellung davon zu geben, was los ist. So wie unsere Animation abgespielt wird, können wir auf Pause klicken. Und wenn Sie erneut darauf klicken, um die Dinge wieder laufen zu lassen. Und die Art und Weise, die funktioniert, erscheint oben in allen Dateien. Wir haben gerade einen Ereignis-Listener zum Pause-Button hinzugefügt. Und Sie können hier sehen, dass, wenn Sie darauf klicken, wir eine Funktion namens toggle play back ausführen. Ich habe alle anderen Funktionen zusammengebrochen, die nicht relevant sind. Und es ist eine ziemlich kleine Funktion, die wir uns hier ansehen. Also unten unten in unserer Datei hier können Sie sehen, hier ist unsere totale Wiedergabefunktion. Alles, was sie aufbewahren. Es gibt eine Methode, die Teil der Web Animations API ist, die Sie für die Dokumente ausführen, und sie heißt Get-Animationen. Und was es tut, ist, dass es alle Animationen sammelt, die in diesem Dokument ausgeführt werden. Und dann können Sie im Grunde tun, was Sie mit diesen Animationen machen wollen. Sie können die Prophezeiungen dieser Animationen überprüfen und auch Änderungen an diesen Animationen vornehmen. In diesem Fall, was wir hier tun, ist, dass es Ihnen die Punkt-Map-Methode gibt, die Sie normalerweise auf Arrays ausführen können. Aber weil es eine Reihe von diesen Animationen gibt, die Sie kartieren können, was im Grunde bedeutet, wenn Sie nicht wissen, welche Karte ist, ist es, als würde es eine Schleife über eine Reihe von Dingen laufen. Er lässt dich über etwas iterieren. Also in unserem Fall sagen wir, dass wir alle Animationen bekommen und dann wollen wir über sie schleifen. Und Sie können hier sehen, dass ich habe, Ich habe jede der Animation betitelt, Ich habe erfinderisch Animation betitelt. Und was ich tun kann, ist zu sagen, wenn der Wiedergabestatus der Animation läuft, IE eine Animation durchführt, dann möchte ich sie pausieren. Wenn die Animation jedoch bereits angehalten ist, möchte ich sie abspielen. Es ist also nur ein sehr einfacher Umschalter, aber es verwendet diese Methoden, die wir mit dieser API erhalten. Also, um es noch einmal durchzugehen, sagen wir, besorgen Sie mir alle Animationen, die hier sind. Und dann sollten wir über sie abbilden, um über all die Animationen zu iterieren , die wir im Dokument gefunden haben. Wir benennen uns. Jede Instanz dieser Animationen. Du könntest Würste holen, wenn du willst, oder Mantel oder Fenster. Es spielt keine Rolle, ist nur ein Bezeichner für, wie wir über sie iterieren. Und dann sage ich, wenn diese spezielle Animation einen Spielzustand von Rodin hat, können Sie es sehen. Dies ist eine Zeichenfolge und ich benutze Gleichheit hier, um zu sagen, dass das im Grunde drei Gleichheitszeichen sind. Wenn wir rennen, pausieren Sie es. Also wieder, es ist dieser Punkt Poren Klammern ruft diese Funktion, pausiert sie. Andernfalls, wenn die Animation selbst bereits angehalten wurde, dann möchten wir, dass sie abgespielt wird. Und es ist wirklich so einfach wie das. Damit kannst du alles sammeln. Animationen weise, ob es in CSS geschrieben wurde, JavaScript, und dann pausieren Sie es Platte. Und es gibt auch andere Methoden, die wir zur Verfügung haben, wie Dot Council, Dot Finish. Und wir werden die Gelegenheit im nächsten Video nutzen, wir werden versuchen, das neu zu gestalten, was wir haben, in der Minute, in der das Endergebnis genau gleich oder sehr nahe sein wird. Aber was ich tun möchte, ist, zu schauen, was passieren würde, wenn wir den Code, den wir haben, umgestaltet und versucht haben, mehr zu verwenden, um die Animationen Variablen zuzuweisen und diese auszuführen , und was sind die Dinge, auf die wir verzichten könnten, nicht geben uns alle Volkswirtschaften, die Dinge auf eine andere Art und Weise schreiben. Also machen wir das im nächsten Video. 19. Den Code überfüllen: Im letzten Video haben wir uns gezeigt, wie wir alle Animationen, die zu jeder Zeit im Dokument auftreten, leicht pausieren und abspielen können. Und als Folge davon haben wir uns Methoden der API wie Poren und Punktspiel angesehen. Und auch erwähnt, es gab Dinge wie Punktausstattung und Punktabbruch. Und das hat mich zum Nachdenken gebracht, ich frage mich, wie diese Datei aussehen würde, wenn wir sie umstrukturiert haben, um sie mehr rund zu verwenden oder die Funktionen mit Variablen einzurichten. Das könnte also mit Punktspiel und Punktporen und Punkt umgekehrt aufgerufen werden, anstatt der Art deklarativer Weg, den wir bisher getan haben. Also werden wir die nächsten paar Stunden in eine sehr schnelle und zeitraffer komprimieren, wenn Sie möchten, dass ich diesen Code umarbeite. Und dann untersuchen wir, was ich im Wohnheim habe, und wir werden sehen, ob es irgendwelche Vorteile gibt, das zu tun und was die Kompromisse sind, der Rest davon. So sehen wir uns in etwa 40 Sekunden in Echtzeit, ein paar Stunden für mich. Ich habe all diese Animationen und es wird wahrscheinlich mehr geben, dass ich nur die gleiche aktuelle Zeit gleich 0 und Poren laufen muss und so weiter. Ich habe mehr Sinn, wenn ich diese Bit-Funktionalität nur irgendwie abstrakt in eine Funktion aussehe. Also werde ich Funktion zurücksetzen und Animationen machen. Und das wird eine Reihe von Animationen, Animationen für jeden nehmen . Und ich werde diese einfach durchlaufen. Grundsätzlich haben wir Animation, sagen wir Animationspunkt aktuelle Zeit gleich 0 und Animation nicht. Und dann sollte ich hier in der Lage sein, einfach VSAT Animationen zu machen. Und dann werde ich in dieser Reihe von all den Dingen, die ich es auf sich selbst ausführen will, übergeben , die in Stowes Text aus und M Phase Verkehrsplanung auf ihn. Weil verblassen und ausweichen. Meine Tafel. Intro. Okay, eine andere Sache sollte genauso funktionieren. Ich muss dir von den liebsten Heißesten in zwei oder drei Stunden erzählen. Vergleichen wir jetzt die beiden Dateien. Das hatten wir also vorher. Und dann werden wir es mit diesem vergleichen, das ist diejenige, die umgestaltet wurde. Das meiste Zeug oben ist genau das Gleiche. Sie können sehen, wie wir Dinge wie die Keyframes betrachten ich gerade am großen hinzugefügt habe, am Anfang. Nur damit ich nicht verwechselt werde zwischen dem, was eine Funktion für die gesamte Animation ist und was nur die Keyframes sind. Nichts wird dort materiell verändert, nur, nur leicht umbenannt. Wo es ein bisschen anders wird, ist, wenn Sie vorbei an der, die Timing-Dauer hier, Sie können sehen, gut eigentlich werde ich nur überspringen, dies eine Minute. Wenn Sie jetzt auf unsere Anime-funktionale Haupt-Animate-Funktion kommen, sieht es im Vergleich zu unserer Hauptfunktion ganz anders aus wie zuvor. Sie können sehen, dass vorher, dass wir Dinge wie diese zurückgesetzt haben. Und dann beschreiben wir jeden genau dort in der Funktion. Und dann werden wir weiter mit unseren Versprechen fortfahren, die nächste Animation zu sequenzieren, die etwas anders aussieht. Nun, was, was wir getan haben, ist genommen, etwas wie Wischer animieren das. Und ich habe das in so etwas eingewickelt. Also dieses Bit hier ist im Wesentlichen das, was Sie bekommen. Die. Und dann, was ich tue, ist, dass ich es mit einem Namen zuweise , damit ich mit Punktspiel rufen kann oder ich es mit Punktporen stoppen kann. So weiter unten können Sie sehen, dass die eigentliche Animationsfunktion selbst viel knapper ist, weil wir nur Dinge wie dieses Ding spielen, wenn nichts fertig ist. Roma-Animation als Rona Animation und dann führen Sie diese Animation. Und obwohl das schön und kompakt ist, habe ich das wirklich schwieriger gefunden, zu durchdenken und darüber nachzudenken. Es erhält im Wesentlichen das gleiche Ergebnis. Es gibt noch ein paar kleine Stücke und Stücke hier, wo ich, ich glaube nicht, dass es ganz so gut funktioniert, aber es war genug von einem Refactor, um mir klar zu machen, dass ich es tatsächlich auf originelle Weise bevorzuge. Was hier jedoch wichtig ist, ist, dass es eine Reihe von Möglichkeiten gibt, wie Sie diese Dinge schreiben können, um sehr ähnliche Ergebnisse zu erzielen. Es hängt wirklich nur von Ihrem Anwendungsfall und Ihren Vorlieben ab. Aber Sie können hier amüsante Dinge sehen, die Sie, die wir noch nicht gesehen haben. Es gibt Möglichkeiten, eine Animation umzukehren, bei der Sie den Punkt rückwärts verwenden können, aber das kehrt immer die Richtung um, die gerade ausgeführt wird. Während eine Wiedergabegeschwindigkeit von eins immer vorwärts ist und eine Wiedergabegeschwindigkeit von minus1, die wir hier einige Plätze bekommen haben, immer umgekehrt ist. Also habe ich das von Zeit zu Zeit. Abbrechen, wo wir diese Punkt-Cancel-Methode haben. Was die Dot Cancel Methode Türen ist im Grunde beendet diese Animation und zu Fuß. Es ist, es ist tot. Da ist nichts mehr von dem Ding übrig. Dot Finish, Schiebt und Animation auf ihren Endpunkt, treibt die Animation sofort zum Endpunkt voran. So können Sie sehen, dass so etwas wie eine Szene drei, sehr, sehr kompakt auf diese Weise. Und wir verwenden diese aktuelle Animationsfunktion um einfach alles zu durchlaufen, was wir wollen, um es wieder an den Anfang zu setzen. Wenn Sie also vergleichen, drei zu sehen, so hatten wir es vorher. Das. Dann ist es hier. In Totalität, Gesamtheit, insgesamt. Diese Art, es zu tun. Während dies jedoch kompakt aussieht, alle Teile und weisen sie Konstanten oder Variablen zu, sobald Sie die Tatsache berücksichtigen, dass Sie alle diese Teile neu schreiben erscheinenalle Teile und weisen sie Konstanten oder Variablen zu, sobald Sie die Tatsache berücksichtigen, dass Sie alle diese Teile neu schreibenmüssen. Die tatsächliche Gesamtgröße der neu gestalteten Datei beträgt etwa 565 Zeilen. Und das Original kam in etwa 459. Also ist es in mancher Hinsicht eher langwindig, aber vielleicht ist es besser, dies in den Akten zu lassen , damit Sie einen Blick durch meine Präferenz haben, so wie wir es ursprünglich gemacht haben. Aber dieser Weg ist gleichermaßen gültig, wenn das Ihre Präferenz ist. Jetzt waren wir auf diesem kleinen Refactoring-Exkursion. Wir gehen zurück und verwenden den ursprünglichen Code, den Code, den wir uns die ganze Zeit angesehen haben. Und als nächstes werden wir uns ansehen, wie Sie eine Transformation inspizieren können, etwas, das früher etwas namens Matrix verwenden musste, um die Werte aus einer CSS-Transformation herauszuholen. Und es gibt etwas, das wir jetzt mit der API tun können, mit der wir Dinge an anderer Stelle auf der Seite abholen können, sind bereits transformiert und verschieben Sie sie an einen neuen Ort. Also schauen wir uns das im nächsten Video an. 20. Keine Matrix: Keine Matrix mehr. Nun, das ist nicht zu sagen, dass Sie nicht weiter überbewertet Keanu Reeves Filme aus den neunziger Jahren sehen können. Was wir jedoch tun können, ist aufhören, die CSS-Matrix zu verwenden , um herauszufinden, was mit der Transformation los ist. Wenn Sie keine Ahnung haben, wovon ich spreche, Betrachten Sie die bestehende Situation mit CSS-Animationen wo Sie eine Transformation zu einem Element setzen und basierend auf seiner aktuellen Position, möchten Sie das mit JavaScript lesen, erhalten die Koordinaten, wo es sich im Moment befindet, und verschieben Sie es oder ändern Sie es irgendwie. Mit JavaScript. Historisch gesehen mussten wir die Matrix-Eigenschaft verwenden. Jetzt ist die Matrix-Eigenschaft, was der Browser alle verschiedenen Transformationen zusammenfügt, die Sie auf ein Element in eine furchterregende Syntax gesetzt haben . Also gibt es ein Werkzeugfahrzeug, es ist wütend tools.com, CSS, gestrichelte Generator Schrägstrich Transformation. Und das lässt uns schöne, einfache UI gehen. Sie können hier einfach ein bisschen von ein paar verschiedenen Transformationen zu einem Element hinzufügen. Und jetzt ist es wichtig zu beachten, was erzeugt wird. Hier unten. Hier können Sie die Händlerpräfixe ignorieren, die zum Betrachten dieser obersten Zeile verwendet werden. Dies ist der Matrixwert gibt es das Ergebnis all dieser anderen separaten Transformationen. Und er ist ein prägnanter Weg des Browsers, der genau kommuniziert, wie es funktioniert, was zu suchen. Wenn Sie jedoch dazu kommen, das in JavaScript zu lesen, ist es sehr schwierig zu versuchen, herauszufinden, welche Bits die Rotation, welche Bits die, die X-Transformation, die die Skalierung bittet, darstellt. Die gute Nachricht ist, mit Web Animations API, können Sie diese Arten von Gewinnprozess vereinfachen, indem Sie einfach Get Computed Style verwenden. Sie können die Lektion an die Web Animations API übergeben und diese als Ausgangspunkt für eine andere Animation verwenden. Wir werden das verwenden, wenn wir uns ansehen, wie wir alle Black-Hole-Funktion machen. Wenn du das im nächsten Video machst. 21. Neue Animationen: Dies ist möglicherweise ein wenig in das Unkraut gehen, aber ich wollte Ihnen zeigen, was möglich ist, wenn Sie mit JavaScript animieren, anstatt mit CSS zu animieren, wenn Sie das gewohnt sind. Also in unserem kleinen Animationsprojekt, können Sie sehen, dass, wenn wir nächste von vorne klicken, zahlen jede, diese schwarze Loch-Taste leuchtet für uns zu verwenden. Jetzt werde ich das einfach noch einmal auffrischen. Ich zeige dir, was passiert, wenn wir das drücken. Also das schwarze Loch Licht Seife, Ich klicke auf schwarzes Loch, ein schwarzes Loch erscheint und es saugt viele der Elemente, die auf der Seite in sie sind. Nun, wie das erreicht wird, ist wie folgt. Wir haben unseren schwarzen Lochknopf verdrahtet, um Blackloch-Funktion zu schaffen , was das ist, was wir jetzt betrachten werden. Notieren Sie sich also das Ende der Projektdatei, die letzte Projektdatei. Sie können hier sehen, diese Kiste Black Loch-Funktion. Nun, ich werde zuerst die Art der Setup-Stücke dieser Funktion durchgehen. Auch wenn sie nicht wirklich mit der Web Animations API zu tun haben, nur damit Sie verstehen, was los ist. Zunächst einmal sagen wir nur, dass wir einen Boolean haben, den wir schwarzes Loch aktiv saßen, das auf wahr gesetzt ist, wenn das schwarze Loch aktiviert ist. Wenn das bereits aktiviert ist, wollen wir es nicht erneut starten. Also, wenn die schwarzen Löcher bereits eingehen oder der aktuelle Index e nicht ungesehen würde, dann kehren wir im Grunde einfach die Funktion zurück, die wir dort machen, eine frühe Rückkehr. Dann, was wir tun, ist für all diese anderen Boxen, für nächste, vorherige und Pause. Wenn die schwarzen Löcher laufen, wollen wir pausieren. Es gab nur so einige werden Chaos etwas auf und stoppen die Animationen traf Fluss, so etwas. Dann, was wir tun, ist, dass wir den Canvas-Bereich entweder durch die Art des Szenenbereichs bekommen . Und wir bekommen die Klienten-Rechteck-Box. Es gibt uns also alle Geometrieinformationen, die wir benötigen könnten. Wir haben dann eine Funktion Zufallsfloat, die, wenn Sie es ein Minimum und ein Maximum füttern, es wird Ihnen eine zufällige Zahl zwischen diesen beiden Punkten zurück geben. Zufällige Koordinaten sind nur eine weitere kleine Funktion, mit der wir basierend auf unserer Canvas-Größe einen X- und einen Y-Wert generieren können. Wir haben dann dieses Ding namens anwendbare Artikel. Und das ist nur ein Array, das ich in einem der Elemente hinzugefügt habe , die ich glücklich bin, in das schwarze Loch gesaugt zu werden. Das heißt, ich wollte, dass der Rocky weitermacht und nicht in das schwarze Loch gesaugt wird. Indem ich das tue, bedeutet es, dass ich eine gewisse Kontrolle darüber habe, was hineingezogen wird. Wir haben dann eine kleine Funktion, die nur prüft, ob das Element, das derzeit als Teil dieser Liste animiert wird oder nicht. Und dann, was wir tun, ist, dass wir ein div erstellen und in das DOM mit einer Klasse von Canvas Black Hole anhängen . Und da unten im CSS, können Sie hier sehen, dass wir gerade einige grundlegende Stile für dieses Ding haben. Es ist 50 Pixel x 50 Pixel breit. Wir haben dieses schwarze Loch JPEG, und wir laufen nur eine Standard-CSS-Animation darauf. Und Sie können sehen, dass das ist, was uns diese Art von drehendem schwarzes Loch gibt, irgendwie OK. Also zurück in unserem JavaScript, wird dieses Ding in den Dom hinzugefügt. Wir positionieren dann unser DOM basierend auf den Koordinaten, die oder zufällig von dieser Funktion erzeugt. Und das Minus 25 liegt nur daran, dass der Baco selbst 50 Pixel groß ist. Also wollen wir, dass das Zentrum von dem in beiden Achsen entfernt ist. Jetzt sind wir auf dem Bit, wo wir tatsächlich die Animations-API verwenden. Also denken Sie daran, in dem vorherigen Video, wenn wir auf Pause und spielen, wir verwenden diese document.write Animationen, dot map Schleife über Annette alle Animationen, die derzeit ausgeführt werden. Also zuerst, ich überprüfe, dass, wenn eine der Animationen, die es ruinieren, Teil der Liste der Dinge ist. Ich bin glücklich, etwas mit diesem kleinen zu tun, wenn sie nur überprüft, dass, dann sind wir in die bekommen die Elemente selbst. Wenn wir also die Animationen mit dieser Animations-API durchlaufen, können wir auch Informationen von dort herausbekommen. Also bekomme ich das Toggle-Element hier des Elements, das animiert wird. Und dann wiederum, und ich mache Dinge oder bekomme die Geometrie dieses Artikels, ich bekomme seine Position links, seine Position oben. Und dann setzen Sie einige neue Koordinaten, die die neuen zufälligen Koordinaten abzüglich der vorhandenen Koordinate sind, eine solche Art der Entfernung, die wir bewegen müssen. Und dann für jedes Element, jedes Zielelement. So können Sie wieder sehen, ich vermute, dass das die Animation ist. Und dann gehe ich hoch und finde das Ziel. Also I0 das Element, auf dem die Animation ausgeführt wird. Und dann führe ich eine neue Animation aus, die verwendet, die ich in diesem Fenster übergebe , erhalten berechneten Stil Anan-Element-Transformation. Und das ist im Grunde, wenn wir uns im vorherigen Video über die Matrix angesehen haben. Und in der Vergangenheit müssten Sie diesen Wert in lesen und versuchen zu bestimmen, welche Transformationen derzeit auf ein Element angewendet werden. Wir könnten besser als das mit dieser API tun, weil wir einfach sagen können, gehen Sie und finden Sie mir dieses Element auf der Seite und verwenden Sie seine aktuelle Transformation innerhalb des Keyframes, die er dann bewegt. So können Sie hier sehen, der erste Abschnitt dieses Keyframes ist im Grunde sagen, beginnen Sie von wo Sie sich in der Minute befinden. Und dann übersetzen wir das Element in seine neuen Koordinaten und skalieren es nach unten. Also diese zwei Teile des Schlüsselbilds, die wir hier machen. Hier ist unser neuer Schlüsselrahmen. Wir beginnen von dort, wo es ist, und dann übersetzen wir es von dort in einige neue Koordinaten. Und wo wir mit dem Element mit einer Deckkraft von 0 enden. Es packt es also im Grunde, bewegt es dorthin, wo es hingehen muss und schrumpft es herunter. So gibt es die Art von Aussehen, in ein schwarzes Loch gesaugt zu werden, oder zumindest das ist, was ich wollte. Und das Ding passiert über einen 2.5. und offensichtlich könnte das sein, was du wolltest. Damit haben wir es also zu tun, mit dieser Schwarzloch-Funktion. Schauen wir uns mal an, wie das aussieht. Jetzt haben Sie es erklärt, um das schwarze Loch erscheint, alles wird eingeweicht und die CSS-Animation läuft weiter drehend schwarzes Loch. Okay, nächstes Video, wir werden nur über ein paar kleine Stücke und Stücke reden , die wir bisher nicht wirklich im Detail behandelt haben. Bevor wir zum Ende unserer gemeinsamen Zeit kommen. 22. Stile in die DOM übertragen: Ein letzter kleiner Nugget, den Sie möglicherweise nützlich finden, wenn Sie diese API verwenden. Es gibt eine Methode namens Commit-Stile. Und was Sie tun können, ist, wenn eine Animation zu einem Ende kommt, sie wendet die Effekte dieser Animation als Inline-Stile auf das Element an. Also werde ich Ihnen nur die Wirkung davon zeigen. Jetzt verwenden wir hier die Blackhole-Funktion, die wir uns im vorherigen Video angeschaut haben. Und alles, was ich tun werde, während es über jedes unserer Elemente läuft, die animiert sind. Ich bleibe einfach hier unten drin. Nachdem dieses Element animiert wurde, werde ich Animation sagen. Hoppla, animation.com Stile. Und so jedes Mal, wenn es über eines dieser Dinge schleift, was ich hoffe, ist, dass ich sehen werde, ist Inline-Stile das Endergebnis all dieser Animationen. Also lassen Sie uns das speichern und schauen, was hier passiert. Also lasst uns hier die Dinge in Bewegung setzen. Und dann drücken wir das schwarze Loch. Und dann schauen wir uns mal nach unten. Und Sie können hier sehen, dass die Commit-Stile-Methode die letzte Ruhestätte angewendet hat, wenn Sie möchten, die Ergebnisse von allem, was in der Animation vor sich geht. So viel habe ich gar nicht benutzt. Was wir hier zusammen gebaut haben, aber Sie können es sehr nützlich in dem finden, was Sie verwenden würden, um zu bauen. Das ist also nur eine kurze Vorwarnung über diese Methode und wofür Sie sie verwenden könnten. 23. SCHLUSSBEMERKUNG: Los geht's, mein Freund. Am Ende. Hoffentlich haben Sie jetzt ein besseres Verständnis dafür, wie Sie mit der JavaScript-Webanimations-API Dinge im Web animieren können. Denken Sie daran, dass wir keine Animationen in JavaScript haben , um einige einfache Animationen zu schreiben, die wir normalerweise in CSS tun würden. Zu dann ein Projekt, in dem wir eine ganze Reihe von Animationen nacheinander sequenziert haben. Wir haben Dinge wie das Aufnehmen von Transformationen von einem Ort im DOM berührt, bewegen sich in ihnen anderswo. Lernen, wie man Animationen pausiert und wiedergibt, wie man sie berät und sie direkt an das Ende schiebt. Wenn Sie es geschafft haben, mitzuverfolgen und etwas von Ihrem eigenen oder sogar dieses Produkt selbst zu bauen . Während wir diese Videos durchlaufen haben, solltest du dich sehr stolz auf dich selbst fühlen, wenn du es zum ersten Mal ausprobierst. Wenn du stolperst, Comeback, gib mir eine Auffrischung. Es ist wie alles andere im Internet. Du wirst nur gut darin werden, indem du es praktizierst und es in der Wildnis benutzt. Niemand wählt diese Standardeinstellung sofort aus. Dies ist das erste Video, natürlich, gemacht haben. So wäre es wirklich nützlich, Ihre Kommentare gut, sogar schlecht zu haben. Also bitte finde mich auf Twitter bei Ben ausgefranst. Oder Sie können mich per E-Mail an Kontakt unter Ben frame.com. Und ich würde gerne deine Gedanken hören. Sonst sehe ich dich beim nächsten Mal wieder.