Animating button press

[jech]

Hello, I have a very simple question. I'd like to animate a button press. I would like to zoom out and back the button (a rectangle with a text). I don't know how to start the animation. I could do it using states and a timer. But I do believe there is a simpler way of doing it.

[parancibia]

check this, is a simple sample, but is a good start

@
import Qt 4.7

Rectangle {
id: screen
width: 200
height: 200

Rectangle {
    id: redRect
    width: 100; height: 100
    color: "red"
    anchors.horizontalCenter: screen.horizontalCenter
    anchors.verticalCenter: screen.verticalCenter
    
    MouseArea { id: mouseArea; anchors.fill: parent }
    
    states: State {
        name: "pressed"; when: mouseArea.pressed
        PropertyChanges { target: redRect; scale: 1.2 }
    }
    
    transitions: Transition {
        NumberAnimation { properties: "scale"; duration: 200; easing.type: Easing.InOutQuad }
    }
}

}
@

[volvo14]

i want an animation button too but how ???

[parancibia]

[quote author="volvo14" date="1293134847"]i want an animation button too but how ???[/quote]

First create a Button.qml file in your solution with this code

@
import Qt 4.7

Item {
id: container
signal clicked
property string text

Rectangle {
    id: redRect
    width: container.width
    height: container.height
    color: "red"

    MouseArea {
        id: mouseArea;
        anchors.fill: parent
        onClicked: {
            container.clicked();
        }
    }

    Text {
        color: "#fff"
        anchors.centerIn: redRect
        font.pixelSize: 12
        text: container.text
    }

    states: State {
        name: "pressed"; when: mouseArea.pressed
        PropertyChanges { target: redRect; scale: 1.2 }
    }

    transitions: Transition {
        NumberAnimation { properties: "scale"; duration: 200; easing.type: Easing.InOutQuad }
    }
}

}
@

Then, create a instance of the button in your solution

@
import Qt 4.7

Rectangle {
id: screen
width: 200
height: 200

Button {
    width: 100;
    height: 25;
    text: 'Hello World';
    anchors.horizontalCenter: screen.horizontalCenter;
    anchors.verticalCenter: screen.verticalCenter;
}

}
@

For more information check this "article":http://doc.qt.nokia.com/4.7-snapshot/qml-extending-types.html

[xsacha]

@scale: loc.pressed ? 0.5 : 1.0
Behavior on scale { NumberAnimation {duration: 500 } }
MouseArea { id: loc; anchors.fill: parent }@

This is the simplest way. It will just quickly add animated zoom on click to your existing rectangle/button.

Don't really have to worry about states and so on unless you're doing more with the MouseArea.

[jech]

The problem with your examples is that the button is only animated when it is held. Unfortunately this doesn't work on Windows 7 tablet PC at all, because long press is treated like a right mouse click and not registered.

The only working solution I found is this:

file Button.qml

@import Qt 4.7

Item {
id: container
signal clicked
property string text

Rectangle {
    id: buttonRectangle
    width: container.width
    height: container.height
    color: "red"

    MouseArea {
        id: mouseArea;
        anchors.fill: parent
        onClicked: {
            buttonRectangle.state = "pressed"
            stateTimer.start()            
            container.clicked()
        }
    }

    Text {
        color: "#fff"
        anchors.centerIn: buttonRectangle
        font.pixelSize: 12
        text: container.text
    }

    states: State {
        name: "pressed"
        PropertyChanges { target: buttonRectangle; scale: 0.7 }
    }

    Timer {
        id: stateTimer
        interval: 200;
        repeat: false
        onTriggered: buttonRectangle.state = 'State0'
    }

    transitions: Transition {
        NumberAnimation { properties: "scale"; duration: 200; easing.type: Easing.InOutQuad }
    }
}

}@

But I do believe there should be an easier way to implement this behavior of the button.