Qt Forum

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

    "Chained" transitions?

    QML and Qt Quick
    1
    2
    1419
    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.
    • G
      GordonSchumacher last edited by

      I'm trying to achieve a Transition which pauses in the middle to wait for a signal to be fired. My current attempt is to break the Transition in two pieces. What I have almost works, and I'm not clear what I'm doing wrong.
      It is going through the correct state changes, but the second Transition is never executed. I'm kind of at a loss here...

      Here's my test app:

      @import Qt 4.7

      Flipable {
      id: flipper
      width: 360
      height: 360

      property int angle: 0
      property bool displayingFront: true
      property bool waitingForTimer: false
      
      Timer {
          id: timer
          interval: 800; running: waitingForTimer; repeat: false
          onTriggered: { console.log("triggered"); waitingForTimer = false; displayingFront = !displayingFront; }
      }
      Timer {
          id: debug
          interval: 100; running: true; repeat: true
          onTriggered: { console.log(flipper.state, displayingFront, waitingForTimer); }
      }
      
      front: Rectangle {
          anchors.fill: parent
          color: "red"
          Text {
              anchors.centerIn: parent
              text: "front"
          }
      }
      back: Rectangle {
          anchors.fill: parent
          color: "green"
          Text {
              anchors.centerIn: parent
              text: "back"
          }
      }
      
      MouseArea {
          anchors.fill: parent
          onClicked: {
              waitingForTimer = true;
          }
      }
      
      states: [
          State {
              name: "displayingFront"
              when: displayingFront && !waitingForTimer
          },
          State {
              name: "switchingToBack"
              when: displayingFront && waitingForTimer
          },
          State {
              name: "displayingBack"
              when: !displayingFront && !waitingForTimer
          },
          State {
              name:  "switchingToFront"
              when: !displayingFront && waitingForTimer
          }
      ]
      
      transitions: [
          Transition {
              from: "displayingFront"; to: "switchingToBack"
              SequentialAnimation {
                  ScriptAction { script: console.log("displayingFront -> switchingToBack"); }
                  PropertyAnimation { target: timer; property: "running"; to: true }
              }
          },
          Transition {
              from: "switchingToBack"; to: "displayingBack"
              SequentialAnimation {
                  ScriptAction { script: console.log("switchingToBack -> displayingBack"); }
                  NumberAnimation { target: flipper; property: "angle"; to: 180; duration: 800; }
              }
          },
          Transition {
              from: "displayingBack"; to: "switchingToFront"
              SequentialAnimation {
                  ScriptAction { script: console.log("displayingBack -> switchingToFront"); }
                  PropertyAnimation { target: timer; property: "running"; to: true }
              }
          },
          Transition {
              from: "switchingToFront"; to: "displayingFront"
              SequentialAnimation {
                  ScriptAction { script: console.log("switchingToBack -> displayingFront"); }
                  NumberAnimation { target: flipper; property: "angle"; to: 0; duration: 800; }
              }
          }
      ]
      
      transform: Rotation {
          id: rotation
          origin.x: flipper.width / 2
          origin.y: flipper.height / 2
          axis.x: 0; axis.y: 1; axis.z: 0
          angle: flipper.angle
      }
      

      }@

      Does anyone have any idea what it's doing? TIA...

      1 Reply Last reply Reply Quote 0
      • G
        GordonSchumacher last edited by

        Here's another semi-working version:

        @import Qt 4.7

        Flipable {
        id: flipper
        width: 360
        height: 360

        property int angle: 0
        property bool frontShowing: true
        property bool waitingForTimer: false
        property string frontColor: "red"
        property string backColor: "green"
        
        Timer {
            id: timer
            interval: 2000; running: false; repeat: false
            onTriggered: {
                console.log("triggered")
                waitingForTimer = !waitingForTimer;
            }
        }   
        
        Timer {
            id: timer2
            interval: 200; running: true; repeat: true
            onTriggered: { 
                console.log(flipper.state + " " + frontShowing  + " " + waitingForTimer);
            }
        }
        
        front: Rectangle {
            anchors.fill: parent
            color: frontColor
            Text {
                anchors.centerIn: parent
                text: "front"
            }
        }
        back: Rectangle {
            anchors.fill: parent
            color: backColor
            Text {
                anchors.centerIn: parent
                text: "back"
            }
        }
        
        MouseArea {
            anchors.fill: parent
            onClicked: {
               timer.start();
               frontShowing = !frontShowing;
               waitingForTimer = true;                      
            }
        }
        
        states: [
            State {
                name: "displayingFront"
                when: frontShowing && !waitingForTimer
                PropertyChanges { target: timer; running: false }
                PropertyChanges { target: flipper; angle: 0 }
                PropertyChanges { target: flipper; frontColor: "red" }
            },
            State {
                name: "switchingToBack"
                when: !frontShowing && waitingForTimer
                PropertyChanges { target: flipper; frontColor: "blue" }
                PropertyChanges { target: timer; running: true }
            },
            State {
                name: "displayingBack"
                when: !frontShowing && !waitingForTimer
                PropertyChanges { target: timer; running: false }
                PropertyChanges { target: flipper; angle: 180 }
                PropertyChanges { target: flipper; backColor: "green" }
            },
            State {
                name:  "switchingToFront"
                when: frontShowing && waitingForTimer
                PropertyChanges { target: flipper; backColor: "blue" }
                PropertyChanges { target: timer; running: true }
            }
        ]
        
        transitions: [
            Transition {
                from: "displayingFront"; to: "switchingToBack"
                ScriptAction { script: console.log("displayingFront -> switchingToBack"); }
            },
            Transition {
                from: "switchingToBack"; to: "displayingBack"
                SequentialAnimation {
                    ScriptAction { script: console.log("switchingToBack -> displayingBack"); }
                    NumberAnimation { properties: "angle"; to: 180; duration: 800; }
                }
            },
            Transition {
                from: "displayingBack"; to: "switchingToFront"
                ScriptAction { script: console.log("displayingBack -> switchingToFront"); }
            },
            Transition {
                from: "switchingToFront"; to: "displayingFront"
                SequentialAnimation {
                    ScriptAction { script: console.log("switchingToFront -> displayingFront"); }
                    NumberAnimation { properties: "angle"; to: 0; duration: 800; }
                }
            }
        ]
        
        transform: Rotation {
            id: rotation
            origin.x: flipper.width / 2
            origin.y: flipper.height / 2
            axis.x: 0; axis.y: 1; axis.z: 0
            angle: flipper.angle
        }
        

        }@

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