[SOLVED]Wait for animation change in State change

ixSci

Hi there,

I have the following code:

@import QtQuick 1.1

Rectangle {
id: container

 width: 200;
 height: 200
 Column{
     anchors.centerIn: parent
     Rectangle{
         id: rect1

         color: "red"
         width: 50
         height: 50
     }
     Rectangle{
         id: rect2

         color: "green"
         width: 50
         height: 0
     }
 }
 MouseArea {
     anchors.fill: parent
     onClicked: {
         if(container.state === "")
             container.state = "moving";
         else
             container.state = "";

     }
 }
 states: State{
     name: "moving"
     PropertyChanges {
         target: rect1
         color: "yellow"
     }
     PropertyChanges {
         target: rect2
         height: 50
     }
 }
 transitions: Transition {
     reversible: true
     to: "moving"
     NumberAnimation{properties: "height"; duration: 400}
 }

}@
Just click two times to see the animation.
And I want the top rectangle becomes red only after green rectangle disappears(or slide in as it seems so). How can I accomplish that?

sierdzio

Use "SequentialAnimation {}":http://developer.qt.nokia.com/doc/qt-4.8/qml-sequentialanimation.html in your transition.

ixSci

sierdzio, good point, thanks!
But if we don't have an access to the Transition element, for example rect2 with its animation live in another QML file which knows nothing about the place it will be on?
Is there a way to accomplish it?

sierdzio

Still works, as height is still a valid property when Rect2 becomes a separate file. Column and Row elements also have handy "add" and "move" properties that can be used here.

You may mean something a bit different though: that Rect2 becomes a new file with all States and Transitions info migrated there. This may indeed change things, but it depends on how you make the transition. And you can always do some magic with ScriptAction and Animation::onRunningChanged. For example, you can add this:
@
NumberAnimation {
// ... code here
onRunningChanged: {
if (!running) {
rect1.color = "yellow";
// or send a signal from within Rect2 file,
// that will trigger parent
// to change the colour
}
}
}
@

ixSci

Thanks one more time, I think it is better to rethink my solution a bit instead of generating some workarounds. So I'll use the solution with sequential animation.