为什么动画在 QML 中不起作用？答案

【问题标题】：why animation doesn't work in QML?为什么动画在 QML 中不起作用？
【发布时间】：2017-05-20 23:06:54
【问题描述】：

我想在我的一个屏幕上设置我的全屏应用，所以我必须设置它的高度、宽度、x、y 等等。但是我发现动画不起作用。

我曾经想过这是因为我将它设置在一个目标屏幕上造成的，所以我创建了一个测试代码，在这里我硬编码了 x,y，但动画仍然不起作用，谁能告诉我为什么？

我的测试代码如下：

import QtQuick 2.6
import QtQuick.Window 2.2

Window {
    visible: true
    title: qsTr("Hello World")
    flags: Qt.WindowStaysOnTopHint | Qt.FramelessWindowHint
    opacity: 0.6
    id: root

    MouseArea {
        anchors.fill: parent
        onClicked: {
            //Qt.quit();
        }
    }

    Component.onCompleted: {
        root.x = 0;
        root.y = 0;
        root.width = Screen.width;
        root.height = Screen.height;
        initWindow.start();
    }

    PropertyAnimation {
        id: initWindow
        target: root
        from: 0
        to: Screen.height
        duration: 2000
        easing.type: Easing.InOutQuad
        onRunningChanged: {
            if(!initWindow.running && root.visibility != Window.Hidden){
                console.log("here is initWindow animation.")
            }
        }
    }


}

【问题讨论】：

您的代码很好，但您忘记设置要设置动画的属性。

标签： c++ qt qml

【解决方案1】：

因为你没有为任何东西设置动画。您需要指定一个目标。

只是一个疯狂的猜测，但您可能想要为高度设置动画？

Window {
    id: root
    visible: true
    title: qsTr("Hello World")
    //        opacity: 0.6 // Does not work for me
    // I want to have the frames and stuff for an example.

    MouseArea {
        anchors.fill: parent
        onClicked: {
            //Qt.quit();
        }
    }

    Component.onCompleted: {
        root.x = 0;
        root.y = 0;
        root.width = 1200;
        root.height = 800;
    }

    Behavior on height { // Starts the Animation with the set target, once the height is set to be changed
        NumberAnimation {
            id: initWindow
            duration: 200000
        }
    }
}

或者更接近您的代码：

Window {
    id: root
    visible: true
    title: qsTr("Hello World")

    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }

    Component.onCompleted: {
        root.x = 0;
        root.y = 0;
        root.width = Screen.width;
        initWindow.start();
    }

    PropertyAnimation {
        id: initWindow
        target: root
        from: 0
        to: Screen.height
        property: 'height' // You need to declare which property should change.
        duration: 2000
        easing.type: Easing.InOutQuad
    }
}

查看 cmets，了解我所做的。我删除了一些不必要的代码作为示例。

【讨论】：