Pfadanimation

Skid

Erfahrenes Mitglied
Hallo zusammen,

ich suche nach einer Möglichkeit einen gepunkteten Pfad nach und nach sichtbar zu machen. Falls sich jemand an den Film "Indiana Jones" erinnert: Wenn der Protagonist reist, wird immer eine Landkarte gezeigt auf der ein roter Pfad nach und nach sichtbar wird. Bei mir ist es ähnlich: Ich versuche auf einem Bild einen gepunkteten Pfad nach und nach sichtbar zu machen.

Ich habe es schon mit SVG probiert und habe einen SVG-Pfad über ein Bild gelegt um dort nur diesen Pfad sichtbar zu machen. Das Ergebnis war allerdings eher mangelhaft und nicht zu gebrauchen. Ich hatte auch schon darüber nachgedacht, die einzelnen Punkte nach und nach in deren Transparenz zu ändern, aber da sitze ich wahrscheinlich morgen noch. Über die Animation von stroke-dasharray und stroke-dashoffset erreiche ich nur, dass sich die Punkte selbst auf dem Pfad hin und her bewegen. So soll das eigentlich nicht sein ...

Ich habe eben ein BILD erstellt, um das etwas zu verdeutlichen. Darauf ist ein Pfad (rot; nicht zwingend notwendig, wenn nicht SVG verwendet wird) zusehen, auf dem die einzelnen Punkte (schwarz) nach und nach für jedes Bild (Nummerierung) sichtbar werden. Vielleicht trägt das zur Veranschaulichung bei!

Danke euch!
 
Hi

Ich glaube SVG wäre schon der richtige Weg dafür, allerdings habe ich noch nie was mit SVG gemacht, deshalb kann ich nichts dazu sagen.

Alternativ wäre es vielleicht möglich die "punkte" nach und nach einzublenden? Du hast gesagt sowas hast du schon probiert?
Wenn die Punkte einzeln positioniert werden (Sind es Bilder? Divs?), könntest du ja auch ein Array haben mit den Punkten darin und dann zB mit jQuery eins nach dem anderen einblenden. Sicherlich nicht die schönste Methode, aber relativ einfach.
 
Wie legst Du denn den Pfad fest? Punkt-für-Punkt oder gibt es eine Gleichung dafür? Wenn es Punkt-für-Punkt ist, würde ich die Koordinaten in einem Array ablegen. Neben der Realisierung mit SVG sehe ich dann zwei Möglichkeiten:
  • Du legst die Punkte als HTML-Elemente an, so wie es jeipck schon angedeutet hat. Dann kannst Du sie ganz einfach Punkt für Punkt einblenden.
  • Du zeichnest die Punkte in einem Canvas-Element.
 
Danke für eure Antworten!

Alternativ wäre es vielleicht möglich die "punkte" nach und nach einzublenden? Du hast gesagt sowas hast du schon probiert?

Ja, dass habe ich probiert und funktioniert auch, allerdings kann das ziemlich anstrengend werden, wenn die Anzahl mehr als 20 Punkte ist. ^^
Ich mache mir da auch etwas um die Performance sorgen, denn wenn es zu viele Punkte sind, weiß ich nicht wie einzelne Browser darauf reagieren bei zu vielen Animationen zur selben Zeit! :)

Wie legst Du denn den Pfad fest? Punkt-für-Punkt oder gibt es eine Gleichung dafür? Wenn es Punkt-für-Punkt ist, würde ich die Koordinaten in einem Array ablegen. Neben der Realisierung mit SVG sehe ich dann zwei Möglichkeiten:

Bisher habe ich verschiedene Sachen probiert. Ich habe versucht einen Pfad eines SVG-Elements mit einer animierten Maske zu belegen. Wäre für mich gesehen eigentlich die schönste Methode, nur kann ein Pfad nicht so einfach animiert werden. Als Beispiel: Ich hätte eine gepunktete Linie auf ein Bild gezeichnet und hätte den selben Pfad verwendet für die Animation, welche die gepunktete Linie sichtbar macht durch "nachzeichnen" des Pfads. Funktioniert nur leider nicht, zumindest nicht mit meinem Wissen. (;

  • Du zeichnest die Punkte in einem Canvas-Element.

Danke! Das schaue ich mir gerade mal an. Vielleicht finde ich einen schönen Lösungsweg! :)
 
denn wenn es zu viele Punkte sind, weiß ich nicht wie einzelne Browser darauf reagieren bei zu vielen Animationen zur selben Zeit
Ich hatte dich so verstanden, dass die Punkte einer nach dem anderen eingeblendet werden, dann wäre doch immer nur ein Animation zur gleichen Zeit aktiv?
 
Zurück