[Solved]Qt : Animation Issue in Progress Bar
-
Hi Everyone,
I'm trying to have a animation in progress bar.
The behaviour is as follows.
We have a series of small rectangles in line(imagine dotted line) in my QML page. Now we have to get a slider in rectangle shape slightly bigger in size which moves over those small rectangles in line, like its stepping on those rectangle by rectangleBelow is my tried code.
@import QtQuick 1.1
Rectangle {
id: containerwidth: 500; height: 400 Row { id:repeaterid x: 75 y: 280 anchors.bottom: parent.bottom anchors.bottomMargin: 114 spacing: 4 Repeater { model: 50 Rectangle { id: smallrect color: "lightblue" width:4 height:4} } } Rectangle { x: repeaterid.x y: repeaterid.y width: 6; height: 6 color: "blue" SequentialAnimation on x { PropertyAnimation { to: 440; duration: 5000 } PropertyAnimation { to: repeaterid.x; duration: 0 } } }
}@
I hope once you go through code you can get the required animation which I tried to achieve .
Currently am getting a smooth transition over dotted line, it does not give stepping animation.
How to approach for it? -
Maybe you can use "Timer":http://qt-project.org/doc/qt-4.8/qml-timer.html
@import QtQuick 1.1
Rectangle {
id: containerwidth: 500; height: 400 Row { id:repeaterid x: 75 y: 280 anchors.bottom: parent.bottom anchors.bottomMargin: 114 spacing: 4 Repeater { model: 50 Rectangle { id: smallrect color: "lightblue" width:4 height:4 } } } Timer { id: progressTimer interval: 50 running: true repeat: true onTriggered: { if (slider.x < 450) slider.x += repeaterid.spacing + 4 } } Rectangle { id: slider x: repeaterid.x y: repeaterid.y width: 6; height: 6 color: "blue" }
}
@ -
Thanks mate :)
I have also tried with trigger but didn't used smartly enough. -
I tried to improvise more in this respect. What am doing is increasing the size of trailing rectangles when the slider moves on. Initially I tried to use spacing in row for that but that wasn't working. So I went with below approach..but am getting very weird output
@import QtQuick 1.1
Rectangle {
id: containerwidth: 867; height: 520
color: "black"property int indexCurrent: 0
Row {
id:repeaterid
x: 352
y: 330
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 65
spacing: 10
Repeater {
id: repeater
model: 30
Rectangle { id: smallrect; color: "lightblue"; width:10; height:10}
}}
Row {
id:repeateblankrid
x: repeaterid.x+10
y: repeaterid.yanchors.bottomMargin: 65 spacing: 10 Repeater { id: repeaterblank model: 30 Rectangle { id: blank; color: "black"; width:10; height:10} }
}
//((container.width -((container.width -(repeater.width100)+(repeaterid.spacing99))/2)))+ ((repeater.width100)+repeaterid.spacing99)
Timer {
id: progressTimer
interval: 100
running: true
repeat: true
onTriggered: {
if (slider.x < 730)
{
slider.x += repeaterid.spacing + 10
repeater.itemAt(indexCurrent).color = "blue"
repeaterblank.itemAt(indexCurrent).width = 8
repeater.itemAt(indexCurrent).width = 12
repeater.itemAt(indexCurrent).height = 12
indexCurrent = indexCurrent + 1
}}
}
Rectangle {
id: slider
x: repeaterid.x
y: repeaterid.y
width: 14; height: 14
color: "blue"
}
}@