Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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