Button Animation



  • Hello everyone!
    I created a button, the button attached 3 images. I mean, the button changes its view (background) depending on events (when you hover the mouse, when you click on the button and when you move the cursor from the button). The change of the button’s background between events must be gradual.

    Project attached: Link

    Please, help :(



  • Hi, and welcome to the Qt forum! What exactly do you mean by "gradual change"? Do you want to animate the opacity of the image or the position (or something else)?



  • @Wieland said in Button Animation [NEED HELP]:

    Do you want to animate the opacity of the image or the position (or something else)?

    I mean opacity of the image. I have 3 images, any image should change gradual from one image to another image.



  • @razorqhex

    If understand you right, you want to make an animation, which will smoothly change your images, am i right?
    If it is so, i can advice you to try some tricks with opacity.
    More complex solution is to use shader animations or sprites.

    It will be great if you provide some more details about your aim.



  • @razorqhex

    You can make ParallelAnimation with opacity of images that changing.
    The one is hidding (1.0 -> 0.0), the other is appearing (0.0 -> 1.0).



  • @Roumed said in Button Animation:

    @razorqhex
    You can make ParallelAnimation with opacity of images that changing.
    The one is hidding (1.0 -> 0.0), the other is appearing (0.0 -> 1.0).

    I can not understand :( I'm done with the color, but I can not picture.
    There is a button or a rectangle, the button has a background - image. As you hover over the button, the background changes to a different image when pressed, the background changes to a different image

    Sorry from my bad English, I'm from Ukraine



  • Here is an example on how to use states and transitions for a simple button. Note that I used a MouseArea here, but it shouldn't be hard to adapt that to a QtQuick Controls Button component:

    MyButton.qml

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    
    MouseArea {
        id: button
    
        width: 200
        height: 50
    
        property string text : "Button"
    
        hoverEnabled: true
    
        Image{
            id: state_image
            anchors.fill: parent
            source: "qrc:/assets/btn_state.png"
        }
    
        Image{
            id: hovered_image
            anchors.fill: parent
            opacity: 0.0
            source: "qrc:/assets/btn_hovered.png"
        }
    
        Image {
            id: pressed_image
            anchors.fill: parent
            opacity: 0.0
            source: "qrc:/assets/btn_pressed.png"
        }
    
        Text {
            anchors.fill: parent
            text: button.text
            color: "black"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
        }
    
        states: [
            State {
                name: "PRESSED"
                when: button.containsPress
                PropertyChanges { target: hovered_image; opacity: 0.0 }
                PropertyChanges { target: pressed_image; opacity: 1.0 }
            },
            State {
                name: "HOVERED"
                when: button.containsMouse
                PropertyChanges { target: hovered_image; opacity: 1.0 }
                PropertyChanges { target: pressed_image; opacity: 0.0 }
            }
        ]
    
        transitions: [
            Transition {
                NumberAnimation { properties: "opacity";  duration: 200}
            }
        ]
    }
    

    main.qml

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
        color: "black"
    
    
        MyButton {
            anchors.centerIn: parent
            text: "Hello"
            onClicked: console.log("clicked")
        }
    }
    ``


  • @Wieland said in Button Animation:

    Here is an example on how to use states and transitions for a simple button.

    Yes! YES!! YES!!! It's WORKING!!! Thank you very much!!! 7 days I could not solve this problem. Thank you so so much :)



  • @razorqhex Great to hear that :) Please mark the thread as solved (see: https://forum.qt.io/topic/71830).


Log in to reply
 

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