C
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:
- Animation and Transitions in Qt Quick
- Important Concepts in Qt Quick - States, Transitions and Animations
- Timeline Animations describes how you can create timeline animations in Qt Quick Designer
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.
- The number of states per safe item is constrained by Constraints::MAX_NUM_OF_STATES. As the implicit default state consumes always one state, you can use MAX_NUM_OF_STATES-1 states. See also Known Issues in Animations and Customizing Animation Default Values.
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:
- Constraints::ANIMATION_DATA_READ_BUFFER holds the size of animation data read buffer
- Constraints::ANIMATION_TIMER_TICK_IN_MS holds the animation timer in milliseconds. In the QNX Screen and OpenWFD graphics adaptation the animation timer is tied to the VSync interval and thus ANIMATION_TIMER_TICK_IN_MS in ignored.
- Constraints::MAX_ANIMATION_STEPS holds the maximum number of animation steps
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.