[Solved]Problem in QML sate transition when moving multiple images.
-
I have two rectangle and two images.
Rectangle 1 id "rectgreen" is at postion P1 (x,y) and a image " imagegreen" at same postion.
Rectangle 2 id "rectred" is at postion P2 (x,y) and a image " imagered" at same postion.On click of rectangle 1 id "rectgreen" I am moving the image "imagegreen" 300 pixel right , say P1(x+300,y) using state and transition .This works fine when I change state onclick event of rectgreen.
On click of rectangle 2 id "rectred" I am moving the image "imagered" 300 pixel right , say P2(x+300,y) using state and transition.But when change the state on Click event of "rectred" the redimage move to right* but at the same time "imagegreen" move back to its original position P1 (x,y) *though I am not doing any operation on "imagegreen" while I click on redrect.
Please suggest if I am missing any thing or need to be take any other approach ,( or a QML bug ?).
Code snippet below
////////
@import QtQuick 2.0
Rectangle {
id:page;width: 660;height: 660
Rectangle {
id:rectgreen;width: 50;height: 50;color:"yellow";x: 20;y:300
MouseArea {
anchors.fill: parent;
onClicked:page.state = 'stategreenToRight'
}
}
Rectangle {
id:rectred;width: 50;height: 50;color:"yellow";x: 20;y:400;
MouseArea {
anchors.fill: parent;
onClicked: page.state = 'stateredToRight'
}
}Image { id: imagegreen;x: 20;y:300;width: 50;height: 50;source: "green.png" } Image { id: imagegred;x: 20;y:400;width: 50;height: 50;source: "red.png" } states: [ // In state 'stategreenToRight', move green image to right 300 px State { name: "stategreenToRight" PropertyChanges { target: imagegreen; x: rectgreen.x +300; y: rectgreen.y } }, // In state 'stateredToRight', move red image to right 300 px State { name: "stateredToRight" PropertyChanges { target: imagegred; x: rectred.x + 300; y: rectred.y } } ] transitions: [ Transition { from: "*"; to: "stategreenToRight" NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce; duration: 1000 } }, Transition { from: "*"; to: "stateredToRight" NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce; duration: 1000 } } ]
}
@
-
This shoud do the job..
@
import QtQuick 2.0
import QtQuick.Window 2.1Window
{
visible: true
width: 709
height: 1024Rectangle { id:page;width: 660;height: 660 Rectangle { id:rectgreen;width: 64;height: 64;color:"yellow";x: 20;y:300 MouseArea { anchors.fill: parent; onClicked:rectgreen.state = 'stategreenToRight' } states: [ // In state 'stategreenToRight', move green image to right 300 px State { name: "stategreenToRight" PropertyChanges { target: imagegreen; x: rectgreen.x +300; y: rectgreen.y } } ] transitions: [ Transition { from: "*"; to: "stategreenToRight" NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce; duration: 1000 } } ] } Rectangle { id:rectred;width: 64;height: 64;color:"yellow";x: 20;y:400; MouseArea { anchors.fill: parent; onClicked: rectred.state = 'stateredToRight' } states: [ // In state 'stateredToRight', move red image to right 300 px State { name: "stateredToRight" PropertyChanges { target: imagegred; x: rectred.x + 300; y: rectred.y } } ] transitions: [ Transition { from: "*"; to: "stateredToRight" NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce; duration: 1000 } } ] } Image { id: imagegreen;x: 20;y:300;width: 64;height: 64;source: "red.png" } Image { id: imagegred;x: 20;y:400;width: 64;height: 64;source: "green.png" } }
}@
-
Thank you very much "xenotrax" , the solution works fine for me .