Changing replaceEnter/Exit animation dynamically

[BikashRDas]

Hi,
Is there anyway to change the replaceEnter/Exit Transition animation dynamically depending on the next QML file to be loaded in the stack view.
Situation:
I have a Centre QML file having 4 buttons on the 4 sides of the screen. There are other 4 QML files namely Top, Bottm, Right and Left. On press of top button on the Centre QML the Top qml file should transitioned from top-to-bottom and replace the centre one. Similarly on press of left button on the centre QML the left QML should enter there display area from left to right and replace the centre one.

I tried using replaceEnter/Exit property. But not able to understand how to change it dynamically depending on the next QML to be displayed.

Please let me know, if there is any way of doing the same.

Thanks in advance.

Bikash

[ODБOï]

hi

@BikashRDas said in Changing replaceEnter/Exit animation dynamically:

how to change it dynamically depending on the next QML to be displayed.

 StackView {
        id: stackview
 }

 Transition {
         id: anim
          ...
  }

Button{
 onClicked :  stackview.pushEnter  = anim
}

@BikashRDas said in Changing replaceEnter/Exit animation dynamically:

I have a Centre QML file having 4 buttons on the 4 sides of the screen. There are other 4 QML files namely Top, Bottm, Right and Left. On press of top button on the Centre QML the Top qml file should transitioned from top-to-bottom and replace the centre one. Similarly on press of left button on the centre QML the left QML should enter there display area from left to right and replace the centre one.

example:
( I only did top and bottom for this example, you can complete it by adding Transitions for left and right animating x property )

Window {
    id:root
    visible: true
    width: 640
    height: 480


    Component {
        id: topItem
        Rectangle{
            color: "lightgrey"
            height: stackview.height
            width: stackview.width
            Text {
                anchors.centerIn: parent
                text: qsTr("Top Item")
            }
        }
    }

    Component {
        id: bottomItem
        Rectangle{
            color: "lightblue"
            height: stackview.height
            width: stackview.width
            Text {
                anchors.centerIn: parent
                text: qsTr("bottom Item")
            }
        }
    }

    Component {
        id: leftItem
        Rectangle{
            color: "orange"
            height: stackview.height
            width: stackview.width
            Text {
                anchors.centerIn: parent
                text: qsTr("Left Item")
            }
        }
    }

    Component {
        id: rightItem
        Rectangle{
            color: "blue"
            height: stackview.height
            width: stackview.width
            Text {
                anchors.centerIn: parent
                text: qsTr("Right Item")
            }
        }
    }



    StackView {
        id: stackview
        anchors{
            top: parent.top
            bottom: parent.bottom
            left:parent.left
            right: menuButtons.left

        }
        initialItem: initialView
        //pushEnter:
        //define enter from top
        Transition {
            id: animFromTop
            PropertyAnimation {
                property: "y"
                from: -root.height
                to:   0
                duration: 200
            }
        }
        //define enter from bottom
        Transition {
            id: animFromBottom
            PropertyAnimation {
                property: "y"
                from: root.height
                to:   0
                duration: 200
            }
        }
        // define enter from left
        //todo
        // define enter from right
        //todo



        //pushExit: // assign in the button onClicked handler
        // define exit to bottom
        Transition {
            id:exitToBottom
            PropertyAnimation {
                property: "y"
                from: 0
                to:  root.height
                duration: 200
            }
        }
        // define exit to top
        Transition {
            id:exitToTop
            PropertyAnimation {
                property: "y"
                from: 0
                to:  -root.height
                duration: 200
            }
        }
        // define exit to Right
        //todo
        // define exit to Left
        //todo

    }



    Column{
        id: menuButtons
        anchors.right: parent.right
        height: parent.height

        Button{
            text: "Top"
            onClicked: {
                stackview.pushEnter  = animFromTop
                stackview.pushExit  = exitToBottom
                stackview.push(topItem)
            }
        }
        Button{
            text: "Bottom"
            onClicked: {
                stackview.pushEnter  = animFromBottom
                stackview.pushExit  = exitToTop
                stackview.push(bottomItem)
            }
        }
        Button{
            text: "Left"
            onClicked: {
                //todo
            }
        }
        Button{
            text: "Right"
            onClicked: {
                //todo
            }
        }
    }
}

[ODБOï]

hi

@BikashRDas said in Changing replaceEnter/Exit animation dynamically:

how to change it dynamically depending on the next QML to be displayed.

 StackView {
        id: stackview
 }

 Transition {
         id: anim
          ...
  }

Button{
 onClicked :  stackview.pushEnter  = anim
}

@BikashRDas said in Changing replaceEnter/Exit animation dynamically:

I have a Centre QML file having 4 buttons on the 4 sides of the screen. There are other 4 QML files namely Top, Bottm, Right and Left. On press of top button on the Centre QML the Top qml file should transitioned from top-to-bottom and replace the centre one. Similarly on press of left button on the centre QML the left QML should enter there display area from left to right and replace the centre one.

example:
( I only did top and bottom for this example, you can complete it by adding Transitions for left and right animating x property )

Window {
    id:root
    visible: true
    width: 640
    height: 480


    Component {
        id: topItem
        Rectangle{
            color: "lightgrey"
            height: stackview.height
            width: stackview.width
            Text {
                anchors.centerIn: parent
                text: qsTr("Top Item")
            }
        }
    }

    Component {
        id: bottomItem
        Rectangle{
            color: "lightblue"
            height: stackview.height
            width: stackview.width
            Text {
                anchors.centerIn: parent
                text: qsTr("bottom Item")
            }
        }
    }

    Component {
        id: leftItem
        Rectangle{
            color: "orange"
            height: stackview.height
            width: stackview.width
            Text {
                anchors.centerIn: parent
                text: qsTr("Left Item")
            }
        }
    }

    Component {
        id: rightItem
        Rectangle{
            color: "blue"
            height: stackview.height
            width: stackview.width
            Text {
                anchors.centerIn: parent
                text: qsTr("Right Item")
            }
        }
    }



    StackView {
        id: stackview
        anchors{
            top: parent.top
            bottom: parent.bottom
            left:parent.left
            right: menuButtons.left

        }
        initialItem: initialView
        //pushEnter:
        //define enter from top
        Transition {
            id: animFromTop
            PropertyAnimation {
                property: "y"
                from: -root.height
                to:   0
                duration: 200
            }
        }
        //define enter from bottom
        Transition {
            id: animFromBottom
            PropertyAnimation {
                property: "y"
                from: root.height
                to:   0
                duration: 200
            }
        }
        // define enter from left
        //todo
        // define enter from right
        //todo



        //pushExit: // assign in the button onClicked handler
        // define exit to bottom
        Transition {
            id:exitToBottom
            PropertyAnimation {
                property: "y"
                from: 0
                to:  root.height
                duration: 200
            }
        }
        // define exit to top
        Transition {
            id:exitToTop
            PropertyAnimation {
                property: "y"
                from: 0
                to:  -root.height
                duration: 200
            }
        }
        // define exit to Right
        //todo
        // define exit to Left
        //todo

    }



    Column{
        id: menuButtons
        anchors.right: parent.right
        height: parent.height

        Button{
            text: "Top"
            onClicked: {
                stackview.pushEnter  = animFromTop
                stackview.pushExit  = exitToBottom
                stackview.push(topItem)
            }
        }
        Button{
            text: "Bottom"
            onClicked: {
                stackview.pushEnter  = animFromBottom
                stackview.pushExit  = exitToTop
                stackview.push(bottomItem)
            }
        }
        Button{
            text: "Left"
            onClicked: {
                //todo
            }
        }
        Button{
            text: "Right"
            onClicked: {
                //todo
            }
        }
    }
}

[BikashRDas]

Thanks a lot @LeLev .