[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:

    1. fadeOut animation - removes the current screen from view
    2. When fadeOut completes, re-assign new qml file source to the screen via Loader element. ( I got this part working)
    3. 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
    }
    

    @


  • Moderators

    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: 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
    }
    @


Log in to reply
 

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