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

State change transition happens instantly instead of animating



  • import QtQuick 2.12
    import QtQuick.Controls 1.4
    import CustomQmlTypes 1.0
    
    CustomWindow {
        id: mainWindow
        flags: Qt.ToolTip | Qt.WA_TranslucentBackground | Qt.FramelessWindowHint
        color: "#00000000"
    
        Loader {
            anchors.fill: parent
            id: login
            source: "Login.qml"
        }
    
        Loader {
            anchors.fill: parent
            id: dashboard
            source: "Dashboard.qml"
        }
    
        StateGroup {
            id: screenStates
            state: mainWindow.isLoggedIn() ? "dashScreen" : "loginScreen"
            states: [
                State {
                    name: "loginScreen"
                    PropertyChanges { target: login; opacity: 1; enabled: true }
                    PropertyChanges { target: dashboard; opacity: 0; enabled: false }
                },
                State {
                    name: "dashScreen"
                    PropertyChanges { target: login; opacity: 0; enabled: false }
                    PropertyChanges { target: dashboard; opacity: 1; enabled: true }
                }
            ]
            transitions: [
                Transition {
                    from: "loginScreen"
                    to: "dashScreen"
                    ParallelAnimation {
                        OpacityAnimator { target: login; from: 1; to: 0; duration: 1000 }
                        OpacityAnimator { target: dashboard; from: 0; to: 1; duration: 1000 }
                    }
                },
                Transition {
                    from: "dashScreen"
                    to: "loginScreen"
                    ParallelAnimation {
                        OpacityAnimator { target: login; from: 0; to: 1; duration: 1000 }
                        OpacityAnimator { target: dashboard; from: 1; to: 0; duration: 1000 }
                    }
                }
            ]
        }
    }
    

    I have 2 screens and I'm trying to transition between them. When the state change happens, it's like transitions are ignored completely. In fact when I delete the lines related to transition, nothing changes. State change always happens instantly.

    Any ideas?



  • @tapirath Try replacing OpacityAnimator with NumberAnimation or use single transition with reversible set to true



  • @Yashpal said in State change transition happens instantly instead of animating:

    NumberAnimation

            transitions: [
                Transition {
                    reversible: true
                    from: "loginScreen"
                    to: "dashScreen"
                    ParallelAnimation {
                        OpacityAnimator { target: login; from: 1; to: 0; duration: 1000 }
                        OpacityAnimator { target: dashboard; from: 0; to: 1; duration: 1000 }
                    }
                }
            ]
    

    I've tried this. it didn't help.

    I didn't understand the solution about NumberAnimation. I need the change the opacity of 2 different targets that means I need 2 NumberAnimations no? How is that different?



  • @tapirath Try this, I was talking about changing the code to this.

    Transition {
                    from: "loginScreen"
                    to: "dashScreen"
                    reversible: true
    
                        NumberAnimation { targets: [login, dashboard]; property: "opacity";/* from: 1; to: 0;*/ duration: 1000 }
    
                }
    


  • That works thanks. Though I found that I was doing something else wrong.
    For future reference I'm going to document it here.

    I have 2 states "loginScreen" and "dashScreen". I triggered the state change via a button

    onClicked: screenStates.state = "dashboard"
    

    As can be seen I've put the wrong state name. What bothers me is that QT doesn't complain about it. It just somehow switches the state to "dashScreen" and doesn't even tell you that you have the wrong state name.


Log in to reply