Groups > de.comp.lang.javascript > #5458

Re: animierte Linie

From	Janis Papanagnou <janis_papanagnou+ng@hotmail.com>
Newsgroups	de.comp.lang.javascript
Subject	Re: animierte Linie
Date	2023-11-22 05:49 +0100
Organization	A noiseless patient Spider
Message-ID	<ujk181$178fc$1@dont-email.me> (permalink)
References	<ujhml3$2pbt0$1@gwaiyur.mb-net.net> <ujhviu$pkaj$1@dont-email.me> <ujibc3$2qls6$2@gwaiyur.mb-net.net>

Show all headers | View raw

On 21.11.2023 14:29, Jan Novak wrote:
> Am 21.11.23 um 11:08 schrieb Janis Papanagnou:
>> Solch einfache Animationen, wie du sie beschreibst, würde ich manuell
>> mit SVG formulieren; ist nicht viel Aufwand. Hier ein Beispiel mit nur
>> einem Punkt auf einem Balken:
>>[...]
> 
> Genau sowas suche ich. Mehr brauch ich gar nicht. Leider habe ich es
> nicht hinbekommen, dass die Punkte von links alle 40 Pixel erscheinen
> und rechts verschwinden (also nicht zurück springen)
> Das ist mein erster Ansatz, vielleicht kannst du mir noch nen Tip geben.

Ich bin bei dem Thema leider kein Fachmann; das Beispiel hatte
ich auch nur mal schnell zusammgestellt. Els Tipp: siehe unten.

> [...]
> 
> Der erste Punkt fängt zu spät an und geht über den Balken hinaus.
> Ich hätte gerne fortlaufende Punkte von links nach recht.

Ich hatte bei meinem Beispiel die Koordinaten geeignet angepasst.

Man das könnte sicherlich auch über ein Cropping mittels viewBox
leisten, aber sauberer wäre schon, wenn man die Koordinaten der
Objekte entsprechend konsistent definiert.

Was mir an deinem Code auffält, ist, dass du einen Balken mit
width=200 definiert hast, der zweite deiner beiden circle animates
aber Werte über 200 definiert. Wenn das also dazu führt, dass
Punkte über das rectangle hinauswandern, so wundert es mich nicht.
Gleiches für den Punkt, der bei dir nicht wie das rectangle bei 0
anfängt sondern erst bei 20. :-)

Janis

Back to de.comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar

Thread

animierte Linie Jan Novak <repcom@gmail.com> - 2023-11-21 08:36 +0100
  Re: animierte Linie Janis Papanagnou <janis_papanagnou+ng@hotmail.com> - 2023-11-21 11:08 +0100
    Re: animierte Linie Jan Novak <repcom@gmail.com> - 2023-11-21 14:29 +0100
      Re: animierte Linie Janis Papanagnou <janis_papanagnou+ng@hotmail.com> - 2023-11-22 05:49 +0100
        Re: animierte Linie Jan Novak <repcom@gmail.com> - 2023-11-22 06:58 +0100

csiph-web