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

Posted 2023-02-16

【中文标题】持续时间长于更新时的 Qt 进度条动画

【英文标题】：Qt Progress Bar Animation When Duration is Longer Than Update

【发布时间】：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!")
        
    

【参考方案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!")