[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.7Item {
id: myItem
width: 400
height: 400Rectangle {
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.7Item {
id: myItem
width: 400
height: 400Rectangle {
id:rect
width: 50; height: 50
color: "magenta"
x: 10; y: 50Behavior 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 :)