持续时间长于更新的Qt进度栏动画

如何解决持续时间长于更新的Qt进度栏动画

我正在自定义Qt5 Quick 2 QML进度栏。当进度更新非常少且很大时，进度条将以阻塞的方式跳转。为了解决这个问题，我想我应该在值动画中添加一个简单的Behavior，以便它平滑地移动到下一个值。除非动画持续时间大于更新之间的时间间隔，否则效果很好。这样的行为是，更新的移动速度非常缓慢，停止时，它们似乎会加快速度并尝试完成。

以下代码递增进度条，使其每秒重复一次。当“行为”持续时间小于计时器间隔时，它将起作用，但是，当“持续时间”较长时，它将失败。

我希望设置一个值来停止先前执行的行为动画，然后继续执行下一个动画，而不要以某种方式同时重叠。

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!")
        }
    }
}

解决方法

我不太肯定我理解您的预期行为，但是我认为有两个问题。首先，您需要使用不设置动画的中间值，以便以后可以引用它。然后，您需要一种关闭动画的方法，以便可以立即跳到一个值。这样的事情应该起作用：

// 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!")
        }
    }
}