How to create an animated button widget of complex shape?
-
I'm trying to implement a button that has a complex shape, 3 different states and transition animations (example picture below). I'm not really familiar with the framework so far and am still a little bit overwhelmed by all the tools and libraries. That's why I wanted to ask for a hint in the right direction here.
If you had to implement such a button to be used in a qt widgets application, what would be your approach? I'm not looking for a step by step guide but rather the general topics I'd have to look into here.
-
I'm trying to implement a button that has a complex shape, 3 different states and transition animations (example picture below). I'm not really familiar with the framework so far and am still a little bit overwhelmed by all the tools and libraries. That's why I wanted to ask for a hint in the right direction here.
If you had to implement such a button to be used in a qt widgets application, what would be your approach? I'm not looking for a step by step guide but rather the general topics I'd have to look into here.
@Hari-Seldon
Make a custom
QWidgetwith 5 custom buttons. I guess just oneQPushButtonwont be enough because you need 5 different zones to click on. Last image is mouse hovering over top left button, right? So you could add some fade-In animations to get from 1st state to 2nd...@Hari-Seldon said in How to create an animated button widget of complex shape?:
3 different states and transition animations
Just 3? Or should it be possible that every button on the outside is growing and turning red? Where should the click happen? On each part or just one button?
-
@Pl45m4 Thank you for the answer. So far I was struggling to find a sensible way to implement these weird shapes and make the grow/shrink animations. After reading your answer Ill probably try the 5 buttons and from there, figure out how to make it look good.
Just 3? Or should it be possible that every button on the outside is growing and turning red?
Yeah, you are right, its more than 3 states. I actually meant 3 categories of states: inactive, focused and selecting one of the options (including the center one).
Where should the click happen? On each part or just one button?
Right now only the design and the states are set. I'll probably determine which event triggers which state transition by trying out what feels natural (using keyboard and mouse). My initial thought was to use hover to display all options, pressing and moving the mouse will change the selection and releasing confirms it but I might also try keyboard inputs.
