CODEWITHSUNDEEP
qtanimationqml
Steve
Steve

Reputation: 4097

Qt Progress Bar Animation When Duration is Longer Than Update

I am working on customizing a Qt5 Quick 2 QML progress bar. When progress updates are very few and large, the progress bar jumps in a blocky way. To fix this, I thought I would add a simple Behavior to the value animation so it smoothly moves to the next value. This works great except when the animation duration is larger that the period between updates. Then the behavior is that the updates move very slowly, and when they are stopped they seem to speed up and try and finish.

The following code increments the progress bar so that it repeats once per second. When the Behavior duration is less than the timer interval, it works, but when the duration is longer, it fails.

I would like a value set to stop the prior executing behavior animation and move on to the next, not simultaneously overlap somehow.

Timer
{
    interval: 200; running:true; repeat:true
    onTriggered:
    {
        if(mybar.doUpdate)
        mybar.value = (mybar.value + 0.2 ) % 1
    }
}

ProgressBar
{
    id: mybar
    value: .5
    property bool doUpdate: true
    Behavior on value
    {
        NumberAnimation
        {
            duration: 1000
            easing.type: Easing.InOutQuad
        }

    }

    MouseArea{
        anchors.fill:parent
        onClicked:
        {
            parent.doUpdate = !parent.doUpdate
            console.log((!parent.doUpdate ? "Stop" : "Go") + " Now!")
        }
    }
}

Upvotes: 0

Views: 665

Answers (1)

JarMan
JarMan

Reputation: 8277

I'm not positive I understand your expected behavior, but I think there's two issues. First, you need to use a go-between value that doesn't animate so you can refer to it later. Then you need a way to turn off the animation so you can jump to a value immediately. Something like this should work:

// This holds the current progress value without animating
property real tempVal: 0.5

// This controls whether or not to animate
property bool doAnimate: true

Timer
{
    interval: 200; running:true; repeat:true
    onTriggered:
    {
        if(mybar.doUpdate)
        {
            // Turn off the animation
            doAnimate = false;

            // Reset the progress bar to the current expected value
            mybar.value = Qt.binding(function() { return tempVal });

            // Turn on the animation again
            doAnimate = true;

            // Animate up to this new value
            tempVal = (tempVal + 0.2 ) % 1
        }
    }
}

ProgressBar
{
    id: mybar
    // Bind the progress bar to our secondary value
    value: tempVal
    property bool doUpdate: true
    Behavior on value
    {
        // Control animation with this flag
        enabled: doAnimate
        NumberAnimation
        {
            duration: 1000
            easing.type: Easing.InOutQuad
        }
    }

    MouseArea{
        anchors.fill:parent
        onClicked:
        {
            parent.doUpdate = !parent.doUpdate
            console.log((!parent.doUpdate ? "Stop" : "Go") + " Now!")
        }
    }
}

Upvotes: 1

Related Questions