Solved 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.