持续时间长于更新时的 Qt 进度条动画答案

【问题标题】：Qt Progress Bar Animation When Duration is Longer Than Update持续时间长于更新时的 Qt 进度条动画
【发布时间】：2020-08-10 18:59:02
【问题描述】：

我正在定制一个 Qt5 Quick 2 QML 进度条。当进度更新很少且很大时，进度条会以块状方式跳跃。为了解决这个问题，我想我会在值动画中添加一个简单的行为，以便它平滑地移动到下一个值。这很有效，除非动画持续时间大于更新之间的时间间隔。然后行为是更新移动非常缓慢，当它们停止时，它们似乎会加速并尝试完成。

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

我想要一个值来停止先前执行的行为动画并继续下一个，而不是同时以某种方式重叠。

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

【问题讨论】：

标签： qt animation qml

【解决方案1】：

我不确定我理解您的预期行为，但我认为有两个问题。首先，您需要使用不设置动画的中间值，以便稍后参考。然后你需要一种方法来关闭动画，这样你就可以立即跳转到一个值。这样的事情应该可以工作：

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

【讨论】：