Animating Qt widgets? [SOLVED]

CAD_coding

Hello,

I would like to animate the Qt widgets in a window.
Example 1:
I have a QStackedWidget which contains 10 different pages.
I want to animate the change of pages in fashionable manner.
When the user clicks a button, the current page will "slide" to say left and the next page will enter from right side of the window similarly by sliding.
How do I do this?

Example 2:
There are 10X10 child frames in a grid pattern inside a parent frame.
One of the frame and all its contents disappear upon a SIGNAL, and the animation is such that all the remaining frames adjust to fill the gap.
How do I do this?

p3c0

Hi,

For Example 1, "this":http://developer.nokia.com/community/wiki/Extending_QStackedWidget_for_sliding_page_animations_in_Qt might be useful.

CAD_coding

Hey p3c0,

Thank you very much!
That is exactly what I was looking for.

And how do I animate as in case of example 2?
Is it advisable to use QPropertyAnimation in a similar way or is there a better way?

p3c0

Yes using QPropertyAnimation but could be a bit complicated as filling the gap means you will need to re-adjust the grid which will in turn affect the position/sizes of all the frames in it. But could be a nice challenge accomplishing it.

p3c0

Well, if you are willing to use QML instead then it would be a matter of few lines of code ;)

CAD_coding

Can I use QML in C++ code?
If yes then what's the catch ;)

p3c0

Yes you can load QML files in C++ using "QQuickWidet":http://doc.qt.io/qt-5/qquickwidget.html (since Qt 5.3).
You can find an example on that page on how to load it.
Now, I don't know what exactly the frames (that you mentioned) are, I can't probably tell much more about how to fit it.
In QML, "GridView":http://doc.qt.io/qt-5/qml-qtquick-gridview.html can be used for viewing items in grid type. You can pass models, QML based or C++ (which inherits QAbstractItemModel), to GridView which will then display it in that fashion.
As an example try the following QML code:
@
import QtQuick 2.4
import QtQuick.Controls 1.2

Rectangle {
width: 500
height: 500

ListModel {
    id: listmodel
}

GridView {
    id: grid
    anchors.fill: parent
    model: listmodel
    delegate: Rectangle {
        width: 100
        height: 100
        color: "lightgray"
        border.color: "gray"
        Text {
            text: name;
            anchors.centerIn: parent
        }
    }

    removeDisplaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.OutBounce }
    }
}

Button {
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    text: "Click"
    onClicked: {
        grid.model.remove(Math.floor(Math.random() * grid.model.count) + 0)
    }
}

Component.onCompleted: {
    for(var a=0;a<25;a++) {
        listmodel.append({"name": "Item"+a})
    }
}

}
@

Clicking on button will remove the Items (say frames) randomly and the view automatically gets adjusted.

CAD_coding

Thank you very much!
This has been very helpful.