Animation mehrerer Objekte auf unterschiedlichen Pfaden
- Grundlagen der Pfadanimation
- Mehrere Pfade parallel nutzen
- Technische Umsetzung mit CSS offset-path
- Beispiel
- Alternative mit JavaScript und SVG
- Fazit
Grundlagen der Pfadanimation
Ja, es ist definitiv möglich, mehrere Objekte gleichzeitig auf unterschiedlichen Pfaden zu animieren. Dies lässt sich sowohl mit SVG (Scalable Vector Graphics) als auch mit CSS und JavaScript realisieren. In der Regel dienen Pfade als Animationbasis, entlang derer sich die Objekte bewegen. Jeder Pfad wird dabei separat definiert und die Bewegung der einzelnen Objekte wird synchron oder asynchron darauf abgelegt.
Mehrere Pfade parallel nutzen
In SVG können Sie mehrere <path>-Elemente verwenden, die jeweils unterschiedliche Formen besitzen. Jedem animierten Objekt kann über SMIL, CSS Animationen oder JavaScript eine Bewegung entlang eines bestimmten Pfades zugewiesen werden. Dabei stellt man sicher, dass die animierten Elemente individuell mit den jeweiligen Pfaddaten verknüpft sind. Für CSS gibt es inzwischen die Möglichkeit, das offset-path-Attribut zu verwenden, welches auch mehreren Elementen jeweils eigene Pfade zuweisen kann.
Technische Umsetzung mit CSS offset-path
Mit offset-path lassen sich Elemente entlang eines definierten Pfades animieren. Wenn man mehrere Objekte auf unterschiedlichen Pfaden bewegen möchte, definiert man für jedes Element seinen individuellen offset-path. Die Bewegung wird über das CSS-Attribut offset-distance gesteuert, das mit einer Animation verändert wird (z.B. von 0% auf 100%).
Beispiel
Nachfolgend ein einfaches Beispiel, das zwei Kreise zeigt, die sich gleichzeitig auf unterschiedlichen Pfaden bewegen:
<circle r="10" fill="red" style="offset-path: path(M10 80 C 40 10, 65 10, 95 80); animation: move1 4s linear infinite;" />
<circle r="10" fill="blue" style="offset-path: path(M10 120 Q 52.5 10, 95 120); animation: move2 6s linear infinite;" />
Alternative mit JavaScript und SVG
Eine weitere Möglichkeit besteht darin, mithilfe von JavaScript Objekte auf SVG-Pfaden zu animieren. JavaScript kann jeden Pfadpunkt positionieren und die Position des Objekts entlang des Pfades kontinuierlich berechnen. So kann man beliebig komplexe und synchronisierte Bewegungen erstellen. Insbesondere kann man durch Event-Listener die Animation steuern oder Interaktionen einbauen.
Fazit
Mehrere Objekte gleichzeitig auf unterschiedlichen Pfaden zu animieren ist keine Einschränkung moderner Webtechniken. Ob mit CSS offset-path, SVG mit SMIL-Animationen (eingeschränkte Browserunterstützung) oder mithilfe von JavaScript, sind vielfältige kreative Möglichkeiten vorhanden. Die Wahl der Methode richtet sich nach Anwendungsfall, gewünschter Kompatibilität und Komplexität der Animation.