QML animations visible property changes

前端 未结 6 1227
太阳男子
太阳男子 2021-02-13 08:52

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         


        
相关标签:
6条回答
  • 2021-02-13 09:25

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

    0 讨论(0)
  • 2021-02-13 09:31

    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)}
            }
    }
    
    0 讨论(0)
  • 2021-02-13 09:38

    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.

    0 讨论(0)
  • 2021-02-13 09:40

    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.

    0 讨论(0)
  • 2021-02-13 09:44
    Item {
    
     scale: visible ? 1.0 : 0.1
     Behavior on scale { 
       NumberAnimation  { duration: 500 ; easing.type: Easing.InOutBounce  } 
      }
    
    }
    

    does the trick for me.

    0 讨论(0)
  • 2021-02-13 09:47

    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)

    0 讨论(0)
提交回复
热议问题