Search code examples
qtqwidgetqpushbuttonqpropertyanimation

Tutorial for QPushButton graphics


Does anyone know some good tutorial to learn how to do some graphics/animation/design for the Qt QPushButton?

I've been looking for one suitable for me, but I find none really interesting or well explained.

I've read the documentation, but I want some application and some example. Plus it can be a good source of inspiration.


Solution

  • So when you are looking at a QPushButton, or any QWidget for that matter, there are a ton of things you can animate on it.

    And anything that isn't an explicit property, you can make a wrapper for it and make a property of it.

    You first should examine all the properties on the List of all members, including inherited members for any class.

    http://qt-project.org/doc/qt-5/qwidget-members.html

    http://qt-project.org/doc/qt-5/qpropertyanimation.html

    Some ones that are nice for animations include:

    pos() / move()
    
    size() / resize()
    

    And then if you add on a QGraphicsEffect, and you animate a property of the effect, you can get some neat things, too.

    And then you combine some of the animations to start when a particular event happens, like the first time it is shown, or when it is hiding, or when it is hovered/entered, or when it is left, you can also get some neat effects.

    And if you put the animation on a loop instead of on a single shot, or do a parallel animation you can get a great effect.

    Mix in some delayed timing and multiple animations getting launched with easing curves and you get some classy interactions.

    If you subclass your paintEvent, you can put in any sort of variable that you change over time, and send it to an QPropertyAnimation, too.

    http://qt-project.org/doc/qt-5.0/qtcore/properties.html

    One of the best places to learn about what can be done with animations are the Qt examples.

    http://qt-project.org/doc/qt-5/examples-animation.html

    http://qt-project.org/doc/qt-5/qtwidgets-animation-animatedtiles-example.html

    The Animated Tile's example is fantastic and is a great place to start.

    If you don't need animation, but just a simple hover styling change, setting the stylesheet is a much simpler way to go to achieve this effect.

    Hope that helps.