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
}
