Need help in qml

doforumda

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]

Kypeli

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.

anselmolsm

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 }
}
}
]
@

anselmolsm

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