添加动画

操作指南：添加动画

Qt Quick Designer 支持以下几种适用于不同用途的动画技术：

• 2D 常见的动态设计技巧
• 状态间动画
• 数据驱动的UI逻辑动画

常见的动态设计技巧

下表总结了2D常见的动态设计技术及其典型应用场景。

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

时间轴动画基于关键帧。在Qt Quick Designer中，关键帧决定了组件在特定时间点的属性值。对属性进行动画处理时，其值会经过中间值过渡，而不是立即变为目标值。

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

缓动曲线

有时您可能不希望采用线性运动，而是希望矩形在动画开始时移动得更快，结束时移动得更慢。要实现这种效果，您可以在起始帧和结束帧之间插入大量关键帧。为了避免这种繁琐操作，您可以指定缓动曲线，以实现关键帧之间的非线性插值。 缓动曲线可以使组件在动画开始时加速、在动画结束时减速，或者在动画结束时产生反弹效果。

动画曲线

虽然缓动曲线适用于大多数简单的 UI 动画，但更复杂的动画需要多个关键帧，因此有必要同时可视化关键帧的数值及其插值情况。 “Curves ”视图可一次性可视化显示某个属性的整个动画，并同时显示关键帧的有效值以及关键帧之间的插值情况。它还可以同时显示不同属性的动画，以便您并排查看 x 位置和 y 位置的动画。

状态到状态的动画

要在 UI 状态之间切换，请使用基于关键帧的过渡时间轴，在 UI 的不同状态之间进行过渡。您可以为关键帧应用缓动曲线。

状态之间的过渡

UI 的设计旨在根据不同场景呈现不同的界面配置，或响应用户交互而调整外观。通常，会同时进行多项更改，从而使 UI 能够被直观地看到从一种状态向另一种状态的内部转变。

这通常适用于所有用户界面，无论其复杂程度如何。例如，照片查看器最初可能以网格形式显示图片；当点击某张图片时，界面会切换到详细状态，此时该图片被放大显示，且界面布局发生变化以提供新的图片编辑选项。 而在另一端，当按下按钮时，它可能会切换到“按下”状态，此时其颜色和位置会发生变化，使其看起来像是被按下了。

任何组件都可以在不同状态之间切换，以应用一系列更改来修改相关组件的属性。每个状态都可以呈现不同的配置，例如：

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

状态变化会引发突兀的运动，您可以通过使用过渡效果使其在视觉上更具吸引力。过渡是一种动画类型，它会对状态变化引起的属性变化进行插值处理。

在“Transitions ”视图中，您可以为每个属性的过渡设置起始帧、结束帧和持续时间。您还可以为每个动画设置缓动曲线，并设定整个过渡的最大持续时间。

基于数据的用户界面逻辑动画

下表总结了利用后端提供的真实数据或模拟数据来实现 UI 逻辑动画的技术。

数据驱动的时间轴动画

您可以将属性值连接到数据后端，以驱动时间轴动画。您可以从各种来源（例如数据模型、JavaScript 文件和后端服务）获取数据。

您可以将这些数据源连接到时间轴的当前帧，当后端更改当前帧的属性时，便会生成动画。

例如，您可以将后端传来的速度值连接到仪表盘中的转速表指针。随着后端传来的速度值增加或减少，指针动画会在时间轴的一端与另一端之间移动。

编程动画

您可以通过编程方式控制属性动画。属性动画是通过将Animation 组件绑定到组件实例的属性值来创建的，从而随时间推移逐步改变属性值。属性动画通过在属性值变化之间进行插值来实现平滑运动。它们提供了时间控制功能，并可通过缓动曲线实现不同的插值效果。

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

您可以在“Components ”>“Default Components ”>“Animation ”中创建预设动画组件的实例，根据属性的类型和所需的行为来制作动画。

有关Animation 组件及其属性的更多信息，请参阅“动画属性变化”。