QtQuick2 - QML - create infinite moving line animation

Question

Does anyone know how to implement linear animation, for example like in progress bars, where few of lines moving infinite in the bar from left to right or any other way? I'm going to use only QtQuick2 primitives and without any additional C++ components, glad to see any answers that can fit this requirements. Also, I know how to set infinite loop for animation, but actual question is to how moves row of rectangles/lines from letf to right in infinity loop, I just can't imagine approach for that.

I'd upvote if you showed some sort of attempt at coding this. :p — Mitch
Hi, just out of my laptop. I will include my element code once I'll be near my desktop — user3417815
There is full code of this component and few more, unfortunatelly I decided to not use line moving animation for now and switch it with glowing animation, but sure it will be usefull for you — user3417815
git clone git://git.code.sf.net/p/breezequick/code breezequick-code — user3417815

folibis folibis · Accepted Answer · 2015-06-15T00:13:14

Something like that?

Rectangle {
    width: 400
    height: 30
    anchors.centerIn: parent
    border.color: "grey"
    border.width: 1
    clip: true

    Rectangle {
        id: runner
        property double percent: 0.2
        width: parent.width * percent
        height: parent.height
        color: "orange"
        NumberAnimation on x { from: runner.width * (-1); to: 400; duration: 2000; loops: Animation.Infinite }
    }
}

QtQuick2 - QML - create infinite moving line animation

1 Answers