Change a state transition on the fly
-
Hello,
I have a qml page with some states. When my C++ application emit a signal I change the state to the next one.
I defined a transition among them:@
states: [
State {
name: "slideAlfa"
PropertyChanges {
target: alfa
opacity: 1.0
}
PropertyChanges {
target: beta
opacity: 0.0
}
},
State {
name: "slideBeta"
PropertyChanges {
target: alfa
opacity: 0.0
}
PropertyChanges {
target: beta
opacity: 1.0
}
}
]transitions: Transition { NumberAnimation { property: "opacity"; duration: 2000; easing.type: Easing.Linear } }
@
Now, let's say I have a list of available transitions effects (i.e. crossfade like the above, sliding, rotating, etc...) and I want to select which one should be used when I change the state.
How could I achieve that?
I'm able to create the transition I desire, but I cannot understand how to select one at runtime.
Thanks! -
Hi Mark!
You can define multiple Transitions and only enable the one/those you want to use, like:
@
transitions: [
Transition { enabled: true; ... },
Transition { enabled: false; ...},
Transition { enabled: false; ...}
]
@I've created an ugly :-) example:
@
import QtQuick 2.4
import QtQuick.Controls 1.3Column {
Rectangle {
id: rect
width: 100; height: 100
color: "lightblue"MouseArea { id: mouseArea anchors.fill: parent } states: State { name: "grün" when: mouseArea.pressed } transitions: [ Transition { enabled: true to: "grün" ColorAnimation { target: rect property: "color" to: "lime" duration: 1000 } }, Transition { enabled: false to: "grün" NumberAnimation { target: rect property: "width" to: 200 duration: 1000 } } ] } Button { text: "Toggle transition" onClicked: { rect.transitions[0].enabled = !rect.transitions[0].enabled rect.transitions[1].enabled = !rect.transitions[1].enabled } }
}
@Hope that helps!
-
Thank you!
I didn't see the enabled property. Following your example I guess I can also change the other parameters, i.e.:@
Button {
text: "Toggle transition"
onClicked: {
rect.transitions[0].enabled = true
rect.transitions[0].to = "yellow"
rect.transitions[0].duration = 100rect.transitions[1].enabled = false } }
@
I will try!