Animation läuft nicht flüssig

[maque]

Hallo,

ich habe eine Animation gebaut, die mir den Stromfluss meiner PV-Anlage visualisiert. Je mehr Strom fliesst, um so schneller die Animation. Ich aktualisiere die Daten alle 10 Sekunden. Das Problem ist, dass mit neuen Werten die Animiation anfängt zu springen, wie im Video https://vimeo.com/804920452/7701989d38 dargestellt.

Ich bin im Video kurz auf einen anderen Reiter und zurück gesprungen, und sofort stimmt die Animiation wieder. Jede der Kugeln ist wie folgt konfiguriert:

image.pngimage.png

Die Designs postive und negative unterscheiden sich nur in der Farbe. Hat jemand eine Idee, wie ich das springen in der Animation vermeiden kann?

Danke
Matthias

[vento66]

Wird auch nicht anders werden, immer wenn ein neuer Wert kommt startet die Animation neu. Dabei ist es völlig egal, wo die Kugel vorher war.

[maque]

aber genau das passiert ja eben nicht, oder was mache ich falsch?

[vento66]

Dauer Animation ist 1500/# das wird wohl nicht immer auf 10 Sekunden rauslaufen.

[maque]

ja, aber doch für alle Kugeln gleich, oder? Mit 1500/# will ich erreichen, dass die Animiation schneller läuft, wenn die Wattzahl höher ist z.B bei 1500 eben 1s, bzw. bei 4500 sind es 0,33 Sekunden. Wie mach ich das besser?

[Benjamin7785]

ich habe eine Animation gebaut, die mir den Stromfluss meiner PV-Anlage visualisiert.

Daran habe ich mich auch schon versucht. bei mir sollte die Größe der Kugel in Abhängigkeit des Wertes geändert werden.
Mittels Vorschau im VisuEditor laufen die Animationen in meinem Fall auch deutlich sauberer als dann in der Live Visu. finde das ebenfalls etwas seltsam.

Verstehe zwar, dass die Animation bei jeder Werteänderung neu startet, aber verstehe nicht wieso das in der Vorschau 'flüssiger' läuft als in der live Visu.

Wer hat denn einen smarten Ansatz sowas mittels css animation hinzubekommen???
Oder wer kann einen guten Ansatz geben sowas als Visuelement zu implementieren. hier braucht es ein bisschen Javascript kentnisse, oder? Gibt es eigentlich ein leeres Template mit der mindest STruktur für ein Visuelement oder nimmt man da ein vorhandenes und löscht da den nicht benötigten Kram raus?

Dieses Internet bietet ja schon einige interessante Ansätze, nur bekomme ich das nicht ins EDOMI übersetzt. https://greensock.com/forums/topic/3...comment-157289
1) wo müssen die Ressourcen .js .css etc im filesystem abgelegt werden
2) wie erzeuge ich aus den komponenten html css und js ein gültiges Visuelement
3) mittels welcher Variablenstruktur übergebe ich den Wert (hier im Beispiel der Slider, der die Geschwindigkeit anpasst) aus der Logik an das Visuelement. Hier braucht es eine interneGA, korrekt?

Kann mir vielleicht sogar jemand ein Visuelement als Basis empfehlen, auf das man dies aufbauen kann?

Gruß,
Benjamin

[maque]

Ich habe es hinbekommen. Vorher hatte ich in der Animation nur

0% {transform: translateX(0)}
100% {transform: translateX(40px)}​​

eingetragen. Jetzt habe ich noch

;animation-fill-mode: none

wie unten dargestellt eingefügt und jetzt läuft es.


grafik.png

Eigentlich sollte das redundant zur Option Füllmodus rechts sein, aber was solls.

Viele Grüße
Matthias