[SOLVED] Parallel Animation and property change in sequence
-
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 }
@
-
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.
-
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: trueonStopped: { 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
}
@