Need help in qml



  • hi i am on a hello world application with some states and transitions. what i want to do is when i click hello world text, the text should animate to the bottom and when i click again, it should animate back to tis original position. The problem is it does not animate anywhere when i click on it. here is my code

    @
    import Qt 4.7

    Rectangle {
    id: page
    width: 500
    height: 200
    color: "lightgray";

    Text {
        id: helloText
        text: "Hello World!"
        //x: 66
        y: 60
        //text: "Hello World"
        anchors.horizontalCenter: page.horizontalCenter
        //anchors.verticalCenter: page.verticalCenter
        font.pointSize: 24
        font.bold: true
    
        MouseArea { id: mouseAreaDown; anchors.fill: parent; onClicked: helloText.state = "down" }
      MouseArea { id: mouseAreaUp; anchors.fill: parent; onClicked: helloText.state = "up" }
    
    
        states: [
            State {
                name: "down"
                //when: mouseArea.pressed == true
                PropertyChanges {
                    target: helloText
                    y: 160
                    //rotation: 180
                    color: "blue"
                }
            },
            State {
                name: "up"
                PropertyChanges {
                    target: helloText
                    y: 60
                    color: "black"
                }
            }
        ]
    
    
        transitions: [
            Transition {
                from: "*"
                to: "down"
                //reversible: true
                ParallelAnimation {
                    NumberAnimation { properties: "y"; duration: 1000; easing.type: Easing.InOutQuad }
                    ColorAnimation { duration: 500 }
    
                }
            },
            Transition {
                from: "*"
                to: "up"
                //reversible: true
                ParallelAnimation {
                    NumberAnimation { properties: "y"; duration: 1000; easing.type: Easing.InOutQuad }
                    ColorAnimation { duration: 500 }
    
                }
            }
        ]
    }
    
    Grid {
        id: colorPicker
        x: 4
        anchors.bottom: page.bottom
        anchors.bottomMargin: 4
        rows: 2; columns: 3; spacing: 3
    
        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
    }
    

    }
    @

    [edit: Code highlighted properly / Denis Kormalev]



  • I am not sure if this solves your problem, but you don't need to define Transitions for states from and to if you intend to do the same reverse transition for the state changes. Also, I could imagine defining two from "*" states is causing some issues.

    So you can remove the latter Transition definition. It might solve your issue too.



  • Some suggestions that can help you:

    • Set the initial state. For example, set the initial state to "up".
    • You're using 2 mouse areas, one on top of the other. You don't need 2 mouse areas to achieve what you want, 1 is enough. You could try something to toggle state, for example:

    @
    onClicked: {
    if (helloText.state == "up")
    helloText.state = "down"
    else
    helloText.state = "up"
    }

    @

    or in a more compact (and more beautiful, IMHO) form:

    @
    onClicked: {
    helloText.state = (helloText.state == "up" ? "down" : "up"
    }
    @

    • as Kypeli said, you don't need 2 transitions. One reversible is enough (as it would be from "" to "", you don't need to set these parameters):

    @
    transitions: [
    Transition {
    reversible: true
    ParallelAnimation {
    NumberAnimation { properties: "y"; duration: 1000; easing.type: Easing.InOutQuad }
    ColorAnimation { duration: 500 }
    }
    }
    ]
    @



  • BTW, doforumda, use the @ characters around the code in your post, in order to format it correctly :-)


Log in to reply
 

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