[SOLVED] Parallel Animation and property change in sequence

marcin100

Hello,

I got stuck on what seems like a simple issue (maybe it is just my lack of experience). I have a screen fadeOut and fadeIn ParallelAnimations set up (shown below).
When a button is clicked I would like to run things in this order:

fadeOut animation - removes the current screen from view
When fadeOut completes, re-assign new qml file source to the screen via Loader element. ( I got this part working)
start the fadeIn animation.

This seems straight forward, but I have not been able to wait until step 1 above completes. Any attempts of while (!fadeOut.stopped()) {}, end up locking up the app.

There must be a clean QML way of doing this... I hope.

@
ParallelAnimation
{
id: fadeOut
running: false
NumberAnimation { target: screen; property: "opacity"; to: 0; duration: 300; easing.type: Easing.InQuad }
NumberAnimation { target: screen; property: "scale"; to: 0; duration: 300; easing.type: Easing.InQuad }
alwaysRunToEnd: true

}

ParallelAnimation
{
    id: fadeIn
    running: false
    NumberAnimation { target: screen; property: "opacity"; to: 1; duration: 300; easing.type: Easing.InQuad }
    NumberAnimation { target: screen; property: "scale"; to: 1; duration: 300; easing.type: Easing.InQuad }
    alwaysRunToEnd: true
}

@

p3c0

Hi,

Use onStopped signal handler. In QML every signal has its corresponding "signal-handlers":http://doc.qt.io/qt-5/qtqml-syntax-signals.html#property-change-signal-handlers.

marcin100

Thanks!

Here is what I did and it works perfectly.

@
ParallelAnimation
{
id: fadeOut
running: false
NumberAnimation { target: screen; property: "opacity"; to: 0; duration: 300; easing.type: Easing.InQuad }
NumberAnimation { target: screen; property: "scale"; to: 0; duration: 300; easing.type: Easing.InQuad }
alwaysRunToEnd: true

    onStopped:
    {
        buttonMenu.updateSource()   // source update is done by Loader in separate qml file
        fadeIn.start()
    }

}

ParallelAnimation
{
id: fadeIn
running: false
NumberAnimation { target: screen; property: "opacity"; to: 1; duration: 300; easing.type: Easing.InQuad }
NumberAnimation { target: screen; property: "scale"; to: 1; duration: 300; easing.type: Easing.InQuad }
alwaysRunToEnd: true
}
@