"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: 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...



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

    }@


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.