qml實現紅綠燈切換功能

題目要求：
參考代碼：https://download.csdn.net/download/y478225902/5260541

實現源碼：

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    color: "gray"
    title: qsTr("Hello World")

    //分配時間 221
    Timer{
             id:statechange
             interval: 1000
             running:trues
             repeat:true
             onTriggered:
             {
                 sonwindow1.aNumber++
                 if(sonwindow1.aNumber>10) sonwindow1.aNumber = 0
                 switch(sonwindow1.aNumber%10)
                 {
                 case 0:
                     sonwindow1.state = "go";
                     break;
                 case 4:
                     sonwindow1.state = "wait";
                     break;
                 case 6:
                     sonwindow1.state = "stop";
                     break;
                 }
             }

         }

    MouseArea
    {
        id:startclick
        anchors.fill: parent
        onClicked: statechange.start()
    }



 Rectangle{
    id:sonwindow1
    x:10;y:10;width: 100;height:300
    color: "black"
    property int aNumber: 0
    Rectangle{
        id:circle_red
        x:5;y:5
        width: 90;height:90
        radius: 100
        color: "#2E1616"
    }
    Rectangle{
        id:circle_yellow
        x:5;y:radius+5
        width: 90;height:90
        radius: 100
        color: "#2E1616"
    }
    Rectangle{
        id:circle_green
        x:5;y:radius*2+5
        width: 90;height:90
        radius: 100
        color: "green"
    }



        states: [
            State {
                name: "stop"
                PropertyChanges {
                    target: circle_red
                    color:"red"
                }
                PropertyChanges {
                    target: circle_green
                    color:"#2E1616"
                }

                PropertyChanges {
                    target: circle_yellow
                    color:"#2E1616"
                }

            },
            State {
                name: "wait"
                PropertyChanges {
                    target: circle_yellow
                    color:"yellow"
                }
                PropertyChanges {
                    target: circle_green
                    color:"#2E1616"
                }

                PropertyChanges {
                    target: circle_red
                    color:"#2E1616"
                }
            },
            State {
                name: "go"

                PropertyChanges {
                    target: circle_yellow
                    color:"#2E1616"
                }
                PropertyChanges {
                    target: circle_green
                    color:"green"
                }
                PropertyChanges {
                    target: circle_red
                    color:"#2E1616"
                }
            }
        ]

        //過渡處理中增加一個 可逆化處理
            transitions: [

                Transition {
                    from: "stop"
                    to: "go"
                    reversible: true
                    PropertyAnimation{//屬性動畫的處理
                        target: circle_red |circle_green
                        properties: "color";duration: 1000

                    }
                },
                Transition {
                    reversible: true
                    from: "go"
                    to: "wait"
                    PropertyAnimation{
                        target: circle_green|circle_yellow
                        properties: "color"
                        duration: 1000
                    }
                },
                Transition {
                    reversible: true
                    from: "stop"
                    to: "wait"
                    PropertyAnimation{
                        target: circle_green|circle_yellow
                        properties: "color"
                        duration: 1000
                    }
                }

            ]

    }
}