Button Animation

razorqhex

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 :(

? Offline

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)?

razorqhex

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

Roumed

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

Roumed

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

razorqhex

@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

? Offline

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")
    }
}
``

razorqhex

@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 :)

? Offline

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