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.