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

Re: animierte Linie

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

Show all headers | View raw

On 21.11.2023 08:36, Jan Novak wrote:
> Hallo,
> 
> ich möchte für mein Hausüberwachung eine Linie zwischen zwei Bildern
> (z.B. Speicher < - > Netzstrom) anzeigen lassen, welche eine Animation
> anzeigt, in welche Richtung der Strom gerade fliesst und dies auch mit
> verschiedenen Farben und Geschwindigkeiten.
> 
> Ich habe das bisher mit "progress-bar" "progress-bar-animated-reverse"
> usw. gemacht, dies gefällt mir aber nicht.
> 
> Mir würde eine Linie gefallen, auf welcher dicke "punkte" lang laufen
> und somit die Richtung symbolisieren.
> 
> Leider habe ich so etwas bisher nirgends gefunden. Gibts da vielleicht
> eine fertige Bibliothek?

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:

  <html>
  <body>
  <svg>
    <rect id="leitung" x="50" y="50" width="250" height="20"/>
    <circle id="strom" cx="60" cy="60" r="8" fill="red">
      <animateTransform id="move"
          attributeName="transform" type="translate"
          from="0" to="230" dur="3s" repeatCount="indefinite"/>
    </circle>
  </svg>
  </body>
  </html>

Die Attribute (Farbe, Geschwindigkeit, etc.) kannst du per Javascript
natürlich auch dynamisch verändern. Und du kannst auch mehrere Punkte
nach Bedarf definieren (oder duplizieren).

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