15

我希望在元素变得可见时绘制动画（应该看起来平滑，而不是整体）

我试过这个

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 仍然会立即出现

我怎样才能使用这样的动画？

4

6 回答 6

19

因为它是布尔值，visible所以不能为属性设置动画。也许opacity可以做到这一点。

于 2012-09-09T00:47:25.890 回答
11

以下是如何做到这一点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 的建议。

于 2015-01-10T12:56:09.270 回答
6

仅供将来参考，这是我的解决方案，它也照顾 Vasco 的警告。基本上我visible在不透明度改变后为组件的属性设置动画。在布尔值上看到 a 很痛苦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
               }
            }
        }
    ]

当组件消失时，这也会引入转换。

于 2015-12-02T10:20:35.720 回答
5

我不得不稍微修改 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 语法似乎允许不带括号的拼写）

于 2015-08-23T23:29:48.390 回答
2 
Item {

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

}

对我有用。

于 2017-11-07T19:50:00.380 回答
0

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

或者 ：

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)}
        }
}
于 2018-10-02T13:32:53.113 回答