Animating QStackedWidget

[ephe]

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!

[andre]

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.

[ephe]

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.