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