添加动画

如何添加动画

Qt Quick Designer 支持以下类型的动画技术，它们适用于不同的用途：

• 常见的二维运动设计技术
• 状态到状态动画
• 数据驱动的用户界面逻辑动画

常见的动作设计技术

下表总结了常见的二维运动设计技术及其典型用例。

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

时间轴动画基于关键帧。在Qt Quick Designer 中，关键帧决定了组件属性在特定时间的值。属性动画可使其值在中间值之间移动，而不是立即变为目标值。

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

缓和曲线

有时你并不希望矩形做线性移动，而是希望在动画开始时移动得更快，而在动画结束时移动得更慢。要达到这种效果，可以在开始帧和结束帧之间插入大量的关键帧。为了避免这种麻烦，可以在关键帧之间指定用于非线性插值的缓和曲线。缓和曲线可以使元件在动画结束时出现加速、减速或反弹的效果。

动画曲线

对于大多数简单的用户界面动画来说，缓和曲线都能很好地发挥作用，但更复杂的动画则需要多个关键帧，因此有必要同时可视化关键帧的值和插值。Curves 视图可同时显示属性的整个动画，并显示关键帧的有效值和关键帧之间的插值。它还可以同时显示不同属性的动画，这样就可以同时看到 x 位置的动画和 y 位置的动画。

状态间动画

要在用户界面状态之间进行导航，可使用基于关键帧的过渡时间线在用户界面的不同状态之间进行过渡。您可以在关键帧上应用缓和曲线。

状态之间的过渡

用户界面的设计目的是在不同场景中呈现不同的用户界面配置，或根据用户交互修改外观。通常情况下，用户界面会同时发生几种变化，因此可以看到用户界面从一种状态到另一种状态的内部变化。

无论用户界面的复杂程度如何，这一点都普遍适用。照片查看器最初可能会以网格形式显示图片，当点击图片时，就会切换到详细状态，在这种状态下，单张图片会被展开，界面也会发生变化，以显示新的图片编辑选项。在另一端，当按下按钮时，它可能会变为按下状态，其颜色和位置会被修改，使其看起来像是被按下。

任何组件都可以在不同状态之间切换，以应用修改相关组件属性的变化集。每个状态都可以呈现不同的配置，例如

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

状态变化会带来突然的运动，可以通过使用转场动画使其在视觉上更具吸引力。转场动画是一种动画类型，可对状态变化引起的属性变化进行插值。

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

数据驱动的 UI 逻辑动画

下表总结了通过使用来自后台的真实或模拟数据来制作 UI 逻辑动画的技术。

数据驱动时间线动画

你可以将属性值连接到数据后台，以驱动时间线动画。你可以从数据模型、JavaScript 文件和后端服务等各种来源获取数据。

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

例如，您可以将后端的速度值连接到集群中的转速表刻度盘。当速度值从后端增加或减少时，指针动画就会从时间线的一端移动到另一端。

编程动画

你可以通过编程控制属性动画。属性动画是通过将Animation 组件与组件实例的属性值绑定来创建的，以便随着时间的推移逐渐改变属性值。属性动画通过在属性值变化之间插入数值来实现平滑移动。它们提供定时控制，并通过缓和曲线实现不同的插值。

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

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

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