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!


  • Moderators

    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.



  • Because I didn't know it :-)
    It seems it fits perfectly for my needs, thanks.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.