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

持续时间长于更新时的Qt进度条动画,qt,animation,qml,Qt,Animation,Qml,我正在定制Qt5 Quick 2 QML进度条。当进度更新很少且很大时,进度条会以块状方式跳转。为了解决这个问题,我想我应该向值动画添加一个简单的行为,以便它平滑地移动到下一个值。这非常有效,除非动画持续时间大于更新之间的时间间隔。然后,行为是更新移动非常缓慢,当它们停止时,它们似乎会加速并尝试完成 以下代码增加进度条,使其每秒重复一次。当行为持续时间小于计时器间隔时,它工作,但当持续时间较长时,它失败 我希望设置一个值,以停止先前执行的行为动画并继续执行下一个,而不是同时重叠 Timer {

我正在定制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!")
        }
    }
}

我不能肯定我理解你的预期行为,但我认为有两个问题。首先,您需要使用一个不设置动画的中间值,以便以后可以引用它。然后需要一种关闭动画的方法,以便可以立即跳转到某个值。像这样的方法应该会奏效:

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