Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Call for Presentations - Qt World Summit

    Hint about transitions

    QML and Qt Quick
    2
    3
    771
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • _
      _Mark_ last edited by

      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!

      1 Reply Last reply Reply Quote 0
      • p3c0
        p3c0 Moderators last edited by

        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.

        157

        1 Reply Last reply Reply Quote 0
        • _
          _Mark_ last edited by

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

          1 Reply Last reply Reply Quote 0
          • First post
            Last post