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

Question

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

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