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



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



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

    }
    @



  • Hi infidel,

    thanks a lot for your solutions! both works :)


Log in to reply
 

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