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在布尔值上看到 a 很痛苦，但它正在工作：

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 语法似乎允许不带括号的拼写）