动画技术入门

Qt 设计工作室支持以下适合不同目的的动画技术

• 2D 和 3D 的常用动态设计技术
• 屏幕到屏幕或状态到状态的动画
• 数据驱动 UI 逻辑动画

常见动态设计技术

以下表格总结了常见 2D 和 3D 动态设计技术和它们的典型使用案例。

基于时间轴和关键帧的动画

时间轴动画基于关键帧。在 Qt 设计工作室中，关键帧确定组件属性在某一时刻的值。通过动画属性，它们的值可以移动到中间值，而不是立即更改到目标值。

例如，您可以将矩形的 y 位置属性在动画开始时设置为 0，在动画结束时设置为 100。当动画运行时，矩形在 y 轴上从位置 0 移动到 100。在动画中间，由于关键帧默认情况下是线性插值的，y 属性的值是 50。

缓动曲线

有时候你不想进行线性移动，而是希望矩形在动画开始时移动更快，在动画结束时移动更慢。为了实现这种效果，你可以在起始帧和结束帧之间插入大量关键帧。为了避免这种努力，你可以指定在关键帧之间的非线性插值中的缓动曲线。缓动曲线可以使组件看起来加速、减速或动画结束时弹回。

动画曲线

虽然缓动曲线对于大多数简单的UI动画效果很好，但更复杂的3D动画需要多个关键帧，因此必须同时可视化关键帧的值和插值。在曲线视图中，可以一次可视化属性的整体动画，并显示关键帧之间的有效值以及插值。它还可以同时显示不同属性的动画，以便您可以并排看到x位置和y位置的动画。

屏幕到屏幕或状态到状态动画

以下表格总结了用于在屏幕和UI状态之间导航的技术。

应用程序流程

您可以将应用程序设计成示意图的形式，图中通过符号显示了应用程序UI的所有重要组件及其相互连接。这将产生一个可点击的交互式原型，可以模拟应用程序的用户体验。代码将在后台创建，并可用于应用程序的生产版本。

更多信息，请参阅设计应用程序流程。

状态间转换

UI设计旨在在不同场景中展示不同的UI配置，或根据用户交互修改其外观。通常，同时进行多项更改，以便可以看到UI从一种状态内部变为另一种状态。

这适用于所有复杂性级别的UI。图片查看器最初可能以网格形式展示图像，点击图像后，变为详细状态，扩展单个图像，并且界面更改以展示图像编辑的新选项。在另一端，当按钮被按下时，它可能变为按下状态，其中其颜色和位置被修改，看起来像被按下。

任何组件都可以在不同状态之间进行转换，以应用修改相关组件属性的更改集。每个状态都可以展示不同的配置，例如

• 显示一些UI组件，隐藏其他组件。
• 向用户展示不同的可用操作。
• 开始、停止或暂停动画。
• 执行新状态中需要的一些脚本。
• 更改特定组件的属性值。
• 显示不同的视图。

状态更改引入了突然的运动，您可以通过使用转换使其更具视觉吸引力。转换是动画类型，它插值状态变化引起的属性变化。

在过渡中，您可以设置每个属性过渡的开始帧、结束帧和持续时间。您还可以为每个动画设置一个缓动曲线以及整个过渡的最大持续时间。

数据驱动的UI逻辑动画

以下表格总结了使用来自后端的真实或模拟数据来动画化UI逻辑的技术。

数据驱动的时间线动画

您可以将属性值连接到数据后端以驱动时间线动画。您可以从各种来源获取数据，例如数据模型、JavaScript文件和后端服务。您还可以将您的UI连接到Simulink以加载来自Simulink模拟的实时数据。

您可以将这些数据源连接到时间线的当前帧，在后端更改当前帧属性时创建动画。

例如，您可以从后端将速度值连接到一个集群中的转速表表盘。随着后端中的速度值增大或减小，它会将指针动画从时间线的一端移动到另一端。

有关更多信息，请参阅模拟复杂体验。

程序动画

您可以通过程序控制属性动画。属性动画是通过将动画组件绑定到组件实例的属性值来创建的，从而随着时间的推移逐渐更改属性值。属性动画通过插值在属性值变化之间应用平滑的运动。它们提供时间控制并可以通过缓动曲线启用不同的插值。

开发人员可以通过使用start()、stop()、resume()、pause()、restart()和complete()函数来控制属性动画的执行。

您可以根据属性的类型和您想要的交互行为创建预设动画组件的实例，这些组件位于组件 > 默认组件 > 动画中。

有关动画组件及其属性的信息，请参阅动画。