QML-Animationen sichtbar-Eigenschaft ändert

Möchte ich eine animation, gemalt zu werden, wenn ein element sichtbar wird (Sie sollte glatt erscheinen, nicht die ganze)

Habe ich versucht, dieses

states: State
{
    name: "iconOff"
    when: iconOnSwitch.checked == false
    PropertyChanges { target: selectIconRow; visible: false }
}

transitions: Transition
{
    reversible: true
    from: ""
    to: "iconOff"
    PropertyAnimation
    {
        properties: "x,y,visible"
        easing.type: Easing.InOutQuad
        from: selectIconRow
        property: "visible"
    }
}

Aber die selectIconRow noch erscheint sofort

Wie kann ich eine solche animation?

InformationsquelleAutor marmistrz | 2012-09-08

15

Weil es boolean visible Eigenschaft kann nicht animiert werden. Vielleicht opacity könnte den trick tun.

Pflege mit der Deckkraft. Wenn etwas ist vollständig transparent, opacity=0.0 die verschiedenen von visible=false. Zum Beispiel eine geschachtelte MouseArea in Ihr nicht sichtbare Element ist immer noch anklickbar.
Das ist wahr. Grundsätzlich gibt es zwei Ansätze. Für einfache Fälle visible werden könnten gebunden zu opacity != 0. In komplexeren Szenarien Zustand zu ändern, mit dem übergang ist der Weg zu gehen.

InformationsquelleAutor sergk

Hier ist, wie es zu tun mit opacity:

Rectangle {
    id: myRect
    property bool stateVisible: true
    ...
    states: [
        State { when: stateVisible;
            PropertyChanges {   target: myRect; opacity: 1.0    }
        },
        State { when: !stateVisible;
            PropertyChanges {   target: myRect; opacity: 0.0    }
        }
    ]
    transitions: Transition {
        NumberAnimation { property: "opacity"; duration: 500}
    }
}

Beachten Sie den Rat von Vasco Rinaldo.

Das hat nicht ganz funktioniert auf meinem system, siehe meine Antwort mit kleineren Korrekturen. Vielen Dank für das snippet trotzdem obwohl.

InformationsquelleAutor Uga Buga

Nur für die Zukunft Verweise, hier ist meine Lösung, die kümmert sich auch der Vasco ' s Warnung. Im Grunde bin ich das animieren der visible - Eigenschaft der Komponente nach der Deckkraft verändert hat. Es tut weh zu sehen, eine NumberAnimation auf einen booleschen Wert, aber es funktioniert:

states: [
    State{
        name: "Visible"
        PropertyChanges{target: root; opacity: 1.0}
        PropertyChanges{target: root; visible: true}
    },
    State{
        name:"Invisible"
        PropertyChanges{target: root; opacity: 0.0}
        PropertyChanges{target: root; visible: false}
    }
]

transitions: [
        Transition {
            from: "Visible"
            to: "Invisible"

            SequentialAnimation{
               NumberAnimation {
                   target: root
                   property: "opacity"
                   duration: 500
                   easing.type: Easing.InOutQuad
               }
               NumberAnimation {
                   target: root
                   property: "visible"
                   duration: 0
               }
            }
        },
        Transition {
            from: "Invisible"
            to: "Visible"
            SequentialAnimation{
               NumberAnimation {
                   target: root
                   property: "visible"
                   duration: 0
               }
               NumberAnimation {
                   target: root
                   property: "opacity"
                   duration: 500
                   easing.type: Easing.InOutQuad
               }
            }
        }
    ]

Diese stellt auch einen übergang, wenn die Komponente verschwinden.

Wenn es zu sehr schmerzt, können Sie ein "PropertyAnimation" statt.

InformationsquelleAutor Miguel El Merendero

Musste ich ändern Uga Buga ist die Antwort leicht zu machen, damit es funktioniert, hier ist was ich habe:

Rectangle {
    id: myRect
    property bool stateVisible: true
            ...
    states: [
        State { when: myRect.stateVisible; 
                PropertyChanges {   target: myRect; opacity: 1.0    }},
        State { when: !myRect.stateVisible;
                PropertyChanges {   target: myRect; opacity: 0.0    }}
    ]
    transitions: [ Transition { NumberAnimation { property: "opacity"; duration: 500}} ]
}

Bitte beachten Sie, dass stateVisible verwiesen wird, wird durch die Element-id, es funktioniert nicht ohne es auf meinem system. Vielleicht einige änderungen in der API verursacht.

Habe ich auch noch eckige Klammer in transitions Feld als array erforderlich ist, (obwohl QML-syntax zu erlauben scheinen Schreibweise ohne Klammern)

InformationsquelleAutor Alexey Petrenko

Item {

 scale: visible ? 1.0 : 0.1
 Behavior on scale { 
   NumberAnimation  { duration: 500 ; easing.type: Easing.InOutBounce  } 
  }

}

funktioniert der trick für mich.

Dies nicht animieren beim verstecken der Sache.

InformationsquelleAutor Rajesh Kumar Mallah

visibility können verwendet werden NumberAnimation, aber um die nötige fading Ergebnis opacity animation verwendet werden könnten; wie Sie die Sichtbarkeit AUF aus-Funktion wie im folgenden Beispiel:

Rectangle{
    id:fadingRect
    anchors.fill: parent
    visible: false
    opacity: 0.00
    color: "red"
    Component.onCompleted: {
        animRect.start()
    }
}
SequentialAnimation{
    id:animRect
    NumberAnimation { target: fadingRect; property: "visible"; from: 0; to:1; duration: 20}
    NumberAnimation { target: fadingRect; property: "opacity"; from: 0.00; to:1.00; duration: 4000 }

    onStopped: console.log(fadingRect.visible)
}

Oder :

Rectangle{
    id:fadingRect
    anchors.fill: parent
    visible: false
    opacity: 1
    color: "red"
    Component.onCompleted: {
        animRect.start()
    }
        NumberAnimation { id:animRect; target: fadingRect; property: "opacity"; from: 0; to:1; duration: 2000;
        onStarted: { fadingRect.visible=true; console.log(fadingRect.visible)}
        }
}

InformationsquelleAutor Mohammad Kanan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.