Animating Qt widgets? [SOLVED]
-
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? -
Hi,
For Example 1, "this":http://developer.nokia.com/community/wiki/Extending_QStackedWidget_for_sliding_page_animations_in_Qt might be useful.
-
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? -
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.
-
Well, if you are willing to use QML instead then it would be a matter of few lines of code ;)
-
Can I use QML in C++ code?
If yes then what's the catch ;) -
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.2Rectangle {
width: 500
height: 500ListModel { 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.
-
Thank you very much!
This has been very helpful.