以父级为中心的 Column 的 y 位置动画

Question

我有一个包含三个元素的 Column，如果用户点击 空格键 ，其中一个元素可以更改其可见性。为了使可见性变化看起来更平滑，我可以添加一个 move 过渡：

ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480
    visible: true

    Column {
        spacing: 2

        Rectangle { color: "red"; width: 50; height: 50 }
        Rectangle { id: greenRect; color: "green"; width: 20; height: 50 }
        Rectangle { color: "blue"; width: 50; height: 20 }

        move: Transition {
            NumberAnimation { properties: "x,y"; duration: 1000 }
        }

        focus: true
        Keys.onSpacePressed: greenRect.visible = !greenRect.visible
    }
}

这行得通。但是，如果我将 Column 置于其父项的中心，可见性更改也会导致 Column 的新 height，因此也会导致新的 y 位置。

现在我不希望Column到'jump'到它的新位置还能顺利移动。所以我将其添加到 Column:

    anchors.centerIn: parent
    Behavior on y {
        NumberAnimation { duration: 1000 }
    }

但是 y 位置变化仍然没有动画。如何实现？

Answer 1

我添加了另一个包含 Column 的 Item 元素。这允许您在项目的 height 属性上设置 Behavior，这就是您要查找的内容：

import QtQuick 2.4
import QtQuick.Controls 1.3

ApplicationWindow {
    width: 640
    height: 480
    visible: true

    Item {
        id: container
        width: col.width
        height: col.height
        anchors.centerIn: parent
        property int animationDuration: 200

        Behavior on height {
            PropertyAnimation {
                duration: container.animationDuration
            }
        }

        Column {
            id: col
            spacing: 2
            focus: true

            Rectangle { color: "red"; width: 50; height: 50 }
            Rectangle { id: greenRect; color: "green"; width: 20; height: 50 }
            Rectangle { color: "blue"; width: 50; height: 20 }

            move: Transition {
                NumberAnimation { properties: "x,y"; duration: container.animationDuration }
            }

            Keys.onSpacePressed: greenRect.visible = !greenRect.visible
        }
    }
}

希望对您有所帮助！

Answer 2

属性 anchors 引起的变化似乎不会触发 Behaviours。

作为解决方法，手动将 Column:

居中

import QtQuick 2.2

Rectangle {
    width: 640
    height: 480

    Column {
        spacing: 2
        anchors.horizontalCenter: parent.horizontalCenter
        y: (parent.height - height) / 2

        Behavior on y {
            NumberAnimation { duration: 1000 }
        }

        Rectangle { color: "red"; width: 50; height: 50 }
        Rectangle { id: greenRect; color: "green"; width: 20; height: 50 }
        Rectangle { color: "blue"; width: 50; height: 20 }

        move: Transition {
            NumberAnimation { properties: "x,y"; duration: 1000 }
        }

        focus: true
        Keys.onSpacePressed: greenRect.visible = !greenRect.visible
    }
}

以父级为中心的 Column 的 y 位置动画

Animation of y position for a Column centerd in parent

qt

qml

qt-quick

qtquick2