Hacken

Dieser Artikel befasst sich mit der Manipulation von CSS -Animationen und wird speziell mit den Herausforderungen des Neustarts und Verlangsamens von Animationen ohne Verwendung von JavaScript eingehen. Der Autor erzählt von ihrer Erfahrung auf dem Aufbau eines CSS-Spiels mit Wolfenstein 3D-inspiriertem Spiel, wobei zwei besonders schwierige Animationsprobleme hervorgehoben werden: Auslöser einer Waffenanimation auf feindlichen Klicks und der Umsetzung eines dramatischen Zeitlups für den endgültigen Treffer eines Chefs.

Das Kernproblem dreht sich um den Umgang mit Animationszuständen des Browsers. Einfaches Hinzufügen oder Ändern von Animationseigenschaften, während eine Animation bereits ausgeführt wird, starten oder verlangsamen Sie sie nicht immer wie erwartet.

Problem 1: Animationen wiederholen

Der Autor untersucht mehrere Ansätze zur Wiederholung von Animationen:

• Mehrere Kontrollkästchen (ineffektiv): Die Verwendung separater Kontrollkästchen für jeden Animationsversuch schlägt fehl, da CSS nur die vorhandene Animation fortsetzt und nicht neu gestartet wird.
• Animationsklonen: Erstellen verschiedener Animationsnamen ( spin1 , spin2 ) für jeden Auslöser funktioniert, erfordert jedoch eine sorgfältige CSS -Regelreihenfolge.
• Anhang anhängen: Das Hinzufügen der gleichen Animation in der Eigenschaft animation-name fungiert auch, kann jedoch zu unerwartetem Verhalten mit animation-fill-mode: forwards führen.

Der wichtigste Mitnehmen ist, dass Sie eine CSS -Animation nicht direkt neu starten können. Sie müssen eine neue hinzufügen.

Problem 2: Zeitlupe

Einfaches Ändern animation-duration während eine Animation ausführt, führt zu Jarring-Sprüngen. Der Browser wendet die neue Dauer aus dem Start der Animation an, nicht aus seinem aktuellen Zustand.

Es werden mehrere Ansätze untersucht:

• Direkte Änderung animation-duration (unwirksam): Veränderung animation-duration Mitte der Animation führt zu visuellen Störungen.
• Eine langsamere Animation pausieren und anhängen: Die ursprüngliche Animation pausieren und eine langsamere mit demselben Startpunkt hinzufügen, führt aufgrund des unvorhersehbaren Pausepunkts immer noch zu Sprüngen.
• Verwenden benutzerdefinierter Eigenschaften: Eine komplexere Methode verwendet benutzerdefinierte Eigenschaften ( --angle1 , --angle2 ), um den Fortschritt der Animation zu verfolgen und sich nahtlos zwischen Animationen mit unterschiedlichen Dauern zu wechseln. Dies erfordert jedoch die Browser -Unterstützung für @property .
• Die "Zahnradverschiebung" -Technik: Diese clevere Technik verwendet verschachtelte Divs mit jeweils ihre Animation, um zwischen Animationsgeschwindigkeiten zu wechseln. Es ist animationsspezifisch und verallgemeinert nicht gut.
• JavaScript -Lösungen: JavaScript bietet robustere Lösungen für den Umgang mit Animationsfortschritt und den nahtlosen Übergang zwischen verschiedenen Animationsgeschwindigkeiten und bietet Flexibilität für komplexe Animationen.

Der Artikel schließt mit der Anerkennung der Inspiration von anderen CSS-Projekten und einem umfassenden Überblick über die Herausforderungen und Lösungen, die bei der Manipulation von CSS-Animationen verbunden sind. Der Autor ermutigt die Leser, die angegebenen Beispiele zu erkunden und ihre Gedanken zu teilen.

Das obige ist der detaillierte Inhalt vonHacken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!