More boxes to move in the same line.

houmingc

Below is the code where i create a box moving along a line
I need help to have more independent boxes (3 or more) to move in the same line.
@
import QtQuick 2.0

Rectangle {
id: window
width: 320
height: 480

Canvas {
    id: canvas
    anchors.fill: parent
    antialiasing: true

    onPaint: {
        var context = canvas.getContext("2d")
        context.clearRect(0, 0, width, height)
        context.strokeStyle = "black"
        context.path = pathAnim.path
        context.stroke()
    }
}

SequentialAnimation {
    running: true
    loops: -1

    PauseAnimation { duration: 1000 }
    //! [0]
    PathAnimation {
        id: pathAnim

        duration: 2000
        easing.type: Easing.InQuad

        target: box
        orientation: PathAnimation.RightFirst
        anchorPoint: Qt.point(box.width/2, box.height/2)
        path: Path {
            startX: 0; startY: 100
                PathLine{x:600 ; y:100 }
            onChanged: canvas.requestPaint()
        }
    }
    //! [0]
}

Rectangle {
    id: box

    x: 25; y: 25
    width: 50; height: 50
    border.width: 1
    antialiasing: true

    Text {
        anchors.centerIn: parent
        text: "Box"
    }
}

}@

houmingc

Below is my amended code for 2 boxes
i intend to add two PathAnimation in SequentialAnimation
@
import QtQuick 2.0

Rectangle {
id: window
width: 320
height: 480

Canvas {
    id: canvas
    anchors.fill: parent
    antialiasing: true

    onPaint: {
        var context = canvas.getContext("2d")
        context.clearRect(0, 0, width, height)
        context.strokeStyle = "black"
        context.path = pathAnim.path
        context.stroke()
    }
}

SequentialAnimation {
    running: true
    loops: -1

    PauseAnimation { duration: 1000 }
    //! [0]
    PathAnimation {
        id: pathAnim

        duration: 2000
        easing.type: Easing.InQuad

        target: box
        orientation: PathAnimation.RightFirst
        anchorPoint: Qt.point(box.width/2, box.height/2)
        path: Path {
            startX: 0; startY: 100
                PathLine{x:600 ; y:100 }
            onChanged: canvas.requestPaint()
        }
    }
    //! [0]
        PathAnimation {
        id: pathAnim1

        duration: 1000
        easing.type: Easing.InQuad

        target: box
        orientation: PathAnimation.RightFirst
        anchorPoint: Qt.point(box.width/2, box.height/2)
        path: Path {
            startX: 0; startY: 100
                PathLine{x:600 ; y:100 }
            onChanged: canvas.requestPaint()
        }
    }

}

Rectangle {
    id: box

    x: 25; y: 25
    width: 50; height: 50
    border.width: 1
    antialiasing: true

    Text {
        anchors.centerIn: parent
        text: "Box"
    }
}

}@

p3c0

Is this the solution or what is the exact question ?

houmingc

question.
I am a newbie, is there recommended pdf or site i must read?

p3c0

Did you try the solution that I earlier posted ? Doesn't that satisfy the need ? If not, then may be I've not understood your question properly. Can you reformat the question more clearly ?

houmingc

want to create mulitple boxes moving on a line at different speed using qml

p3c0

well then if it is at the same time then I think that your earlier approach is correct. For that you can create a separate Component or a QML file which will contain the PathAnimation and the Box and then later call this Component/QML file as many times you need.