QML animations based on states

[mvbhavsar]

Hi,

I have created Sample.qml file and have

import QtQuick 2.0
import QtQuick.Window 2.0
 
Rectangle {
    id: root
    width: Screen.width
    height: Screen.height
 
    Rectangle{
        id: r1
        width: 100
        height: 100
        x: 200
        y: 200
        color: "green"
    }
 
    Rectangle{
        id: r2
        width: 100
        height: 100
        x: 400
        y: 200
        color: "cyan"
        visible: false
    }
}

import QtQuick 2.0
import QtQuick.Window 2.0

Rectangle {
    id: root
    width: Screen.width
    height: Screen.height

    Rectangle{
        id: r1
        width: 100
        height: 100
        x: 200
        y: 200
        color: "green"
    }

    Rectangle{
        id: r2
        width: 100
        height: 100
        x: 400
        y: 200
        color: "cyan"
        visible: false
    }
}

To copy to clipboard, switch view to plain text mode 

Here rectangle r1 is visible and r2 is non-visible. I want PropertyAnimation on r1 and change its opacity to 0.01. Then once this animation is ended I want r2 to become visible and separate animation to start on r2 once it is visible.
Can somebody please add necessary code to this. I know this has to be achieved through states and transitions.


Thanks

Manish

[wysota]

It does not have to be achieved by states and transitions, though of course it is possible to use states to do the job.

[mvbhavsar]

I want to manage from single qml file so still do you think states are not required. Can you pl. suggest some way out.

[wysota]

States are not required. You can define a SequentialAnimation object and trigger the animation whenever you want. Of course you can do the same as a state transition.

[mvbhavsar]

Thanks. Done using SequentialAnimation