Erstellen Sie einen reaktionsschnellen CSS -Bewegungspfad? Sicher können wir!

Vor kurzem hat eine Diskussion über die Animation bei Work Slack Channel eine interessante Herausforderung ausgelöst: das Erstellen reaktionsschneller CSS -Bewegungspfade. Dieser Beitrag untersucht die Komplexität und präsentiert eine auf JavaScript-basierte Lösung.

CSS-Bewegungspfade unter Verwendung der offset-path -Eigenschaft ermöglichen die Animationselemente entlang benutzerdefinierter Pfade, die ähnlich wie SVG-Pfade definiert sind. Eine wichtige Einschränkung besteht jedoch darin, dass die Pfadkoordinaten als Pixelwerte behandelt werden, was die Reaktion behindert. Ein für eine bestimmter Größe definierter Pfad wird mit Ansichtsfensterveränderungen nicht anmutig skaliert.

Die offset-distance Eigenschaft steuert die Position eines Elements entlang des Pfades, während offset-rotate seine Rotation verwaltet. Die Animation offset-distance erzeugt den Bewegungseffekt.

Das Kernproblem liegt in der Festpixel-Natur von CSS-Bewegungspfaden. Im Gegensatz zu SVG -Pfaden, die mit der Viewbox skalieren, bleiben CSS -Pfade statisch und erfordert manuelle Anpassungen für verschiedene Ansichtsfenstergrößen. Dies ist für einfache Pfade überschaubar, aber komplexe Pfade, insbesondere die von Vektoreditoren importierten, sind schwer zu warten. Um die Änderung zu veröffentlichen, muss der Pfad aus dem Vektoreditor für jeden Haltepunkt, einen umständlichen Prozess, erneut exportiert werden.

Betrachten Sie einen einfachen Weg:

 .Element {
  -Path: 'M20,20 C20,100 200,0 200,100';
  Offset-Pfad: Pfad (var (-Pfad));
}

Durch Skalierung müssen die Pfadkoordinaten für verschiedene Haltepunkte neu berechnet:

 @media (min-Width: 768px) {
  .Element {
    -Path: 'M40,40 C40,200 400,0 400,200'; // Manuelle Neuberechnung
  }
}

Dies wird exponentiell anspruchsvoller mit komplizierten Pfaden.

Eine JavaScript -Lösung bietet einen eleganteren Ansatz. Während Bibliotheken wie Greensocks MotionPath -Plugin Skalierung für SVG -Pfade anbieten, ist eine allgemeinere Lösung für Pfade außerhalb von SVG -Kontexten erforderlich. Eine benutzerdefinierte Funktion kann die Pfade dynamisch skalieren, dies ist jedoch nicht trivial.

Ein Ansatz der Diagrammbibliothek

Eine Diagrammbibliothek wie D3.JS bietet eine potenzielle Lösung. Es ermöglicht die Erzeugung von Pfadzeichenfolgen von Koordinatensätzen und ermöglicht die kundenspezifische Skalierung und Kurvenanpassungen. Dies erfordert jedoch weiterhin die Umwandlung vorhandener Pfade in Koordinatensätze, was nicht ideal ist.

Ein besserer Ansatz besteht darin, die Pfadzeichenfolge direkt von einem Vektoreditor zu verarbeiten. Nachdem wir das SVG mithilfe eines Tools wie SVGOMG optimiert haben, extrahieren wir die Pfaddaten und die Ansichtbox -Informationen:

<svg height="300" viewbox="0 0 79.375 79.375" width="300" xmlns="http://www.w3.org/2000/svg"><path d="M10.362 18.996s-6.046 21.453 1.47 25.329c10.158 5.238 18.033-21.308 29.039-18.23 13.125 3.672 18.325 36.55 18.325 36.55l12.031-47.544" fill="none" stroke="#000" stroke-width=".265"></path></svg>

Wir interessieren uns für das Attribut d (Pfad) und das Attribut viewBox .

Verbesserte JavaScript -Lösung

Die JavaScript -Funktion nimmt die Pfadzeichenfolge und die Viewbox -Grenzen als Eingabe an. Es konvertiert die Pfadzeichenfolge unter Verwendung der SVGGeometryElement -API, wobei über die Länge des Pfades iteriert wird, um Punkte zu extrahieren. D3.JS -Skalen werden dann verwendet, um eine skalierte Pfadzeichenfolge basierend auf der Containergröße und den Ansichtskastenverhältnissen zu erzeugen. Dies stellt sicher, dass der Pfad sein Seitenverhältnis beibehält, während sie proportional innerhalb des Behälters skaliert. Ein ResizeObserver aktualisiert den Pfad dynamisch, wenn der Container ändert. Die vollständige Funktion ist in der dazugehörigen Demo erhältlich.

Dieser Ansatz ermöglicht die Verwendung von Pfaden direkt von Vektoreditoren ohne manuelle Neuberechnung für verschiedene Haltepunkte und bietet eine robuste und wartbare Lösung für reaktionsschnelle CSS -Bewegungspfade. Ein GitHub -Paket "Mederer" liefert diese Funktionalität. Eine Demo zeigt die Lösung und ermöglicht das Testen mit verschiedenen optimierten SVG -Pfaden.

Das obige ist der detaillierte Inhalt vonErstellen Sie einen reaktionsschnellen CSS -Bewegungspfad? Sicher können wir!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!