Animations in Safety-Critical UI

From Qt Safe Renderer 1.2 onwards, you can animate safety-critical UI elements. In general, Animation Framework is supported in Qt Safe Renderer just like in Qt Quick where animations are created by applying animation types to property values. Animation types interpolate property values to create smooth transitions. As well, state transitions may assign animations to state changes. The Qt Safe Renderer specific constraints are described in Animation Constraints in Qt Safe Renderer.

You can create animations with safety-critical UI elements via Qt Quick Designer or Qt Design Studio.

With the safety-critical UI elements, you can animate position, scale, color, and opacity of the element. Timeline animations are also supported, and you can change several properties in the same animation sequence.

See Customizing Animation Default Values for information about changing the default values for animations.

The following pages provide more information about using animations in Qt Quick:

Known Issues in Animations

When you animate the scale (that is, height and width) of the safety-critical UI element, a set of bitmaps with different sizes is generated. This increases memory consumption on runtime as more memory is needed to store the bitmaps.

When you use the opacity feature in your animations, you must remember that opacity value 0 makes the safety-critical UI elements invisible in the UI.

When you increase the Constraints::MAX_NUM_OF_STATES it increases the memory consumption significantly.

If some of the following exceptions occur, you should increase the related constraint value in qsafeconstraints.h:

When you create timeline animations, specify KeyframeGroup QML Type for the start and end values to ensure that those are taken into account in layout animation building:

KeyframeGroup {
    target: image
    property: "width"
    Keyframe {
        easing.type: Easing.InOutQuad
        frame: 0
        value: 256
    Keyframe {
        easing.type: Easing.InOutQuad
        frame: 500
        value: 128
    Keyframe {
        easing.type: Easing.InOutQuad
        frame: 1000
        value: 64

Animation Constraints in Qt Safe Renderer

When you animate the safety-critical UI elements, you should note the following constraints:

  • NumberAnimation QML Type is the only QML type inherited from PropertyAnimation that is supported in Qt Safe Renderer.
  • Transitions must be done by using states. For more information, see Transitions During State Changes. Note! You can use states without transitions. For more information, see Changing States.
  • You cannot bind an animation to a property change.
  • Parallel or sequential animations are not supported.
  • Dynamic text scaling is not supported in animations.
  • If timeline animations are done with Qt Design Studio, the generated code may contain loops or ping pong features that are not supported in Qt Safe Renderer.

Easing Curves

The PropertyAnimation QML type provides the easing.type enumeration that specifies the easing curve used for the animation. The following easing curves are supported in Qt Safe Renderer:

  • Easing.Linear
  • Easing.InQuad
  • Easing.InOutQuad
  • Easing.OutQuad
  • Easing.OutInQuad
  • Easing.InCubic
  • Easing.OutCubic
  • Easing.InOutCubic
  • Easing.OutInCubic
  • Easing.InQuart
  • Easing.OutQuart
  • Easing.InOutQuart
  • Easing.OutInQuart
  • Easing.InQuint
  • Easing.OutQuint
  • Easing.InOutQuint
  • Easing.OutInQuint
  • Easing.InSine
  • Easing.OutSine
  • Easing.InOutSine
  • Easing.OutInSine
  • Easing.InExpo
  • Easing.OutExpo
  • Easing.InOutExpo
  • Easing.OutInExpo
  • Easing.InCirc
  • Easing.OutCirc
  • Easing.InOutCirc
  • Easing.OutInCirc

If the timeline or transition animation contains an unsupported easing curve, it is replaced with a liner animation, that is, no easing curve is used.

Customizing Animation Default Values

The default frame rate in the animation is 64 frames per second. You can change it with the Qt Safe Layout Tool by using the -fps <frame-rate> option. The animation frame rate must match with your target screen refresh value. For more information, see Qt Safe Renderer Tools.

SafeRenderer::Constraints holds various constraint values for Qt Safe Renderer and some of the values can be changed in qsafeconstraints.h. The following constraint values affecting animations are customizable:

Duration of Animation

The maximum length of animation is defined as a combination of ANIMATION_TIMER_TICK_IN_MS and MAX_ANIMATION_STEPS. For example, if ANIMATION_TIMER_TICK_IN_MS is 16 milliseconds and MAX_ANIMATION_STEPS is 64 frames per second, the maximum length of animation is 1024 milliseconds.

The duration of animation is defined in milliseconds in Duration Property. If you modify the ANIMATION_TIMER_TICK_IN_MS and MAX_ANIMATION_STEPS, you need to modify the duration property too.

Defining States

It is recommended to define the States and Transitions inside the safe element instead of the root item. Within this approach it simplifies the States logic. When you define the States and Transitions under the root item you easily reach the limit defined by SafeRenderer::Constraints::MAX_NUM_OF_STATES{Constraints::MAX_NUM_OF_STATES}.

See the example code in the next section.

Changing States

Your animation can contain several states and you can change between the states with or without transitions. A transition is an "edge" between two states that defines what occurs when the safety-critical UI element changes from one state to another. Example of Animation with Safe-Critical UI Elements demonstrates how to use transitions with states in Qt Safe Renderer. For more information about the states, see Qt Quick States.

However, it is also possible to change states without transitions. Then you can use SafeRenderer::QSafeEventChangeState for changing the state.

The following example demonstrates a SafePicture that has two different states and no transitions:

SafePicture {
    id: engineIcon
    width: 40
    height: 40
    x: 40
    y: 40
    source: "iso_grs_7000_4_2423.dat"
    states: [
        State {
            name: "warning"
            PropertyChanges { target: engineIcon; width: 80; height: 80; color: "yellow"}
        State {
            name: "fault"
            PropertyChanges { target: engineIcon; width: 80; height: 80; color: "red"}

Example of Animation with Safe-Critical UI Elements

The Qt Cluster Example demonstrates how you can add animations to SafeImage. In this example, transitions are used during state changes.

SafeImage has two states: a hidden state and a visible state. When you change the state, the opacity value of SafeImage is updated. Similarly, you could update the scale, color, or position of SafeImage.

SafeImage {
    id: turnleft
    objectName: "turnleft"
    source: "qrc:/images/Icon_TurnLeft_ON_small.png"
    width: 30
    height: 30
    opacity: 1.0
    states: [
        State {
            name: "visible"
            PropertyChanges {
                target: turnleft
                opacity: 1.0
        State {
            name: "hidden"
            PropertyChanges {
                target: turnleft
                opacity: 0.0
    transitions: [
        Transition {
            from: "*"
            to: "*"
            NumberAnimation {
                target: turnleft // refers to the id
                properties: "opacity"
                duration: 1000
                easing.type: Easing.InOutQuad

You find the full example code under saferenderer/qtcluster/qml/dash_hybrid/DashboardForm.ui.qml.

Animation API in Qt Safe Renderer

The Qt Safe Renderer animation API provides the following classes:

Available under certain Qt licenses.
Find out more.