问题描述
我正在自定义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!")
}
}
}