C

安全关键UI中的动画

从Qt Safe Renderer 1.2版本开始，您可以为安全关键UI元素添加动画。通常，Qt Safe Renderer支持动画框架，就像在Qt Quick中一样，通过将动画类型应用于属性值来创建动画。动画类型通过插值属性值来创建平滑的过渡。此外，状态转换还可以将动画分配给状态更改。Qt Safe Renderer特定的限制在Qt Safe Renderer中的动画限制中描述。

您可以通过Qt Quick Designer或Qt Design Studio使用安全关键UI元素创建动画。

使用安全关键UI元素，您可以设置元素的位置、缩放、颜色和不透明度。还支持时间线动画，您可以在同一动画序列中更改多个属性。

有关更改动画默认值的信息，请参阅自定义动画默认值。

以下页面提供了有关在Qt Quick中使用动画的更多信息

动画中的已知问题

当您动画化安全关键UI元素的大小（即高度和宽度）时，将生成一个不同尺寸的位图集。这会增加运行时内存消耗，因为需要更多的内存来存储位图。

当您在动画中使用不透明度功能时，您必须记住，不透明度值0将使安全关键UI元素在UI中不可见。

当您增加Constraints::MAX_NUM_OF_STATES时，会显著增加内存消耗。

如果以下异常之一发生，您应增加qsafeconstraints.h中相关的约束值

异常	约束值
SafeRenderer::QSafeStateLoader::OutOfCache	Constraints::ANIMATION_DATA_READ_BUFFER
SafeRenderer::QSafeStates::IndexOutOfBounds	Constraints::MAX_NUM_OF_STATES
SafeRenderer::QSafeAnimations::IndexOutOfBounds	Constraints::MAX_NUM_OF_ANIMATIONS_PER_ITEM

在创建时间线动画时，指定起始和结束值的KeyframeGroup QML类型以确保在布局动画构建中考虑到这些值

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
    }
}

Qt Safe Renderer中的动画限制

当您为安全关键UI元素动画时，应注意以下限制

NumberAnimation QML类型是唯一从PropertyAnimation继承的，且在Qt Safe Renderer中被支持
必须通过使用状态来完成转换。有关更多信息，请参阅状态更改期间的转换。注意！可以不使用转换使用状态。有关更多信息，请参阅更改状态。
无法将动画绑定到属性更改。
不支持并行或顺序动画。
在动画中不支持动态文本缩放。
如果使用Qt Design Studio进行时间轴动画，生成的代码可能包含循环或ping pong功能，这些在Qt Safe Renderer中不受支持。
每个安全元素的州数量受限于Constraints::MAX_NUM_OF_STATES。由于隐式默认状态始终消耗一个状态，因此您可以使用MAX_NUM_OF_STATES-1个状态。有关更多信息，请参阅动画中的已知问题和自定义动画默认值。

缓动曲线

PropertyAnimation QML类型提供了easing.type枚举，它指定动画使用的缓动曲线。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

如果时间轴或过渡动画包含不支持的缓动曲线，则将其替换为线性动画，即不使用任何缓动曲线。

自定义动画默认值

动画中的默认帧率是每秒64帧。您可以通过使用Qt Safe Layout Tool并使用-fps <frame-rate>选项来更改它。动画帧率必须与您的目标屏幕刷新率相匹配。有关更多信息，请参阅Qt Safe Renderer Tools。

SafeRenderer::Constraints包含Qt Safe Renderer的各种约束值，其中一些值可以在 Quadrant's qsafeconstraints.h中更改。以下约束值影响动画，是可定制的

Constraints::ANIMATION_DATA_READ_BUFFER包含动画数据读取缓冲区的大小
Constraints::ANIMATION_TIMER_TICK_IN_MS包含动画计时器（毫秒）。在QNX屏幕和OpenWFD图形适应性中，动画计时器绑定到VSync间隔，因此ANIMATION_TIMER_TICK_IN_MS被忽略。
Constraints::MAX_ANIMATION_STEPS包含动画步骤的最大数量

动画持续时间

动画的最大长度定义为ANIMATION_TIMER_TICK_IN_MS和MAX_ANIMATION_STEPS的组合。例如，如果ANIMATION_TIMER_TICK_IN_MS为16毫秒且MAX_ANIMATION_STEPS为每秒64帧，则动画的最大长度为1024毫秒。

动画持续时间定义为毫秒，在Duration属性中。如果您修改ANIMATION_TIMER_TICK_IN_MS和MAX_ANIMATION_STEPS，则需要修改持续时间属性。

定义状态

建议在安全元素内部定义状态和转换，而不是在根项下。采用此方法可简化状态逻辑。当在根项下定义状态和转换时，您很容易达到由SafeRenderer::Constraints::MAX_NUM_OF_STATES定义的限制。

请参阅下一节中的示例代码。

更改状态

动画可以包含多个状态，并且您可以在这些状态之间切换，有无过渡均可。过渡是两个状态之间的“边”，定义了当与安全关键UI元素的状态从一种转换到另一种状态时发生什么。《安全关键UI元素的动画示例》演示了如何在Qt Safe Renderer中使用过渡切换状态。有关状态的更多信息，请参阅Qt Quick States。

但是，也可以不使用过渡来改变状态。然后您可以使用SafeRenderer::QSafeEventChangeState来更改状态。

以下示例演示了一个SafePicture，它有两个不同的状态且没有过渡。

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"}
        }
    ]
}

安全关键UI元素的动画示例

Qt Cluster Example演示了如何向SafeImage添加动画。在此示例中，状态改变时使用了过渡。

SafeImage有两个状态：隐藏状态和可见状态。当您改变状态时，SafeImage的透明度值将被更新。同样，您也可以更新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
            }
        }
    ]
}

完整的示例代码位于saferenderer/qtcluster/qml/dash_hybrid/DashboardForm.ui.qml下。

Qt Safe Renderer中的动画API

Qt Safe Renderer动画API提供了以下类

输出验证影响安全关键UI元素可见性的功能

在特定的Qt许可证下可用。
了解更多信息。