Qt GUI animations?

Question

A bit of a peculiar question but I recently discovered that there is a way to make animations for Qt GUIs. I really want to find a way to have my main window expand into a larger one, but rather instead of having it instantly resized(which is rather simple to do) I'd like to see it expand in sort of an animation. More importantly, what is the proper way of doing such animations?

I am attaching 2 pictures showing the initial window and the final expanded one (or at least how I envision it).

----

(it needs to expand gradually, animation wise, into the following)

Thank you all, in advance.

I tried having it it resized with a while loop and thread wait but it looked rather choppy and was rather rubbish if I have to be absolutely honest... — Joe Carr, Dec 12 '16 at 08:44

score 1 · Answer 1 · edited Oct 01 '21 at 18:30

1

In case you are not using QML, you need to use some sort of a trick with decrementing/incrementing size of the widget in a loop triggered by event of your own. Easing curve can help you to achieve smooth effect https://doc.qt.io/qt-5/qeasingcurve.html.

edited Oct 01 '21 at 18:30

marc_s

732,580
175
1,330
1,459

answered Dec 12 '16 at 07:45

LukasT

441
4
15

I am using QML. :) – Joe Carr Dec 12 '16 at 08:14
Also, I had a look at this before I wrote the question and was not really the thing I was looking for. – Joe Carr Dec 12 '16 at 08:21

score 1 · Accepted Answer · answered Dec 12 '16 at 19:58

Since you are using QML, that makes this rather simple for you. The easiest route would be to use a behavior combined with a smoothed animation. Trivial example below.

ApplicationWindow {
    width: base.size
    height: base.size
    Item {
        id: base
        property real size: 400
        Behavior on size {
            SmoothedAnimation {
                duration: 1000
            }
        }
        anchors.fill: parent
        MouseArea {
            anchors.fill: parent
            onClicked: base.size += 100
        }
    }
}

Qt GUI animations?

----

2 Answers2