Change a state transition on the fly

_Mark_

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!

? Offline

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.3

Column {
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!

_Mark_

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 = 100

        rect.transitions[1].enabled = false
    }
}

@

I will try!