Animierte Drehung nach KO

[Janncsi]

Hallo zusammen,

ich möchte mir gerne ein Element in die Visu setzen, welches bei Veränderung des KO sich entsprechend um die Mitte dreht.

Einfach die Drehung per KO ist kein Problem, aber das schaltet hart um.
Mir ist klar, dass ich dies nur mittels CSS hinbekomme, hier wäre das passende Attribut "ease-in-out", aber ich kriege einfach kein Pack-An, was ich hier machen muss für mein Wunschergebenis...

Vielleicht kann ja jemand helfen...

LG

[SeatSLF]

Erstelle mal eine neue Animation in der Konfiguration mit dem folgen Inhalt:

   
    0%      { transform: rotateY(0deg); }
    50%     { transform: rotateY(180deg); }
    100%    { transform: rotateY(0deg); }
    50%     { transform: rotateY(180deg); }
    0%      { transform: rotateY(0deg); }

[Janncsi]

Hi,

Danke dir.

Anscheinend habe ich das falsch beschrieben :-) meinte die Rotation um den Mittelpunkte.

Klappte an sich auch super, als ich einfach das Y raus nahm.

Verwende ich die Animation aber nun wie vorgeschlagen, dreht sich mein Element dauerhaft, ohne auf einer Position stehen zu bleiben, entsprechend dem KO...

LG

[Janncsi]

Hab nach weiterem Testen jetzt ein Ergebnis...

In die CSS-Zeile folgendes eintragen und schon funktioniert es :-)

-webkit-transform: rotate({#}deg); -webkit-transition: 1s ease-in-out

[Janncsi]

Anbei, falls es jemanden interessiert, das Endergebnis...

Habe hiermit nun einen Durchwahltaster inkl. Status gebaut...bin ziemlich zufrieden :-) Bei jedem Druck auf die Mitte rotiert das ganze Spektakel entsprechend um 90° weiter. Leider kriege ich kein animiertes GIF hochgeladen...

Edit: Klappt doch
https://giphy.com/gifs/l49JE2ohWsCJvh5rq/html5

[SeatSLF]

Das sieht schon sehr gut aus

[sandy65]

gefällt mir wieder einmal super, gratuliere!
...rotiert das icon immer weiter nach rechts? wie hast du das gelöst?

[pokerjung]

Anbei, falls es jemanden interessiert, das Endergebnis...

Habe hiermit nun einen Durchwahltaster inkl. Status gebaut...bin ziemlich zufrieden :-) Bei jedem Druck auf die Mitte rotiert das ganze Spektakel entsprechend um 90° weiter. Leider kriege ich kein animiertes GIF hochgeladen...

Edit: Klappt doch
https://giphy.com/gifs/l49JE2ohWsCJvh5rq/html5

@Jannsci

habe versucht das nachzubauen - aber bei mir dreht sich nichts worauf muss hierbei noch zusätzlich
geachtet werden?

-webkit-transform: rotate({#}deg); -webkit-transition: 1s ease-in-out

habe ich in den Einstellungen (CSS) auf den Mittelpunkt gelegt.

@all - hat das jemand von Euch am laufen nach der Vorgabe und kann helfen?

Danke Vorab
VG

[Zaschii]

Würde ich gerne mal nachbauen, Janncsi könntest du bitte die Bilddateien zu Verfügung stellen?

[pokerjung]

Hallo zusammen,

so habe es hinbekommen - es dreht sich nun im Uhrzeigersinn so wie gewünscht. Nun habe ich aber noch eine Frage,
wie kann ich nun den Status,welcher auf 12 Uhr steht als aktiven Status einstellen?
Beispiel: der Status steht auf Urlaub - dann soll die Alarmanlage geschaltet werden (ohne das ich den Status anklicken muss).


@Zaschii
hoffe das Janncsi nix dagegen hat: hier die Billdateien
4 Segmente.png haus_nacht.png haus_normal.png mitte.png schlafen.png urlaub.png hausstatus.PNG

Über einen Lösungsweg oder einen Hinweis wäre ich dankbar.

VG

[vento66]

Na am besten mit dem IKO, welches für die Drehung verantwortlich ist. Im Logikeditor verwurschteln, das die passende Aktion ausgelöst wird, wenn das Element gedreht wird.

[pokerjung]

vento66 das habe ich probiert. Leider bekomme ich es nicht hin.
Ich habe im iKO (Befehl in der Visu) eingestellt, dass er immer 90 addieren soll. Somit erzeuge ich die Bewegung.

Ziel soll sein, dass er von 0 -270 in 90er Schritten geht und dann wieder bei 0 anfängt (somit hätte ich 4 Zustände).
Aber leider komme ich hierbei nicht weiter. Er addiert immer weiter die 90 hinzu. Hatte auch versucht dies im iKO mit min max
einzustellen - dann geht er aber nur bis 270 und nicht weiter . . . .
Werteliste 0,90,180,270 bringt auch nicht das gewünschte Ergebnis.

Wie kann ich dies bewirken, dass er bei 0 anfängt und bis 270 dreht und dann wieder zu 0 usw.????

Danke
VG

[woda]

Einen Vergleicher in die Logik einbauen, der wenn Wert > 270, den Wert auf 0 schreibt.

[pokerjung]

woda habe es jetzt so gemacht - vielleicht geht es auch anders (einfacher/anders). Damit erhalte ich zumindest das Ergebnis. Einzig der Rücksprung bewirkt nun auch, dass das Status Rad sich zurück auf 0 (von 270 -> 0 gegen den Uhrzeiger ) dreht.

wert_schreiben.PNG

VG