Ankündigung

Einklappen
Keine Ankündigung bisher.

Animierte Drehung Haus Status Schritt für Schritt erklärt . . . .

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Animierte Drehung Haus Status Schritt für Schritt erklärt . . . .

    Hallo zusammen,

    ich hatte einige Probleme den Haus Status umzusetzen, den der User @Janncsi in seiner Visu hatte (der hat mir direkt sehr gut gefallen).Durch probieren, fragen usw. habe ich es dann doch irgendwie geschafft :-) und da ich hier im Forum schon viel Hilfe bekommen habe, möchte ich mal etwas zurück geben und habe dafür eine Schritt für Schritt Anleitung für die Edomi Visu bzgl. animierter Haus Status erstellt. Ich hoffe es hilft dem ein oder anderen genauso wie mir. Es gibt sicherlich auch andere Möglichkeiten oder Wege dies umzusetzen . . . . .

    hausstatus.PNG Video https://drive.google.com/open?id=1d-...lX4KQJ-SBBWxns

    Für den Aufbau des oben gezeigten Haus Status benötigt man folgende Komponenten und Einstellungen. (Bilder, Icons hänge ich als Zip dabei)

    1. Icons

    es werden 4 Weiße Icons benötigt, sowie die selbigen in Orange eingefärbt.

    2. Grafikelemente

    es werden folgende Grafikelemente benötigt. - 4segmente.png
    den Mittelpunkt erstellen wir mit Edomi Boardmitteln.

    3. iKO

    iKo_rotate.PNG

    4. Logik

    logik.PNG

    5. Einstellungen

    dafür legen wir uns folgende Universalelemente an:

    - Rotationstaster
    - Rotationstaster Mitte
    - Rotationstaster_Abwesend
    - Rotationstaster_Nacht
    - Rotationstaster_Urlaub
    - Rotationstatser_Normal
    - Press


    Rotationstaster:


    rotationstaster.PNG
    rotationstaster_2.PNG
    CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

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


    Rotationstaster Mitte:

    rotationstaster_mitte.PNG

    rotationstaster_mitte_2.PNG

    Rotationstaster_Abwesend:

    rotationstaster_abwesend.PNG
    rotationstaster_abwesend_2.PNG

    CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

    -webkit-transform: rotate({#+180}deg); -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out

    rotationstaster_abwesend_3.PNG

    Rotationstaster_Nacht:

    rotationstaster_nacht.PNG
    rotationstaster_nacht_2.PNG

    CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

    -webkit-transform: rotate({#+270}deg); -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out

    rotationstaster_nacht_3.PNG
    CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

    -webkit-transform: rotate({#+270}deg); -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out

    rotationstaster_nacht_4.PNG

    CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

    -webkit-transform: rotate({#+270}deg); -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out


    Rotationstaster_Urlaub:

    rotationstaster_urlaub.PNG

    CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

    -webkit-transform: rotate({#+90}deg); -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out

    rotationstaster_urlaub_2.PNG

    CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

    -webkit-transform: rotate({#+90}deg); -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out

    rotationstaster_urlaub_3.PNG

    rotationstaster_urlaub_2.PNG

    CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

    -webkit-transform: rotate({#+90}deg); -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out


    Rotationstatser_Normal:

    rotationstaster_normal.PNG

    CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

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


    rotationstaster_normal_3.PNG

    ​​​​​​​CSS Eigenschaften: (da nicht auf dem BIld zu erkennen)

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


    Press:

    press.PNG



    press_2.PNG

    Gerne nehme ich auch Verbesserungsvorschläge an, um das ganze eventuell schmaler zu gestalten.
    Viel Spaß damit.

    VG
    pokerjung
    Angehängte Dateien
Lädt...
X