[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 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?



  • 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"
    }
    

    }
    @



  • 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: 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"
    }
    }@


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.