QML animations visible property changes

Question

I want an animation to be painted when an element becomes visible (is should appear smoothly, not the whole at all)

I tried this

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"
    }
}

But the selectIconRow still appears immediately

How can I use such an animation?

Solution 1

Because it's boolean, visible property cannot be animated. Perhaps opacity could do the trick.

Solution 2

Here is how to do it with 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}
    }
}

Keep in mind the advice of Vasco Rinaldo.

Solution 3

Just for future references, here's my solution which takes care also of Vasco's warning. Basically I'm animating the visible property of the component after the opacity has changed. It hurts seeing a NumberAnimation on a boolean, but it's working:

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
               }
            }
        }
    ]

This introduces also a transition when the component is vanishing.

Solution 4

I had to modify Uga Buga's answer slightly to make it work, here's what I got:

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}} ]
}

Please note that stateVisible is referenced through item id, it doesn't work without it on my system. Maybe some change in API caused this.

I also added square bracket in transitions field as an array is required there (although QML syntax seems to allow spelling without brackets)

Solution 5

Item {

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

}

does the trick for me.

View more solutions

Comments

[Vasco Rinaldo]

Care with opacity. If something is fully transparent with opacity=0.0 its different from visible=false. For example a nested MouseArea in your not visible item is still clickable.

[Aleksei Petrenko]

This didn't quite work on my system, see my answer with minor corrections. Thanks for this snippet anyway though.

[sergk]

That's true. Generally there are two approaches. For simple cases visible could be binded to opacity != 0. In more complex scenarios state change with transition is the way to go.

[GrecKo]

If it hurts too much you can use a "PropertyAnimation" instead.

[GrecKo]

This doesn't animate when hiding the Item.

[Marc Van Daele]

or a "PropertyAction"