[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.1

    Window
    {
    visible: true
    width: 709
    height: 1024

    Rectangle {
        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 .


Log in to reply
 

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