[Solved]Qt : Animation Issue in Progress Bar

Craig27

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 rectangle

Below is my tried code.

@import QtQuick 1.1

Rectangle {
id: container

width: 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?

beemaster

Maybe you can use "Timer":http://qt-project.org/doc/qt-4.8/qml-timer.html
@

import QtQuick 1.1

Rectangle {
id: container

width: 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"
}

}
@

Craig27

Thanks mate :)
I have also tried with trigger but didn't used smartly enough.

Craig27

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: container

width: 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.y

  anchors.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"
}
}@