Solved 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.
-
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.
-
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 imageSorry 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).