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是通过item id引用的，如果没有它，它在我的系统上不起作用。也许API的一些变化导致了这一点。

我还在transitions字段中添加了方括号，因为那里需要一个数组（虽然QML语法似乎允许没有括号的拼写）

Answer 5

Item {

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

}

为我做了诀窍。

Answer 6

DirectoryInfo dinfo = new DirectoryInfo(@"C:\Users\nour\Desktop\Gedaan"); FileInfo[] Files = dinfo.GetFiles("*.DOCX"); foreach (FileInfo file in Files) { LB2.Items.Add(file.Name); }可以在visibility中使用，但是要获得所需的淡入效果，可以使用NumberAnimation动画；例如通过以下示例中的功能打开可见性：

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

QML动画可见属性更改

6 个答案: