main.qml Example File | Qt Creator Manual

Qt Creator Manual | Creating a Qt Quick Application | main.qml Example File

Qt Creator Manual 4.4.1

# main.qml Example File

transitions/main.qml

      import QtQuick 2.7

      import QtQuick.Controls 2.0
      import QtQuick.Layouts 1.3

      ApplicationWindow {
          visible: true
          width: 640
          height: 480
          title: qsTr("Transitions")

          Page1Form {
              anchors.fill: parent
              id: page

              mouseArea {
              onClicked: stateGroup.state = ' '
              }
              mouseArea1 {
              onClicked: stateGroup.state = 'State1'
              }
              mouseArea2 {
              onClicked: stateGroup.state = 'State2'
              }
          }

          StateGroup {
              id: stateGroup
              states: [
                  State {
                      name: "State1"

                      PropertyChanges {
                          target: page.icon
                          x: page.middleRightRect.x
                          y: page.middleRightRect.y
                      }
                  },
                  State {
                      name: "State2"

                      PropertyChanges {
                          target: page.icon
                          x: page.bottomLeftRect.x
                          y: page.bottomLeftRect.y
                      }
                  }
              ]
              transitions: [
                  Transition {
                      from: "*"; to: "State1"
                      NumberAnimation {
                          easing.type: Easing.OutBounce
                          properties: "x,y";
                          duration: 1000
                      }
                  },
                  Transition {
                      from: "*"; to: "State2"
                      NumberAnimation {
                              properties: "x,y";
                              easing.type: Easing.InOutQuad;
                              duration: 2000
                      }
                  },
                  Transition {
                           NumberAnimation {
                               properties: "x,y";
                               duration: 200
                           }
                  }
              ]
          }
      }