QML动画的可见属性更改

Question

我希望在元素可见时绘制动画（应该平滑显示，而不是整体显示）

我试过了

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

但是selectIconRow仍然会立即出现

如何使用这种动画？

Answer 1

因为它是布尔值，所以无法对visible属性进行动画处理。 也许opacity可以解决问题。

Answer 2

这是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}
    }
}

请记住Vasco Rinaldo的建议。

Answer 3

仅供将来参考，以下是我的解决方案，该解决方案还处理了Vasco的警告。 基本上，不透明度更改后，我正在为组件的visible属性设置动画。 在布尔值上看到NumberAnimation很痛苦，但是它可以正常工作：

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

当组件消失时，这也会引入过渡。

Answer 4

我必须稍微修改Uga Buga的答案才能使其正常工作，这是我得到的：

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

请注意，stateVisible是通过项目ID引用的，如果没有它在我的系统上将无法使用。 可能是API的某些更改导致了此问题。

我还在transitions字段中添加了方括号，因为那里需要一个数组（尽管QML语法似乎允许不使用方括号进行拼写）

Answer 5

Item {

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

}

为我做the俩。

Answer 6

可以在NumberAnimation中使用visibility ，但是要获得所需的淡入效果，可以使用opacity动画； 例如通过以下示例中的功能打开可见性：

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

要么 ：

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