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?

score 19 · Accepted Answer · answered Sep 09 '12 at 00:47

19

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

answered Sep 09 '12 at 00:47

sergk

3,591
1
20
14

14

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. – Vasco Rinaldo May 01 '14 at 15:34
4

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. – sergk Feb 22 '16 at 01:05

score 13 · Answer 2 · edited Aug 25 '15 at 20:07

13

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.

edited Aug 25 '15 at 20:07

BaCaRoZzo

7,502
6
51
82

answered Jan 10 '15 at 12:56

Uga Buga

1,724
3
19
38

1

This didn't quite work on my system, see my answer with minor corrections. Thanks for this snippet anyway though. – Aleksei Petrenko Aug 23 '15 at 23:30

score 9 · Answer 3 · answered Dec 02 '15 at 10:20

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.

If it hurts too much you can use a "PropertyAnimation" instead. — GrecKo, Nov 08 '17 at 08:34

score 5 · Answer 4 · answered Aug 23 '15 at 23:29

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)

score 3 · Answer 5 · answered Nov 07 '17 at 19:50

3

Item {

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

}

does the trick for me.

answered Nov 07 '17 at 19:50

Rajesh Kumar Mallah

41
4

1

This doesn't animate when hiding the Item. – GrecKo Nov 08 '17 at 08:35

Mohammad Kanan · Answer 6 · 2018-10-02T13:50:23.050

visibility can be used in NumberAnimation, but to get the needed fading result, opacity animation could be used; like turning visibility ON from function like the following example:

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

Or :

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

QML animations visible property changes

6 Answers6

Linked