Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Changing replaceEnter/Exit animation dynamically



  • 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



  • 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
                }
            }
        }
    }
    
    


  • 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
                }
            }
        }
    }
    
    


  • Thanks a lot @LeLev .


Log in to reply