Re: animierte Linie

From	Jan Novak <repcom@gmail.com>
Newsgroups	de.comp.lang.javascript
Subject	Re: animierte Linie
Date	2023-11-21 14:29 +0100
Organization	MB-NET.NET for Open-News-Network e.V.
Message-ID	<ujibc3$2qls6$2@gwaiyur.mb-net.net> (permalink)
References	<ujhml3$2pbt0$1@gwaiyur.mb-net.net> <ujhviu$pkaj$1@dont-email.me>

Show all headers | View raw

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:
> 
>    <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>
> 

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.

<svg width="100%" height="100">
     <!-- Weißer Balken -->
     <rect x="0" y="0" width="200" height="10" fill="white" />

     <!-- Animation -->
     <circle cx="20" cy="5" r="5" fill="blue">
       <animate attributeName="cx" values="20; 60; 100; 140; 180" 
dur="4s" keyTimes="0; 0.25; 0.5; 0.75; 1" repeatCount="indefinite" />
     </circle>

     <circle cx="220" cy="5" r="5" fill="blue">
       <animate attributeName="cx" values="220; 260; 300; 340; 380" 
dur="4s" keyTimes="0; 0.25; 0.5; 0.75; 1" repeatCount="indefinite" />
     </circle>
   </svg>

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.

jan

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