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
}
}@
