Animating QStackedWidget



  • I've created a main menu in QML:

    @
    import QtQuick 1.0

    Rectangle {
    id: menu
    state: "MAIN_MENU_SHOWN"

    Rectangle
    {
        id: topLeftRect
        x: 100
        y: 100
        width: 100
        height: 100
        color: "red"
        radius: 6
        MouseArea { id: mousearea1; width: 100; height: 100; anchors.rightMargin: 0;anchors.fill: parent; onClicked: menu.state = "MAIN_MENU_HIDDEN"}
    }
    
    Rectangle
    {
        id: topRightRect
        width: 100
        height: 100
        color: "blue"
        x: 350; y: 100
        radius: 6
        MouseArea {anchors.fill: parent; onClicked: menu.state = "MAIN_MENU_HIDDEN"}
    }
    
    Rectangle
    {
        id: bottomLeftRect
        width: 100
        height: 100
        color: "green"
        x: 100; y: 250
        radius: 6
        MouseArea {anchors.fill: parent; onClicked: menu.state = "MAIN_MENU_HIDDEN"}
    }
    
    Rectangle
    {
        id: bottomRightRect
        width: 100
        height: 100
        color: "yellow"
        x: 350; y: 250
        radius: 6
                MouseArea { 
    

    id: mousearea2;
    anchors.fill: parent;
    onClicked:
    {
    menu.state = "MAIN_MENU_HIDDEN"
    mainmenu.GoToPanel();
    }
    }

    }
    
    states: [
        State
        {
            name: "MAIN_MENU_HIDDEN"
            PropertyChanges {
                target: bottomRightRect
                x: 624
                y: 467
                opacity: 0
            }
    
            PropertyChanges {
                target: topRightRect
                x: 624
                y: -86
                opacity: 0
            }
    
            PropertyChanges {
                target: bottomLeftRect
                x: -85
                y: 467
                opacity: 0
            }
    
            PropertyChanges {
                target: topLeftRect
                x: -85
                y: -86
                opacity: 0
            }
    
            PropertyChanges
            {
                target: menu
                opacity: 0
            }
    
        },
        State {
            name: "MAIN_MENU_SHOWN"
        }
    ]
    
    transitions:
    [
        Transition {
        from: "MAIN_MENU_SHOWN"; to: "MAIN_MENU_HIDDEN"
            ParallelAnimation
            {
            NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad; duration: 1000 }
            NumberAnimation { property: "opacity"; duration: 1000 }
            }
        },
    
        Transition {
        from: "MAIN_MENU_HIDDEN"; to: "MAIN_MENU_SHOWN"
            ParallelAnimation
            {
            NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad; duration: 1000 }
            NumberAnimation { property: "opacity"; duration: 1000 }
            }
        }
    ]
    

    }
    @

    It shows four rectangles which are animated so that they fade out while sliding to the corners. The whole main menu also fades out. This works fine.

    Now I want to show the underlying widget. It should seem as it is fading in.

    I added the main menu in my C++ code like this:
    @
    QDeclarativeView* view = new QDeclarativeView();
    view->rootContext()->setContextProperty("mainmenu", this);

    view->setSource(QUrl("qrc:/qml/MainMenu.qml"));
    
    QVBoxLayout* poLayout = new QVBoxLayout();
    poLayout->addWidget(view);
    setLayout(poLayout);
    

    @
    It is added in a QStackedWidget.

    When the bottom right rectangle is clicked, the new panel should be shown. @GoToPanel@ calls
    @
    m_poStackedWidget->addWidget(poWidget);
    poWidget->setProperty("opacity", 0);
    m_poStackedWidget->setCurrentWidget(poWidget);
    QGraphicsOpacityEffect *effect = new QGraphicsOpacityEffect(poWidget);
    poWidget->setGraphicsEffect(effect);
    QPropertyAnimation *animation = new QPropertyAnimation(effect, "opacity", this);
    animation->setDuration(1000);
    animation->setStartValue(0);
    animation->setEndValue(1);
    animation->start();
    @

    The problem is that the QStackedWidget immediately adds the new widget so the main menu animation is not shown anymore. I would like that the main menu with the four buttons fades out and the new panel gets more and more visible.

    I'm new to Qt, so I would be grateful if you could tell me how I could realize that. I'm not sure if I should do everything in QML or if I should mix QML and C++ for this problem. I have only created the main menu in QML, the rest of the panels are written in C++.

    Thank you!



  • Doing animations and fade in/fade out effects with widgets is hard. That's why QML/Quick was developed in the first place. I don't know what gui you are creating with your widgets based part, if if that is not too complicated, I would try to keep your whole GUI in QML.

    In this case, your add a page to your stacked widget, and then switch to it. That makes your QDeclarativeView (with everything on it) disapear immediately. If you want to appear over the QML, you probably should not use a QStackedWidget, but instead should manually position the new widget to overlap with the QDeclarativeView, and then change its opacity. I did not try this myself though.



  • Thank you very much for your reply! I'll try that!

    My problem is that I've already got a lot of panels with QWidgets. They provide a lot of useful functionality which I would like to continue to use. Since there are not many "QML widgets" available I don't know how easy it is to change to QML. For example I'd like to use the validators, setInputMask, setPlaceholderText, etc. for the text input fields.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.