CODEWITHSUNDEEP
c++qtqmlqtquick2
Zyend
Zyend

Reputation: 602

Incorrect animation duration

I noticed very weird behavior of animation with QML. I have developped a test application to get into the animation features. On my PC at the office, I have installed Qt 5.4 under Windows 7 64 Bits.

I am sure that the animations are "played" faster than the expected duration. 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}
        }
    }

Everything is played much faster than the specified duration I didn't pay attention to it until I recompile the same source code at home with much faster PC (Windows 8 64 Bits). On my personal PC, the animations is played at expected timing...

Very weird. Well, I wonder if anyone has already experienced this issue, or if there are particular QML settings related to this subject ?

Upvotes: 0

Views: 954

Answers (2)

Teimpz
Teimpz

Reputation: 935

We had similar issue in the company I work for. The problem appeared to be that we hogged the main thread for a few milliseconds after starting the animation. If the main thread is working, the gui does not update since no update events are processed. When control finaly returns to the event loop, all update events are handled at once, causing the animation ro run faster.

Solution is to start the animation once your program runs idle. Easyest way to do this is probably to connect a slot to start the animation with a signal using a queued connection. Then the animation will start after controll is handed to the eventloop.

Upvotes: 0

Mitch
Mitch

Reputation: 24406

You can verify whether or not the timing is correct by using JavaScript's Date object:

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

For me (Windows 10, Qt 5.6), it works:

qml: started animation at 2016-01-31T06:29:31.209Z
qml: finished animation at 2016-01-31T06:29:34.631Z

Your problem sounds similar to this bug report. You might be able to find similar ones there, too.

I'd also recommend trying with a newer version of Qt, if possible.

Upvotes: 2

Related Questions