[Solved] NumberAnimation: "running" not accessible inside of a transition?

[skolibri]

Hello guys,

i'm a newby in QML and just faced following problem: i have an object which has two different states. There is a transition which defines a NumberAnimation when the object changes the state. Now i want to be able to control whether this animation should be running or not. I placed additional button (id:animSwitch) with a boolean flag "isAnim". Then, i tried to make the "running" property of the NumberAnimation dependent of this (running: animSwitch.isAnim). Unfortunately it doesn't work :( Even if i set it directly to false there, it is running anyway.. How i could solve this issue? Here is the code:

@
import Qt 4.7

Item {
id: myItem
width: 400
height: 400

Rectangle {
id:rect
width: 50; height: 50
color: "magenta"
x: 10; y: 50
}

states: [
    State {
        name: "RightDown"
        PropertyChanges {
            target: rect
            x: 200; y: 200
        }
    },
    State {
        name: "LeftUp"
        PropertyChanges {
            target: rect
            x: 10; y: 50
        }
    }
]

transitions: [
    Transition {
        from: "*";
        to: "*"
        NumberAnimation {
            running: animSwitch.isAnim // here i want to switch on/off the animation BUT IT DOESN'T WORK :(
            properties: "x, y";
            duration: 2000;
            easing.type: Easing.OutExpo;
        }
    }
]

//button to move the rectangle
Rectangle {
    id: button
    width: 60; height: 30
    anchors {bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin:20}
    color: "grey"
    radius: 5

    Text {
        text: "move"
        color: "white"
        font.bold: true
        font.pixelSize: 14
        anchors {horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter}
    }

    MouseArea {
        anchors.fill: parent
        property bool isDown: false

        onClicked: {
            if(isDown) {
                myItem.state = 'LeftUp';
                isDown = false;
            }
            else {
                 myItem.state = 'RightDown';
                 isDown = true;
            }
        }
    }
}

// Button "anim on/off" to control if the animation should be running or not
Rectangle {
    id: animSwitch
    width: 60; height: 30
    anchors {left: button.right; bottom: parent.bottom; leftMargin:20; bottomMargin:20}
    color: "grey"
    radius: 5

    property bool isAnim: false

    Text {
        id: buttonLabel
        text: "anim on"
        color: "white"
        font.bold: true
        font.pixelSize: 14
        anchors {horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter}
    }

    states: State {
        name: "running"
        when: animSwitch.isAnim
        PropertyChanges { target: buttonLabel; text: "anim off" }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            animSwitch.isAnim = !animSwitch.isAnim
        }
    }
}

}
@

Thanks for any tips and hints in advance!

[infidel]

You can use Behavior and PropertyAnimation elements for this instead of transitions. See below a modified example from your original code.

You could also remove running property from you NumberAnimation element and define the duration to be

@duration: if ( animSwitch.isAnim ) { 2000; } else { 0; }@

but that's a bit ugly.

Example of using Behavior:

@
import Qt 4.7

Item {
id: myItem
width: 400
height: 400

Rectangle {
id:rect
width: 50; height: 50
color: "magenta"
x: 10; y: 50

     Behavior on x {
         enabled: animSwitch.isAnim
         PropertyAnimation { duration: 200 }
     }
     Behavior on y {
         enabled: animSwitch.isAnim
         PropertyAnimation { duration: 200 }
     }
 }

states: [
    State {
        name: "RightDown"
        PropertyChanges {
            target: rect
            x: 200; y: 200
        }
    },
    State {
        name: "LeftUp"
        PropertyChanges {
            target: rect
            x: 10; y: 50
        }
    }
]

//button to move the rectangle
Rectangle {
    id: button
    width: 60; height: 30
    anchors {bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin:20}
    color: "grey"
    radius: 5

    Text {
        text: "move"
        color: "white"
        font.bold: true
        font.pixelSize: 14
        anchors {horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter}
    }

    MouseArea {
        anchors.fill: parent
        property bool isDown: false

        onClicked: {
            if(isDown) {
                myItem.state = 'LeftUp';
                isDown = false;
            }
            else {
                 myItem.state = 'RightDown';
                 isDown = true;
            }
        }
    }
}

// Button "anim on/off" to control if the animation should be running or not
Rectangle {
    id: animSwitch
    width: 60; height: 30
    anchors {left: button.right; bottom: parent.bottom; leftMargin:20; bottomMargin:20}
    color: "grey"
    radius: 5

    property bool isAnim: false

    Text {
        id: buttonLabel
        text: "anim on"
        color: "white"
        font.bold: true
        font.pixelSize: 14
        anchors {horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter}
    }

    states: State {
        name: "running"
        when: !animSwitch.isAnim
        PropertyChanges { target: buttonLabel; text: "anim off" }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            animSwitch.isAnim = !animSwitch.isAnim
        }
    }
}

}
@

[skolibri]

Hi infidel,

thanks a lot for your solutions! both works :)