Animations

[qcoderpro]

I've written the code below for the example stated in the last paragraph of this page. The problem is the next step where it says:
Another option would be to add an “attention” state where the lights are blinking yellow. For this, you would need to add a sequential animation to the transition for one second going to yellow (“to” property of the animation and one sec going to “black”).

I don't know how to using a sequential animation reach that purpose!
I don't think using only a sequential animation to transitions we can achieve that goal either. Any ideas, please?

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    
    Rectangle {
        width: 150
        height: 250
        color: "lightblue"
        
        Rectangle {
            id: light1
            x: 25; y: 15
            width: 100; height: width
            radius: width/2
            color: "black"
        }
        
        Rectangle {
            id: light2
            x: 25; y: 135
            width: 100; height: width
            radius: width/2
            color: "black"
        }
        
        state: "stop"
        
        states: [
            State {
                name: "stop"
                PropertyChanges { target: light1; color: "red" }
                PropertyChanges { target: light2; color: "black" }
                PropertyChanges { target: light2; scale: 0.5 }
                
            },
            State {
                name: "go"
                PropertyChanges { target: light1; color: "black" }
                PropertyChanges { target: light2; color: "green" }
                PropertyChanges { target: light1; scale: 0.5 }
            }
        ]
        
        MouseArea {
            anchors.fill: parent
            onClicked: parent.state = (parent.state == "stop" ? "go" : "stop")
        }
        transitions: [
            Transition {
               // SequentialAnimation { }
                ColorAnimation { target: light1; properties: "color"; duration: 2000 }
                PropertyAnimation {target: light1; property: "scale"; duration: 2000 }
                
                ColorAnimation { target: light2; properties: "color"; duration: 2000 }
                PropertyAnimation {target: light2; property: "scale"; duration: 2000 }
            }
        ]
    }
}

[qcoderpro]

No reply! :(

[Markkyboy]

Not quite what you are asking for, but something similar, utilising the UK light sequence....hope it helps;

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 340
    height: 400
    visible: true
    color: "skyblue"

    Rectangle {
        id: background
        width: 150; height: 360
        color: "grey"
        radius: 25
        anchors.centerIn: parent
        border.color: "black"
        border.width: 5

        Column {
            id: column
            width: parent.width
            spacing: 10
            anchors.centerIn: parent

            Rectangle {
                id: red
                width: 100; height: width
                radius: width/2
                color: "#660000"
                border.color: "black"
                border.width: 3
                anchors.horizontalCenter: parent.horizontalCenter
            }
            Rectangle {
                id: amber
                width: 100; height: width
                radius: width/2
                color: "#664200"
                border.color: "black"
                border.width: 3
                anchors.horizontalCenter: parent.horizontalCenter
            }
            Rectangle {
                id: green
                width: 100; height: width
                radius: width/2
                color: "#003300"
                border.color: "black"
                border.width: 3
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }
    }
    SequentialAnimation {
        running: true
        loops: Animation.Infinite
        ColorAnimation { target: red; property: "color"; to: "red"; duration: 2000 }
        ColorAnimation { target: amber; properties: "color"; to: "orange"; duration: 2000 }
        ColorAnimation { target: green; properties: "color"; to: "green"; duration: 1000 }

        ParallelAnimation {
            ColorAnimation { target: red; property: "color"; to: "#660000"; duration: 500 }
            ColorAnimation { target: amber; properties: "color"; to: "#664200"; duration: 500  }
        }
        PauseAnimation { duration: 2000 }
        ParallelAnimation {
            ColorAnimation { target: amber; properties: "color"; to: "orange"; duration: 2000 }
            ColorAnimation { target: green; properties: "color"; to: "#003300"; duration: 500 }
        }
        ColorAnimation { target: amber; properties: "color"; to: "black"; duration: 1000 }
        ColorAnimation { target: red; properties: "color"; to: "red"; duration: 500 }
    }
    Rectangle {
        id: lightPole
        color: "black"
        width: 30; height: parent.height
        anchors {
            top: background.bottom
            horizontalCenter: parent.horizontalCenter
        }
    }
}

[qcoderpro]

@Markkyboy

Thank you for your code but there should be only two lights, one black and the other green/red. We just need to add a yellow color for one second to the light when the state changes from "go" to "stop". That is, when the state is going to change from "go" to "stop" it firstly stops for one second with the yellow color and then becomes back for the rest of time space and with color black, like normal traffic lights but this specific version has only two lights!