Animating button press



  • 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.



  • 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 }
        }
    }
    

    }
    @



  • i want an animation button too but how ???



  • [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



  • @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.



  • 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.


Log in to reply
 

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