More boxes to move in the same line.
-
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.0Rectangle {
id: window
width: 320
height: 480Canvas { 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" } }
}@
-
Below is my amended code for 2 boxes
i intend to add two PathAnimation in SequentialAnimation
@
import QtQuick 2.0Rectangle {
id: window
width: 320
height: 480Canvas { 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" } }
}@
-
Is this the solution or what is the exact question ?
-
question.
I am a newbie, is there recommended pdf or site i must read? -
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 ?
-
want to create mulitple boxes moving on a line at different speed using qml
-
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.