为什么在负载上触发动画

Question

窗口打开时，您可以看到矩形滑出。我将y属性设置为父高度，以便最初在窗口外面，为什么要动画？
我的猜测是因为parent:height。也许是因为parent.height在加载时间不可用，并且最初设置为0？

我有以下示例要复制：

import QtQuick 2.9
import QtQuick.Window 2.2
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle {
        id: test;
        y: parent.height;
        states: [
            State {
                name: "slideOut"
                PropertyChanges{
                    target: test;
                    y: parent.height;
                }
            },
            State {
                name: "slideIn"
                PropertyChanges{
                    target: test;
                    y: 0;
                }
            }
        ]
        Behavior on y {
            NumberAnimation {
                duration: 500;
            }
        }
        color: "red";
        width: parent.width;
        height: parent.height;
    }
    MouseArea {
        anchors.fill: parent;
        onClicked: {
            if(test.state == "slideIn") {
                test.state = "slideOut";
            } else {
                test.state = "slideIn";
            }
        }
    }
}

Answer 1

您的猜测听起来很斑点。

您应该使用状态过渡：

import QtQuick 2.9
import QtQuick.Window 2.2
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle {
        id: test
        y: parent.height
        width: parent.width
        height: parent.height
        color: "red"
        states: [
            State {
                name: "slideOut"
                PropertyChanges {
                    target: test
                    y: parent.height
                }
            },
            State {
                name: "slideIn"
                PropertyChanges {
                    target: test
                    y: 0
                }
            }
        ]
        transitions: [
            Transition {
                NumberAnimation {
                    property: "y"
                    duration: 500
                }
            }
        ]
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (test.state == "slideIn") {
                test.state = "slideOut"
            } else {
                test.state = "slideIn"
            }
        }
    }
}

另一个解决方案可能是使用启用行为的属性仅在窗口准备就绪时运行动画。我不确定您是否将其基于哪个属性。一些想法：

• enabled: window.height > 0
• enabled: window.active