import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    id:root
    visible: true
    width: 500
    height: 300
    color:"red"
    property bool colorRun;
    colorRun: true

    //to stop
    Rectangle
    {
        id: r1
        height: 100
        width: 100
        color: "green"


        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                console.log("Green area clicked");
                t1.running = false
                t1.stop()
                a.stop()
                b.stop()
                colorRun = false;
            }

        }
    }

    //to start
    Rectangle
    {
        id: r2
        height: 100
        width: 100
        color: "black"
        anchors.top: r1.bottom


        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                t1.running = true
                t1.start()
            }

        }
    }

    ColorAnimation on color { id:a; to: "yellow"; duration: 1000; onStopped: colorRun ? b.start() : b.stop(); running: false }
    ColorAnimation on color { id:b; to: "green"; duration: 1000; onStopped: colorRun ? a.start() : a.stop(); running: false }


    Timer
    {
        id: t1
        running: false
        onTriggered: {
            console.log("Timer Trigger fired");
            a.start()
            colorRun = true
        }
    }
}