Assign SequentialAnimation at runtime

Qnut

Hi

I need to change the color of an element from green to yellow or red and at last to blinking. Using states changing the color to a static value is straight forward. Blinking has been realized by a SequentialAnimation. But how do I assign that SequentialAnimation at runtime?

Qnut

I learned that I cannot assign a SequentialAnimation at runtime. So I solved it by using the same colors for the static color and two diffrent colors for blinking. Here is my final code.

GroupBox {
    id: sensorValueGroupBox
    width: 232
    height: 216

    property string sensorType: qsTr("Sensor")
    property TwoColorAnimationStyle colorAnimationStyle: TwoColorAnimationStyle{} // simple QtObject that holds color and duration settings


    background: Rectangle{
        radius: 20
        color: "transparent"
        width: parent.width
        height: parent.height
        border.color: "lightgreen"
    }

    Label {
        id: sensorTypeLabel
        text: sensorType
        font {
            pointSize: 24
            bold: true
            family: "OCR A Extended"
        }
        wrapMode: Text.WordWrap
        padding: 5
        background: Rectangle {
            id: labelBackground
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom

            anchors.fill: parent
            color: "white"
            Behavior on color {
                SequentialAnimation {
                    id: blinkingAnimation
                    loops: colorAnimationStyle.loops
                    running: false
                    PropertyAnimation { to: colorAnimationStyle.color2; duration: colorAnimationStyle.sequenceDuration} // switch over to second color
                    PauseAnimation { duration: colorAnimationStyle.pauseDuration}                                       // stay with this color for a while
                    PropertyAnimation { to: colorAnimationStyle.color1; duration: colorAnimationStyle.sequenceDuration} // switch over to first color
                    PauseAnimation { duration: colorAnimationStyle.pauseDuration}                                       // stay with this color for a while
                }
            }


            states: [
                State {
                    name: "OkState"
                    when: colorComboBox.currentValue === "green"

                    // change animation colors and loops (simply use same color and loop once to simulate a static color)
                    PropertyChanges {
                        target: colorAnimationStyle
                        loops: 1
                        color1: "green"
                        color2: "green"
                    }
                    // change color itself to trigger animation
                    PropertyChanges {
                        target: labelBackground
                        color: "green"
                    }
                },
                State {
                    name: "WarningState"
                    when: colorComboBox.currentValue === "yellow"

                    // change animation colors and loops (simply use same color and loop once to simulate a static color)
                    PropertyChanges {
                        target: colorAnimationStyle
                        loops: 1
                        color1: "yellow"
                        color2: "yellow"
                    }
                    // change color itself to trigger animation
                    PropertyChanges {
                        target: labelBackground
                        color: "yellow"
                    }
                },
                State {
                    name: "AlertState"
                    when: colorComboBox.currentValue === "red"

                    // change animation colors and loops (simply use same color and loop once to simulate a static color)
                                        PropertyChanges {
                        target: colorAnimationStyle
                        loops: 1
                        color1: "red"
                        color2: "red"
                    }
                    // change color itself to trigger animation
                    PropertyChanges {
                        target: labelBackground
                        color: "red"
                    }
                },
                State {
                    name: "AlertBlinkingState"
                    when: colorComboBox.currentValue === "blinking"

                    // use two different colors and infinite loop for blinking effect
                    PropertyChanges {
                        target: colorAnimationStyle
                        loops: -1   // infinite loop (assigning Animation.Infinite doesn't work here)
                        color1: "white"
                        color2: "red"
                    }
                    // change color itself to trigger animation
                    PropertyChanges {
                        target: labelBackground
                        color: "blue"
                    }
                }
            ]
        }
    }

    ComboBox {
        id: colorComboBox
        anchors.centerIn: parent
        currentIndex: 0
        model: ["green", "yellow", "red", "blinking"]
    }
}

with the external QtObject that defines the animation behavior

import QtQuick 2.15

/// declare object that holds colors and settings for a two color animation
QtObject {
    /// for sequential color animation this is should be first color to show
    property color color1: "green"
    /// for sequential color animation this is should be second color to show
    property color color2: "green"
    /// number of loops of animation
    property int loops: 1
    /// duration of an animation sequence (by default set to 0 to avoid animation)
    property int sequenceDuration: 0
    /// duration of a pause between animation sequences
    property int pauseDuration: 500
}

GrecKo

Can you provide a small reproducible example?

Using states and transitions, blinking should also be relatively straight forward.
Using Behavior would make it even easier.

    Rectangle {
        id: colorRect
        anchors.centerIn: parent
        width: 300
        height: width
        color: colorComboBox.currentValue
        Behavior on color {
            SequentialAnimation {
                ColorAnimation { }
                PropertyAnimation {
                    target: colorRect
                    property: "opacity"
                    from: 0
                    to: 1
                    loops: 3
                }
            }
        }
    }

    ComboBox {
        id: colorComboBox
        anchors.centerIn: parent
        currentIndex: 0
        model: ["green", "yellow", "red"]
    }

Qnut

Using your combobox to change states my code would look like this. The question is how to assign animation on "blinking" state.

GroupBox {
    id: sensorValueGroupBox
    width: 232
    height: 216

    property string sensorType: qsTr("Sensor")

    background: Rectangle{
        radius: 20
        color: "transparent"
        width: parent.width
        height: parent.height
        border.color: "lightgreen"
    }

    Label {
        id: sensorTypeLabel
        text: sensorType
        font {
            pointSize: 24
            bold: true
            family: "OCR A Extended"
        }
        wrapMode: Text.WordWrap
        padding: 5
        background: Rectangle {
            id: labelBackground
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom

            anchors.fill: parent
            color: "white"

            SequentialAnimation {
                id: alertBlinking
                loops: 5
                PropertyAnimation { to: "red"}      // switch to red color
                PauseAnimation { duration: 500}     // stay with this color for half a second
                PropertyAnimation { to: "white"}    // switch to white color
                PauseAnimation { duration: 500}     // stay with this color for half a second
            }

            states: [
                State {
                    name: "OkState"
                    when: colorComboBox.currentValue === "green"

                    PropertyChanges {
                        target: labelBackground
                        color: "green"
                    }
                },
                State {
                    name: "WarningState"
                    when: colorComboBox.currentValue === "yellow"

                    PropertyChanges {
                        target: labelBackground
                        color: "yellow"
                    }
                },
                State {
                    name: "AlertState"
                    when: colorComboBox.currentValue === "red"

                    PropertyChanges {
                        target: labelBackground
                        color: "red"
                    }
                },
                State {
                    name: "AlertBlinkingState"
                    when: colorComboBox.currentValue === "blinking"

                    PropertyChanges {
                        target: labelBackground
                        // Assign Sequential animation here but how?
                    }
                }
            ]
        }
    }

    ComboBox {
        id: colorComboBox
        anchors.centerIn: parent
        currentIndex: 0
        model: ["green", "yellow", "red", "blinking"]
    }
}

Qnut

I learned that I cannot assign a SequentialAnimation at runtime. So I solved it by using the same colors for the static color and two diffrent colors for blinking. Here is my final code.

GroupBox {
    id: sensorValueGroupBox
    width: 232
    height: 216

    property string sensorType: qsTr("Sensor")
    property TwoColorAnimationStyle colorAnimationStyle: TwoColorAnimationStyle{} // simple QtObject that holds color and duration settings


    background: Rectangle{
        radius: 20
        color: "transparent"
        width: parent.width
        height: parent.height
        border.color: "lightgreen"
    }

    Label {
        id: sensorTypeLabel
        text: sensorType
        font {
            pointSize: 24
            bold: true
            family: "OCR A Extended"
        }
        wrapMode: Text.WordWrap
        padding: 5
        background: Rectangle {
            id: labelBackground
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom

            anchors.fill: parent
            color: "white"
            Behavior on color {
                SequentialAnimation {
                    id: blinkingAnimation
                    loops: colorAnimationStyle.loops
                    running: false
                    PropertyAnimation { to: colorAnimationStyle.color2; duration: colorAnimationStyle.sequenceDuration} // switch over to second color
                    PauseAnimation { duration: colorAnimationStyle.pauseDuration}                                       // stay with this color for a while
                    PropertyAnimation { to: colorAnimationStyle.color1; duration: colorAnimationStyle.sequenceDuration} // switch over to first color
                    PauseAnimation { duration: colorAnimationStyle.pauseDuration}                                       // stay with this color for a while
                }
            }


            states: [
                State {
                    name: "OkState"
                    when: colorComboBox.currentValue === "green"

                    // change animation colors and loops (simply use same color and loop once to simulate a static color)
                    PropertyChanges {
                        target: colorAnimationStyle
                        loops: 1
                        color1: "green"
                        color2: "green"
                    }
                    // change color itself to trigger animation
                    PropertyChanges {
                        target: labelBackground
                        color: "green"
                    }
                },
                State {
                    name: "WarningState"
                    when: colorComboBox.currentValue === "yellow"

                    // change animation colors and loops (simply use same color and loop once to simulate a static color)
                    PropertyChanges {
                        target: colorAnimationStyle
                        loops: 1
                        color1: "yellow"
                        color2: "yellow"
                    }
                    // change color itself to trigger animation
                    PropertyChanges {
                        target: labelBackground
                        color: "yellow"
                    }
                },
                State {
                    name: "AlertState"
                    when: colorComboBox.currentValue === "red"

                    // change animation colors and loops (simply use same color and loop once to simulate a static color)
                                        PropertyChanges {
                        target: colorAnimationStyle
                        loops: 1
                        color1: "red"
                        color2: "red"
                    }
                    // change color itself to trigger animation
                    PropertyChanges {
                        target: labelBackground
                        color: "red"
                    }
                },
                State {
                    name: "AlertBlinkingState"
                    when: colorComboBox.currentValue === "blinking"

                    // use two different colors and infinite loop for blinking effect
                    PropertyChanges {
                        target: colorAnimationStyle
                        loops: -1   // infinite loop (assigning Animation.Infinite doesn't work here)
                        color1: "white"
                        color2: "red"
                    }
                    // change color itself to trigger animation
                    PropertyChanges {
                        target: labelBackground
                        color: "blue"
                    }
                }
            ]
        }
    }

    ComboBox {
        id: colorComboBox
        anchors.centerIn: parent
        currentIndex: 0
        model: ["green", "yellow", "red", "blinking"]
    }
}

with the external QtObject that defines the animation behavior

import QtQuick 2.15

/// declare object that holds colors and settings for a two color animation
QtObject {
    /// for sequential color animation this is should be first color to show
    property color color1: "green"
    /// for sequential color animation this is should be second color to show
    property color color2: "green"
    /// number of loops of animation
    property int loops: 1
    /// duration of an animation sequence (by default set to 0 to avoid animation)
    property int sequenceDuration: 0
    /// duration of a pause between animation sequences
    property int pauseDuration: 500
}