Assign SequentialAnimation at runtime
-
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?
-
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 }
-
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"] }
-
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"] } }
-
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 }