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!


  • Moderators

    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!



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


Log in to reply
 

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