Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Changing replaceEnter/Exit animation dynamically
Forum Updated to NodeBB v4.3 + New Features

Changing replaceEnter/Exit animation dynamically

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 335 Views 1 Watching
  • 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.
  • B Offline
    B Offline
    BikashRDas
    wrote on last edited by
    #1

    Hi,
    Is there anyway to change the replaceEnter/Exit Transition animation dynamically depending on the next QML file to be loaded in the stack view.
    Situation:
    I have a Centre QML file having 4 buttons on the 4 sides of the screen. There are other 4 QML files namely Top, Bottm, Right and Left. On press of top button on the Centre QML the Top qml file should transitioned from top-to-bottom and replace the centre one. Similarly on press of left button on the centre QML the left QML should enter there display area from left to right and replace the centre one.

    I tried using replaceEnter/Exit property. But not able to understand how to change it dynamically depending on the next QML to be displayed.

    Please let me know, if there is any way of doing the same.

    Thanks in advance.

    Bikash

    ODБOïO 1 Reply Last reply
    0
    • B BikashRDas

      Hi,
      Is there anyway to change the replaceEnter/Exit Transition animation dynamically depending on the next QML file to be loaded in the stack view.
      Situation:
      I have a Centre QML file having 4 buttons on the 4 sides of the screen. There are other 4 QML files namely Top, Bottm, Right and Left. On press of top button on the Centre QML the Top qml file should transitioned from top-to-bottom and replace the centre one. Similarly on press of left button on the centre QML the left QML should enter there display area from left to right and replace the centre one.

      I tried using replaceEnter/Exit property. But not able to understand how to change it dynamically depending on the next QML to be displayed.

      Please let me know, if there is any way of doing the same.

      Thanks in advance.

      Bikash

      ODБOïO Offline
      ODБOïO Offline
      ODБOï
      wrote on last edited by ODБOï
      #2

      hi

      @BikashRDas said in Changing replaceEnter/Exit animation dynamically:

      how to change it dynamically depending on the next QML to be displayed.

       StackView {
              id: stackview
       }
      
       Transition {
               id: anim
                ...
        }
      
      Button{
       onClicked :  stackview.pushEnter  = anim
      }
      
      

      @BikashRDas said in Changing replaceEnter/Exit animation dynamically:

      I have a Centre QML file having 4 buttons on the 4 sides of the screen. There are other 4 QML files namely Top, Bottm, Right and Left. On press of top button on the Centre QML the Top qml file should transitioned from top-to-bottom and replace the centre one. Similarly on press of left button on the centre QML the left QML should enter there display area from left to right and replace the centre one.

      example:
      ( I only did top and bottom for this example, you can complete it by adding Transitions for left and right animating x property )

      Window {
          id:root
          visible: true
          width: 640
          height: 480
      
      
          Component {
              id: topItem
              Rectangle{
                  color: "lightgrey"
                  height: stackview.height
                  width: stackview.width
                  Text {
                      anchors.centerIn: parent
                      text: qsTr("Top Item")
                  }
              }
          }
      
          Component {
              id: bottomItem
              Rectangle{
                  color: "lightblue"
                  height: stackview.height
                  width: stackview.width
                  Text {
                      anchors.centerIn: parent
                      text: qsTr("bottom Item")
                  }
              }
          }
      
          Component {
              id: leftItem
              Rectangle{
                  color: "orange"
                  height: stackview.height
                  width: stackview.width
                  Text {
                      anchors.centerIn: parent
                      text: qsTr("Left Item")
                  }
              }
          }
      
          Component {
              id: rightItem
              Rectangle{
                  color: "blue"
                  height: stackview.height
                  width: stackview.width
                  Text {
                      anchors.centerIn: parent
                      text: qsTr("Right Item")
                  }
              }
          }
      
      
      
          StackView {
              id: stackview
              anchors{
                  top: parent.top
                  bottom: parent.bottom
                  left:parent.left
                  right: menuButtons.left
      
              }
              initialItem: initialView
              //pushEnter:
              //define enter from top
              Transition {
                  id: animFromTop
                  PropertyAnimation {
                      property: "y"
                      from: -root.height
                      to:   0
                      duration: 200
                  }
              }
              //define enter from bottom
              Transition {
                  id: animFromBottom
                  PropertyAnimation {
                      property: "y"
                      from: root.height
                      to:   0
                      duration: 200
                  }
              }
              // define enter from left
              //todo
              // define enter from right
              //todo
      
      
      
              //pushExit: // assign in the button onClicked handler
              // define exit to bottom
              Transition {
                  id:exitToBottom
                  PropertyAnimation {
                      property: "y"
                      from: 0
                      to:  root.height
                      duration: 200
                  }
              }
              // define exit to top
              Transition {
                  id:exitToTop
                  PropertyAnimation {
                      property: "y"
                      from: 0
                      to:  -root.height
                      duration: 200
                  }
              }
              // define exit to Right
              //todo
              // define exit to Left
              //todo
      
          }
      
      
      
          Column{
              id: menuButtons
              anchors.right: parent.right
              height: parent.height
      
              Button{
                  text: "Top"
                  onClicked: {
                      stackview.pushEnter  = animFromTop
                      stackview.pushExit  = exitToBottom
                      stackview.push(topItem)
                  }
              }
              Button{
                  text: "Bottom"
                  onClicked: {
                      stackview.pushEnter  = animFromBottom
                      stackview.pushExit  = exitToTop
                      stackview.push(bottomItem)
                  }
              }
              Button{
                  text: "Left"
                  onClicked: {
                      //todo
                  }
              }
              Button{
                  text: "Right"
                  onClicked: {
                      //todo
                  }
              }
          }
      }
      
      
      1 Reply Last reply
      2
      • B Offline
        B Offline
        BikashRDas
        wrote on last edited by
        #3

        Thanks a lot @LeLev .

        1 Reply Last reply
        1

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved