Hint about transitions
-
Hello,
my application is composed of a dozen of full-screen pages (rectangles which contain other objects).
In background there is a C++ class which receives data from the fields, let's say the number of the new page to be displayed.I defined a state for each page, in order to enable a transition but the codes looks ugly:
@
states: [
State {
name: "category"
PropertyChanges { target: pageCategory; opacity: 1.0; z: 1 }
PropertyChanges { target: pageWalk; opacity: 0.0; z: 0 }
PropertyChanges { target: pageOptions; opacity: 0.0; z: 0 }
PropertyChanges { target: pagePaused; opacity: 0.0; z: 0 }
PropertyChanges { target: root; visible: true }
},
State {
name: "walk"
PropertyChanges { target: pageCategory; opacity: 0.0; z: 0 }
PropertyChanges { target: pageWalk; opacity: 1.0; z: 1 }
PropertyChanges { target: pageOptions; opacity: 0.0; z: 0 }
PropertyChanges { target: pagePaused; opacity: 0.0; z: 0 }
PropertyChanges { target: root; visible: true }
},
State {
name: "options"
PropertyChanges { target: pageCategory; opacity: 0.0; z: 0 }
PropertyChanges { target: pageWalk; opacity: 0.0; z: 0 }
PropertyChanges { target: pageOptions; opacity: 1.0; z: 1 }
PropertyChanges { target: pagePaused; opacity: 0.0; z: 0 }
PropertyChanges { target: root; visible: true }
},
State {
name: "paused"
PropertyChanges { target: pageCategory; opacity: 0.0; z: 0 }
PropertyChanges { target: pageWalk; opacity: 0.0; z: 0 }
PropertyChanges { target: pageOptions; opacity: 0.0; z: 0 }
PropertyChanges { target: pagePaused; opacity: 1.0; z: 1 }
PropertyChanges { target: root; visible: true }
},
State {
name: "run"
PropertyChanges { target: root; visible: false }
}] transitions: [ Transition { PropertyAnimation { property: "opacity"; duration: 1000; easing.type: Easing.InOutQuad } } ]
@
I wouldn't insert all the others pages to set their opacity and z parameters... Is there a way to fading into a new page just selecting the new one?
Here I wrote few pages, in the real application there are a lot more....
Thanks! -
Hi,
Why don't you use "StackView":http://qt-project.org/doc/qt-5/qml-qtquick-controls-stackview.html ? It provides transition when new page is loaded.