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

dstudentx

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);
}
}@

bjanuario

Maybe you are looking into @Qt.WaitCursor@

You can find more info here:
"http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-mousearea.html":http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-mousearea.html

dstudentx

Thanks for the help

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

bjanuario

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

Kind Regards

JapieKrekel

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.

dstudentx

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

JapieKrekel

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)
    }
}

}
@

dstudentx

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

JapieKrekel

Glad to help. I learned from it too ;)

Don't forget to mark the topic [Solved]