Lektionen aus sechzig Tagen der Neuanimation von Zombies mit handcodiertem CSS

Zehn Lektionen, die aus 60 Tagen reiner CSS -Zombie -Animation gezogen wurden

Warnung: Hochenergetische Warnung voraus, eine große Anzahl von Zombies und Parodieninhalten kommen! Dieser Artikel wird einige praktische Tipps teilen, aber die Beispiele beziehen sich fast alle mit Zombies und lustigen Witzen. Bitte mental vorbereitet sein.

Ich werde in der Diskussion zu individuellen Animationen verweisen. Wenn Sie jedoch das gesamte Projekt wissen möchten, besuchen Sie das Untote -Institut, um die 60 -Tage -Animationsserie anzusehen. Das Projekt begann am 1. Juni 2020 und endete am 1. August, was mit dem Veröffentlichungsdatum eines Buches über CSS -Animation, Humor und Zombies zusammenfasst - weil es offensichtlich ist, dass Zombies die Welt zerstören, ohne Ihre Webfähigkeiten zu nutzen, um das Ende der Welt zu stoppen. Nichts kann besser Zombies treffen als dynamische HTML -Elemente!

Ich habe während des gesamten Projekts einige Regeln für mich selbst gemacht:

1. Alle CSS -Code müssen manuell geschrieben werden. (Ich bin nur ein Masochist.)
2. Alle Animationen werden vom Benutzer ausgelöst. (Ich hasse Animationen, die auf halbem Weg sind.)
3. Verwenden Sie JavaScript so wenig wie möglich und verwenden Sie es niemals zur Animation. (Ich habe JavaScript nur einmal in der endgültigen Animation verwendet, das war, das Audio zu beginnen. Ich bin nicht gegen JavaScript, es ist nur so, dass es hier nicht benötigt wird.)

Lektion 1: 80 Tage sind zu lang.

Sagt der Titel nicht "60 Tage"? Ja, aber mein ursprüngliches Ziel war 80 Tage, und als der erste Tag ankam, hatte ich weniger als 20 Animationen bereit, und die durchschnittliche Produktionszeit für jede Animation war 3 Tage lang in Panik und wechselte auf 60 Tage. Dies gab mir 20 weitere Tage der Vorbereitungszeit und reduzierte 20 Animationsarbeiten.

Lektion 1A: 60 Tage sind noch zu lang.

Es ist in der Tat eine Herausforderung, so viel Animation mit begrenzter Zeit, Kreativität und begrenzteren künstlerischen Fähigkeiten zu erreichen. Obwohl ich darüber nachgedacht hatte, 30 Tage zu verkürzen, bin ich froh, dass ich das nicht getan habe. 60 Tage ermöglichten es mir, mich selbst durchzubrechen und ein tieferes Verständnis dafür zu erlangen, wie CSS -Animationen - und CSS selbst - arbeitet. Ich bin auch stolz auf viele der Arbeiten, die ich später abgeschlossen habe, weil sich meine Fähigkeiten verbessert haben, ich muss innovativer sein und genauer darüber nachdenken, wie die Arbeit interessanter wird. Sobald Sie alle einfachen Optionen mehr haben, beginnen die wirklichen Arbeit und die besten Ergebnisse. (Ja, es ist 62 Tage, weil ich am 1. Juni angefangen habe und die endgültige Animation am 1. August beenden wollte. Es fühlt sich ab dem 3. Juni umständlich an.)

Also, echte Lektion 1: Fordern Sie sich heraus .

Lektion 2: Interaktive Animation ist schwer zu produzieren, und reaktionsschnelles Design ist noch schwieriger.

Wenn Sie möchten, dass ein Element über den Bildschirm fliegt und sich mit einem anderen Element verbindet oder die Bewegung eines anderen Elements initiiert, müssen Sie alle Standardeinheiten oder alle flexiblen Einheiten verwenden.

Drei Variablen bestimmen die Zeit und Position eines Animationselements während eines Animationsprozesses: Dauer, Geschwindigkeit und Entfernung. Die Dauer der Animation ist in der animation festgelegt und kann nicht gemäß der Bildschirmgröße geändert werden. Die Animationszeitfunktion bestimmt die Geschwindigkeit; Die Bildschirmgröße kann dies nicht ändern. Wenn die Entfernung mit der Bildschirmgröße variiert, gibt es daher Abweichungen im Timing mit Ausnahme der spezifischen Bildschirmbreite und -höhe.

Schauen Sie sich den Tank an! Führen Sie Animationen auf breiten und schmalen Bildschirmen aus. Obwohl ich es sehr nahe geplant habe, werden Sie, wenn Sie vergleichen, feststellen, dass die Position des Tanks in Bezug auf den Zombie, wenn der letzte Zombie fällt, anders ist.

Um diese Zeitprobleme zu vermeiden, können Sie feste Einheiten und eine größere Zahl verwenden, z. B. 2000 oder 5000 Pixel oder mehr, damit die Animation die Breite (oder Höhe) aller Anzeigen mit Ausnahme des maximalen Displays abdecken kann.

Lektion 3: Wenn Sie reaktionsschnelle Animationen wünschen, geben Sie alles in (eine von ihnen) Ansichtsfenstereinheiten ein.

Eine Kompromisslösung für Einheitenanteile (z. B. Einstellung von Breite und Höhe in Pixeln, aber die Position und Bewegung in Ansichtsfenster) kann zu unvorhersehbaren Ergebnissen führen. Verwenden Sie auch nicht gleichzeitig vw und vh , sondern einen von ihnen; Welches ist die Hauptrichtung. Eine Mischung aus vh und vw -Einheiten macht Ihre Animation "seltsam", was meiner Meinung nach ein professioneller Begriff ist.

Schauen Sie sich zum Beispiel einen hervorragend Zomborrofik an. Es verwendet eine Mischung aus Pixeln, vw und vh -Einheiten. Die Prämisse ist, dass der Super Zombie nach oben fliegt und die "Kamera" folgt. Der Super Zombie trifft einen Felsvorsprung und fällt ab, während sich die Kamera weiter bewegt. Wenn Ihr Bildschirm jedoch hoch genug ist, werden Sie das nicht verstehen.

Dies bedeutet auch, dass Sie vw -Höhe hoch genug setzen müssen, um sicherzustellen, dass die Ninja -Zombies in den meisten Seitenverhältnissen nicht sichtbar sind, wenn Sie etwas brauchen, um von oben zu gehen - wie in niemandem hier, aber uns Menschen -, um sicherzustellen, dass die Ninja -Zombies nicht sichtbar sind.

Lektion 3A: Verwenden Sie Pixeleinheiten für die Bewegung in einem SVG -Element.

Das heißt, das Konvertieren von Elementen in SVG -Elemente sollten keine Ansichtsfenster -Einheiten verwenden. SVG -Tags sind ihr eigenes proportionales Universum. Das SVG "Pixel" wird ein Verhältnis aller anderen SVG -Elemente innerhalb des SVG -Elements beibehalten , während die Ansichtsfenstereinheit dies nicht tut. Verwenden Sie daher Pixeleinheiten im SVG -Element für die Konvertierung, verwenden Sie jedoch Ansichtsfenster an anderer Stelle.

Lektion 4: SVG skaliert zur Laufzeit schlecht.

Für Animationen wie Oops… habe ich das SVG -Bild des Zombies auf das Fünffache des Originals vergrenzt, aber dies verwischte die Kanten. [Wellenfäuste in "skalierbaren" Vektorgrafiken. ]

 /* Originalcode, der die Kanten verwischt*/
.Zombie {
 Transformation: Skala (1);
 Breite: 15 VW;
}

.Toggle-Checkbox: geprüft ~ .Zombie {
 Animation: 5S-Leichtigkeit in der 0S-ReverseShrinkyDink Forwards;
}

@KeyFrames ReverseShrinkyDink {
 0% {
  Transformation: Skala (1);
 }
 100% {
  Transformation: Skala (5);
 }
}

Ich habe gelernt, ihre Größe auf die endgültige Größe zu setzen, die am Ende der Animation wirksam wird, und dann mit der Zoom -Transformation sie zu Beginn der Animation auf die Größe reduzieren.

 /* Modifizierter Code*//
.Zombie {
 Transformation: Skala (0,2);
 Breite: 75 VW;
}

.Toggle-Checkbox: geprüft ~ .Zombie {
 Animation: 5S-Leichtigkeit in der 0S-ReverseShrinkyDink Forwards;
}

@KeyFrames ReverseShrinkyDink {
 0% {
  Transformation: Skala (0,2);
 }
 100% {
  Transformation: Skala (1);
 }
}

Kurz gesagt, der modifizierte Code bewegt sich von einer reduzierten Version des Bildes auf seine volle Breite und Höhe. Der Browser rendert immer bei 1, so dass die Kanten in einer Skala von 1 klar und scharf sind. Anstatt von 1 auf 5 zu skalieren, skalierte ich von 0,2 auf 1.

Lektion 5: Achse sind keine universellen Wahrheiten.

Die Achse eines Elements wird mit sich selbst synchronisiert, nicht mit der Seite. Durch die Durchführung einer 90-Grad-Rotation vor translateX ändert sich die Richtung von translateX von horizontal nach vertikal. In niemandem hier als wir Menschen… 2, umdrehte ich die Zombies mit einer 180 -Grad -Rotation. Ein positiver Y -Wert wird jedoch die Ninjas nach oben bewegen, und ein negativer Wert wird sie auf den Boden bewegen (im Gegensatz zu Normalwert). Beachten Sie, wie sich die Rotation auf nachfolgende Transformationen auswirkt.

Lektionen 6. Komplexe Animationen in konzentrische Elemente zersetzen, um eine einfache Anpassung zu erhalten.

Wenn Sie komplexe Animationen erstellen, die sich in mehrere Richtungen bewegen, das Hinzufügen von Wraping -Divs oder übergeordneten Elementen und Animation jedes Elements separat die Transformationskonflikte verringern und Sie daran hindern, zu stürzen.

Zum Beispiel habe ich im Weltraumkadett drei verschiedene Transformationen. Das erste ist die Auf- und Abbewegung von Astronauten und Zombies. Die zweite ist die horizontale Bewegung. Der dritte ist Rotation. Anstatt zu versuchen, alles in einer Transformation zu tun, fügte ich zwei Wickelelemente hinzu und animierte sie in jedem Element (ich habe auch meine Haare gespeichert ... zumindest ein Teil davon). Dies hilft, das in der vorherige Lektion diskutierte Achseproblem zu vermeiden, als ich mich am innersten Element drehte und so die Achse seiner Eltern- und Großelternelemente beibehalten habe.

Lektion 7: SVG- und CSS -Transformationen sind gleich.

Einige Wege, Gruppen und andere SVG -Elemente haben bereits Transformationen definiert. Dies kann durch Optimierungsalgorithmen verursacht werden, oder es kann genau die Art und Weise sein, wie die Illustrationssoftware Code generiert. Wenn ein Pfad, eine Gruppe oder ein anderes Element in einem SVG bereits eine SVG -Transformation aufweist, löscht das Löschen dieser Transformation das Element, normalerweise mit einer einzigartigen Position oder Größe im Vergleich zu den restlichen Zeichnungen.

Da SVG- und CSS -Transformationen gleich sind, ersetzen Sie jede CSS -Transformation die SVG -Transformation, was bedeutet, dass Ihre CSS -Transformation an dieser singulären Position oder Größe beginnt, nicht die Position oder Größe, die in der SVG eingestellt ist.

Sie können die Transformation aus dem SVG -Element in das CSS kopieren und auf die Startposition im CSS einstellen (aktualisieren Sie sie zuerst auf die CSS -Syntax). Sie können es dann in der CSS -Animation ändern.

Zum Beispiel hat in meinem Office Worker Tribute Work uhhh, ja ... der ultimative Renbergs obere rechte Arm (#ARM2 -Element) im ursprünglichen SVG -Code eine Transformation.

<path d="M0 171h9v9H0z" fill="#91c1a3" fill-rule="nonzero" transform="translate(0 -343) scale(4 3.55)"></path>

Bewegen Sie die Transformation wie folgt in CSS:

<path d="M0 171h9v9H0z" fill="#91c1a3" fill-rule="nonzero"></path>

 #ARM2 {
 Transformation: Translate (0, -343px) Skala (4, 3,55);
}

... Ich kann dann eine Animation erstellen, die die Position und Skalierung nicht versehentlich zurücksetzt:

 .Toggle-Checkbox: Checked ~ .z #Arm2 { 
 Animation: 6S-Leichterung von 0,15S ARM2Move Forwards;
}

@keyframes arm2move {
 0%, 100% {
  Transformation: Translate (0, -343px) Skala (4, 3,55);
 }
 40%, 60% {
  Transformation: Translate (0, -403px) Skala (4, 3,55);
 }
 50% {
  Transformation: Translate (0, -408px) Skala (4, 3,55);
 }
}

Dieser Vorgang ist noch schwieriger, wenn das Tool, das SVG -Code generiert, versucht, die Transformation in eine Matrix zu "vereinfachen". Während Sie Matrix -Transformationen neu erstellen können, indem Sie sie in CSS kopieren, skalieren, rotieren oder genau so schwingen, wie Sie es möchten, ist eine entmutigende Aufgabe.

Alternativ können Sie Übersetzungen, Rotation und Skalierung verwenden, um die Matrix -Transformation nachzubilden. Wenn der Pfad komplex ist, sind die Chancen, dass Sie sie rechtzeitig nachbilden können, ohne sich in Schwierigkeiten zu bringen.

Die letzte und einfachste Option ist die Verwendung einer Gruppe ( ) Tag -Verpackungselemente. Fügen Sie ihm eine Klasse oder eine ID hinzu, um den Zugriff auf CSS zu erreichen, und transformieren Sie die Gruppe selbst, wodurch die Transformationen getrennt werden, wie in der vorherigen Lektion diskutiert.

Lektion 8: Bleiben Sie gesund, wenn Sie einen Teil eines SVG verwandeln

CSS- transform-origin Eigenschaft bewegt den Punkt, an dem die Transformation auftritt. Wenn Sie versuchen, Ihre Arme zu drehen - wie ich es in Clubbin ’It getan habe - sieht Ihre Animation natürlicher aus, wenn Sie Ihre Arme aus der Mitte Ihrer Schulter drehen, aber der natürliche Transformationsursprung dieses Weges befindet sich in der oberen linken Ecke. Verwenden Sie transform-origin , um dies für ein reibungsloseres, natürlicheres Gefühl zu beheben. Sie wissen, dass sehr natürliche Pixelkunst aussehen ...

Beim Zoomen ist es auch nützlich, den Ursprung zu verwandeln, wie ich es in Mustachio -Ups getan habe, oder beim Drehen der Mundbewegung, wie das Kinn eines Dinosauriers in super leckerem. Wenn Sie den Ursprung nicht ändern, verwendet die Transformation den Ursprung in der oberen linken Ecke des SVG -Elements.

Lektion 9: Sprite -Animationen können reaktionsschnell sein

Am Ende habe ich viele Sprite -Animationen für dieses Projekt durchgeführt (d. H. Sie verwenden mehrere inkrementelle Frames und wechseln schnell zwischen ihnen, um den Charakter zu bewegt). Ich habe Bilder in einer breiten Datei erstellt, sie als Hintergrundbilder zu Elementen einer einzelnen Frame-Größe hinzugefügt, das Hintergrundbild mithilfe background-size auf die Breite des Bildes eingestellt und den Überlauf ausblüche. Dann verwende ich background-position und Animationszeitfunktionsschritt step() um das Bild durchzusetzen. Zum Beispiel: postapokalyptische Feierlichkeiten.

Vor dem Projekt habe ich unflexible Bilder verwendet. Ich werde ein wenig skalieren, damit es zumindest einige Reaktionseffekte geben wird, aber ich glaube nicht, dass Sie es zu einer völlig flexiblen Breite machen können. Wenn Sie SVG jedoch als Hintergrundbild verwenden, können Sie Ansichtsfenster verwenden, um Elemente zu skalieren, wenn sich die Bildschirmgröße ändert. Das einzige Problem ist der Hintergrundort. Wenn Sie dafür Ansichtsfenster verwenden, bleibt es synchronisiert. Schauen Sie sich das endlich allein mit meinem Sandwich an….

Lektion 9A: Stellen Sie die Hintergrundgröße des Bildes mit Ansichtsfenster fest, wenn Sie reaktionsschnelle Sprite -Animationen erstellen

Wie ich in diesem Projekt gelernt habe, ist die Verwendung einer einzigen Art von Einheit fast immer machbar. Anfangs habe ich Prozentsätze verwendet, um die Hintergrundgröße des Sprite festzulegen. Die Berechnung ist einfach (100% * (Schritt 1)) und funktioniert in den meisten Fällen gut. Bei längeren Animationen kann eine präzise Frame -Tracking jedoch schief gehen und Teile des falschen Sprite -Rahmens anzeigen. Das Problem wird schlechter, wenn mehr Frames zum Sprite hinzugefügt werden.

Ich bin mir nicht sicher, warum dies das Problem verursacht, aber ich denke, es liegt an dem Rundungsfehler, der über der Sprite -Tabellen -Länge angesammelt ist (die Menge an Verschiebung steigt mit zunehmender Anzahl von Frames).

In meiner endgültigen Animation ist es nicht vorbei, bis der Zombie singt, ich ließ einen Dinosaurier meinen Mund öffnen, um einen Zombie -Viking -Gesang zu enthüllen (obwohl im Hintergrund Laserfeuer und natürlich Tanz, Akkordeon und Zombies aus Kanonen abgefeuert werden). Ja, ich weiß, wie man eine Party veranstaltet ... eine Geek -Party.

Dinosaurier und Wikinger sind eine der längsten Elfenanimationen für das Projekt. Wenn ich jedoch Prozentsätze verwende, um die Hintergrundgröße festzulegen, sind einige Verfolgungsgrößen bei Safari -Fehlern. Am Ende der Animation scheint auf der rechten Seite ein Teil der Dinosauriernase aus verschiedenen Rahmen zu erscheint, während auf der linken Seite ein ähnlicher Teil der Nase fehlt.

Dies ist sehr schwer zu diagnostizieren, da es in Chrome gut funktioniert, und ich denke, ich habe es in Safari repariert und schaue mir nur eine etwas andere Bildschirmgröße an und ich sehe die Rahmenabweichung erneut. Wenn ich jedoch konsistente Einheiten verwende - d. H. vw für background-size , Rahmenbreite und background-position - funktioniert alles einwandfrei. Auch dies hängt davon ab, konsistente Einheiten zu verwenden!

Lektion 10: Laden Sie die Personen ein, am Projekt teilzunehmen.

Obwohl ich dabei viel gelernt habe, verbrachte ich die meiste Zeit damit, die Wand zu treffen (oft bis die Wand gebrochen oder mein Kopf gebrochen ist ... ich kann den Unterschied nicht erkennen). Obwohl dies eine Methode ist, haben Sie, selbst wenn Sie hartnäckig sind, Kopfschmerzen haben. Laden Sie andere ein, an Ihrem Projekt teilzunehmen, unabhängig davon, ob es sich um Ratschläge handelt, auf offensichtliche blinde Stellen hinweist, die Sie verpasst haben, Feedback geben, beim Projekt helfen oder Sie ermutigen, weiterzumachen, wenn Sie der Meinung sind, dass der Umfang zu groß ist.

Lassen Sie mich diese Lektion in die Praxis umsetzen. Was denkst du? Wie werden Sie Zombies mit CSS -Animation blockieren? Welche Projekte werden Sie durchführen, die zu groß sind, um sich selbst herauszufordern?

Das obige ist der detaillierte Inhalt vonLektionen aus sechzig Tagen der Neuanimation von Zombies mit handcodiertem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!