Question

我注意到QML的动画非常奇怪。我已经开发了一个测试应用程序来进入动画功能。在我办公室的电脑上，我在Windows 7 64位下安装了Qt 5.4。

我相信动画是＆＃34;播放＆＃34;比预期的持续时间快。 e.g。

// *** Image item for "Failure" event ***
    Image{
        id: failPanel
        x: 300
        y: -300
        source: "images/fail.png"
        scale: 0.5
        visible: false

        function startAnim() {
            visible = true
            x =  300
            y =  -300
            failAnim.restart()
        }

        SequentialAnimation {
            id: failAnim
            NumberAnimation{ target: failPanel; property: "y"; to:300; duration: 700; easing.type: Easing.InOutQuad}
            NumberAnimation{ target: failPanel; property: "y"; to:500; duration: 2000 }
            NumberAnimation{ target: failPanel; property: "x"; to:-1500; duration: 700; easing.type: Easing.InBack}
        }
    }

所有内容都比指定的持续时间快得多，我没有注意它，直到我在家里用更快的PC（Windows 8 64位）重新编译相同的源代码。在我的个人电脑上，动画是在预期的时间播放的......

非常奇怪。好吧，我想知道是否有人已经遇到过这个问题，或者是否有与此主题相关的特定QML设置？

Answer 1

您可以使用JavaScript的{{1}}对象验证时间是否正确：

Date

对我来说（Windows 10，Qt 5.6），它可以工作：

import QtQuick 2.0
import QtQuick.Window 2.0

Window {
    id: root
    y: 30
    width: 1000
    height: 800
    visible: true

    Rectangle{
        id: failPanel
        x: 300
        y: -300
        color: "red"
        scale: 0.5
        width: 400
        height: 400
        visible: false

        property var startDate

        Component.onCompleted: startAnim()

        function startAnim() {
            visible = true
            x =  300
            y =  -300
            failAnim.restart()

            startDate = new Date()
            print("started animation at", startDate.toISOString())
        }

        SequentialAnimation {
            id: failAnim
            NumberAnimation{ target: failPanel; property: "y"; to:300; duration: 700; easing.type: Easing.InOutQuad}
            NumberAnimation{ target: failPanel; property: "y"; to:500; duration: 2000 }
            NumberAnimation{ target: failPanel; property: "x"; to:-1500; duration: 700; easing.type: Easing.InBack}

            onStopped: print("finished animation at", new Date().toISOString())
        }
    }
}

您的问题听起来类似于this错误报告。你也许可以在那里找到类似的东西。

如果可能，我还建议尝试使用较新版本的Qt。

Answer 2

我在为我工作的公司遇到过类似的问题。问题似乎是我们在开始动画后几毫秒内占用了主线程。如果主线程正在运行，则gui不会更新，因为没有处理更新事件。当控制最终返回到事件循环时，所有更新事件都会立即处理，从而导致动画运行更快。

解决方案是在程序空闲时启动动画。最简单的方法是使用排队连接连接插槽以使用信号启动动画。然后动画将在controll传递给eventloop后开始。

动画持续时间不正确

2 个答案: