Stackview replace qml after button animation is completed

Question

i am building an interface with QtQuick2 by using qmls. I also created a few buttons on home page and i am trying to change qmls by using loader after some animation is played. I have a stackview like this:

StackView {
    id: stackViewTool
    anchors {
        left: parent.left
        right: parent.right
        top: parent.top
        bottom: bottomBar.top
    }
    initialItem: initializePage
    
}

and i also added "initializePage" variable as property

property string initializePage : "HomePage.qml"

here is how i use my button to change qml on some other pages.

    SimpleButton {
        id:homeClicked
        Image{
            id: homeID
            source:"/images/barHome.png"
        }
        onClicked: {
            stackViewTool.replace(initializePage)
        }

    }

I want to add a animation to get the "pushing button" feeling. I want to change the button image first, and then i want to replace the qml. Here is the sequental animation i want to use. I want to have the animation like pushed and released, then change the qml.

            SequentialAnimation {
            id : homePressed
            PropertyAnimation {
                targets: [homeID]
                property: "source"
                to: "/images/pressedHome.png"
            }

              PauseAnimation {
                duration: 100
            }

              PropertyAnimation {
                  targets: [homeID]
                  property: "source"
                  to: "/images/barHome.png"
              }

              PauseAnimation {
                duration: 100
              }

        }

I tried to use " stackViewTool.replace(initializePage) " after the sequential animation but it did not work. I tried to add " Component.onCompleted: stackViewTool.replace(initializePage) " after 100ms pause snippet(last step of animation) but it did not work. What can i do for create something like i wanted? Answers are appreciated.

Answer 1

1. You can use the onFinished | onStarted signal handlers.
2. You can use ScriptAction at the end of the animation:

SequentialAnimation
{
    id: homePressed
    PropertyAnimation {
        targets: [homeID]
        property: "source"
        to: "/images/pressedHome.png"
    }

    PauseAnimation {
        duration: 100
    }

    PropertyAnimation {
        targets: [homeID]
        property: "source"
        to: "/images/barHome.png"
    }

    PauseAnimation {
        duration: 100
    }
    ScriptAction{
        script: function(){stackViewTool.replace(initializePage)}

   }
}