Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Animating Qt widgets? [SOLVED]
Forum Updated to NodeBB v4.3 + New Features

Animating Qt widgets? [SOLVED]

Scheduled Pinned Locked Moved General and Desktop
8 Posts 2 Posters 2.8k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • CAD_codingC Offline
    CAD_codingC Offline
    CAD_coding
    wrote on last edited by
    #1

    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?

    1 Reply Last reply
    0
    • p3c0P Offline
      p3c0P Offline
      p3c0
      Moderators
      wrote on last edited by
      #2

      Hi,

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

      157

      1 Reply Last reply
      0
      • CAD_codingC Offline
        CAD_codingC Offline
        CAD_coding
        wrote on last edited by
        #3

        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?

        1 Reply Last reply
        0
        • p3c0P Offline
          p3c0P Offline
          p3c0
          Moderators
          wrote on last edited by
          #4

          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.

          157

          1 Reply Last reply
          0
          • p3c0P Offline
            p3c0P Offline
            p3c0
            Moderators
            wrote on last edited by
            #5

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

            157

            1 Reply Last reply
            0
            • CAD_codingC Offline
              CAD_codingC Offline
              CAD_coding
              wrote on last edited by
              #6

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

              1 Reply Last reply
              0
              • p3c0P Offline
                p3c0P Offline
                p3c0
                Moderators
                wrote on last edited by
                #7

                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.

                157

                1 Reply Last reply
                0
                • CAD_codingC Offline
                  CAD_codingC Offline
                  CAD_coding
                  wrote on last edited by
                  #8

                  Thank you very much!
                  This has been very helpful.

                  1 Reply Last reply
                  0

                  • Login

                  • Login or register to search.
                  • First post
                    Last post
                  0
                  • Categories
                  • Recent
                  • Tags
                  • Popular
                  • Users
                  • Groups
                  • Search
                  • Get Qt Extensions
                  • Unsolved