Mousearea: wait until animation is completed to call different state. [solved]



  • I have a image when the user clicks on it the image is rotated 180 degrees than after that a new state is called.
    my problem is when the image is clicked the state is called right after the animated is fired so the animation is never shown because the new state is fired.

    Is there a pause() or wait() function I can call? or maybe a wait until animation complete?

    @ Image {
    id: image6
    x: 59
    y: 33
    width: 100
    height: 100
    source: "images/bmi-mm-movies.png"
    states: State {
    name: "rotated"
    PropertyChanges { target: image6; rotation: 180}
    }
    transitions: Transition {
    RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }
    }
    }@

    The mousearea

    @ MouseArea {
    id: movie_mouse_mm
    x: 392
    y: 364
    width: 104
    height: 100
    onClicked:{
    image6.state = "rotated"
    page.state = 'State1'
    Logic.get_db(5,0);
    }
    }@





  • Thanks for the help

    Can I just call 'State1' after the animation completes?



  • Yes, I think the best way is to use signals and slots to connect and check this.

    Kind Regards



  • You can simply check for the onRunningChanged event in your animation like so:
    @
    transitions: Transition { RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise; onRunningChanged: {
    if (!running) page.state = "State1"
    }
    }
    }
    @
    Once the animation is done running will go back to false, checking for !running should do the trick.



  • JapieKrekel:
    I wish that would work but onRunningChanged does not work if Animation is inside transition.



  • You're right. My bad, usually I make a small example to test it, and you guessed it, this time I didn't...

    I made a small test and the onRunningChanged does work on on the Transition though.

    The example below shows the log at the beginning and end of the transition.

    @
    import QtQuick 2.0

    Rectangle {
    id : root
    width : 300
    height : 300

    MouseArea {
        anchors.fill: parent
        onClicked: icon.state = "rotated"
    }
    
    Rectangle {
        id: icon
        color: "red"
        width: 50
        height: 50
        anchors.centerIn: parent
        
        states : [
            State {
                name: "rotated"
                PropertyChanges {
                    target: icon
                    rotation: 360
                }
            }
        ]
        
        transitions: Transition {
            RotationAnimation {
                properties: "rotation"
                duration: 2000
            }
            onRunningChanged: console.log("rotation running: " + running)
        }
    }
    

    }
    @



  • You're the man JapieKrekel!
    I just added
    @
    ...
    onRunningChanged: if(!running) page.state = 'State1'
    ...
    @
    and it worked!



  • Glad to help. I learned from it too ;)

    Don't forget to mark the topic [Solved]


Log in to reply
 

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