There is a button, on the button 3 images are attached. That is, the button changes its appearance by events. By hovering the cursor, by clicking and by the way the cursor goes beyond the button. And I need the image (that is, the background on the button) to change depending on the event, only smoothly. That is, by pointing the cursor, he smoothly changed his background to another image and also by pressing the button smoothly the image should change to another.

I made the animation with gradients, I thought it would help, however, he swears that I want to push the image into a property (not into a gradient property).

I fix the project itself with images

I honestly try myself, but it does not work. On Qt Widgets I wrote this project a long time ago, but the customer asks for beauty and animation.

Here is the code, it is very simple:

 Button { id: btnAnim width: 250 height: 100 anchors.centerIn: parent text: "Anim button " //самое костыльное позиционирование текста style: ButtonStyle { background: Image { fillMode: Image.PreserveAspectFit source: { control.pressed ? "btn_pressed.png" : (control.hovered ? "btn_hovered.png" : "btn_state.png") } } } }
  • Do you have to make a button with pictures? If you draw it with squares, then it is much easier to make animations, but a smooth change of the image can be realized only through a few controls with different pictures and variable transparency, you get a rather ugly code. - Yakov Eremin

1 answer 1

It turned out not so difficult. The entire area of ​​the button is not a Button {} and not even a Rectangle {}, but simply MouseArea {} in this block I declared 3 Image blocks {} in each block I mixed 3 images (default "button", induced button and pressed button), then in the state [] block, I put PropertyChanges {} and there as the target I choose which image and transparency

In the trailer that's all. I attach the project myself

I hope someone will help and / or it will be interesting :) all good and successful projects :)