Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Animations



  • 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 }
                }
            ]
        }
    }
    


  • No reply! :(



  • 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
            }
        }
    }
    

    traffic-lights.JPG



  • @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!


Log in to reply