"Chained" transitions?
-
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: 360property 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...
-
Here's another semi-working version:
@import Qt 4.7
Flipable {
id: flipper
width: 360
height: 360property 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 }
}@