创建时间线动画

您可以创建时间线和基于关键帧的动画，通过指定关键帧的中间值进行线性插值，而不是立即切换到目标值。

您还可以将时间线与滑块等组件的属性值绑定，并以此控制动画。

添加时间线

在Timeline 视图中使用基于时间线和关键帧的编辑器来制作组件属性的动画。在创建时间线之前，视图是空的。

以下视频展示了如何在Timeline 中为组件属性插入关键帧并制作动画：

创建时间轴

创建时间轴，为 UI 组件制作动画：

1. 转到View >Views >Timeline 。
2. 选择 (Add Timeline) 以指定时间线和运行动画的设置。

   

3. 在Timeline Settings ：
   1. 在Timeline ID 中，输入描述时间线的 ID。
   2. 在Start frame 中，设置时间线的第一帧。允许使用负值。
   3. 在End frame 中，设置时间线的最后一帧。
4. 在Animation Settings ：
   1. 在Animation ID 中，输入动画的 ID。
   2. 在Start frame 中，设置动画的第一帧。
   3. 在End frame 中，设置动画的最后一帧。
   4. 在Duration 中，以毫秒为单位设置动画的长度。

   有关可选动画设置的用途，请参阅工具提示。

5. 选择Close 关闭对话框并保存设置。

   

现在可以为要动画的属性设置关键帧。

设置关键帧值

创建时间线时，Qt Quick Designer 会为时间线创建一个动画。您可以为时间线创建任意数量的动画。例如，您可以创建动画来运行时间线的一小部分，或倒退运行时间线。

要为Timeline 视图中的组件制作动画，需要为要制作动画的属性设置关键帧值。 Qt Quick Designer 会自动在两个关键帧之间添加关键帧，并均匀设置其值，以创建运动或变换等效果。

为组件属性设置关键帧值：

1. 在Navigator 视图中，选择要制作动画的组件。
2. 在Properties 视图中，为要制作动画的属性选择 (Actions) >Insert Keyframe 。

   

3. 在Timeline 视图中，选择Per Property Recording 按钮开始记录属性变化。

   

4. 确保播放头位于第 0 帧，并在时间轴上属性名称旁边的字段中输入属性值。选择 "回车"保存数值。
5. 将播放头移动到时间线上的另一帧，并指定该帧的值。有关更多信息，请参阅时间线导航。
6. 当您指定了所需的全部值后，再次选择Per Property Recording 以停止记录。

创建用于状态的时间线

您可以在States 视图中添加的状态中创建多个时间线。

要为第二个状态创建时间线，请执行以下操作

1. 转到Timeline >Timeline Settings 。
2. 选择 ，创建另一条时间线。
3. 在Animation Settings 选项卡下的表格中，为要使用时间线的状态设置时间线。

   

将时间线绑定到属性

将时间线与组件属性绑定后，动画的当前帧将由属性值控制。

在本例中，你将时间线绑定到一个滑块组件。

创建了时间线并设置了关键帧值：

1. 从Components 拖动一个滑块到2D 或Navigator 视图。
2. 在Navigator 中，选择滑块，在Properties 中，将To 设置为 1000。

   注意： 如果想用滑块控制整个动画，滑块的From 和To 值应与时间线的Start Frame 和End Frame 值一致。

3. 在Timeline Settings 对话框中，选择Animation Settings 选项卡旁边的 ，删除动画。如果有多个动画，请全部删除。
4. 在Expression binding 中，输入slider.value 。

   

将动画绑定到状态

将动画绑定到状态，以便在进入状态时运行动画。

在Timeline Settings 对话框底部的表格中：

1. 双击Timeline 中的值，然后选择带有要绑定到状态的动画的时间线。
2. 双击Animation 中的值，然后选择要绑定到状态的动画。

   

要在不运行动画的情况下将状态绑定到动画中的某个关键帧，请在Fixed Frame 中设置关键帧。

管理关键帧

编辑关键帧

要删除为某个属性记录的所有更改，请右键单击时间轴上的属性名称并选择Remove Property 。

要在播放头的当前位置向组件的关键帧轨道添加关键帧，请右键单击时间轴上的组件名称并选择Add Keyframes at Current Frame 。

时间轴上的关键帧会以不同的颜色和形状标记，具体取决于关键帧是激活还是未激活，或是否应用了缓和曲线。

编辑关键帧值

要微调关键帧的值，可双击关键帧标记，或右键单击关键帧标记并在上下文菜单中选择Edit Keyframe 。

Edit Keyframe 对话框会显示您要动画的属性名称及其在Frame 中指定帧的当前值。您可以同时更改关键帧及其值。

复制关键帧

您可以从一个组件的关键帧轨迹中复制关键帧，然后粘贴到另一个组件的关键帧轨迹中。

要将一个轨道上的所有关键帧复制到另一个轨道上，请执行以下操作

1. 右键单击该组件 ID，在上下文菜单中选择Copy All Keyframes 。
2. 右键单击另一个组件 ID，在上下文菜单中选择Paste Keyframes 。

删除关键帧

要删除关键帧，请右键单击该关键帧，然后在上下文菜单中选择Delete Keyframe 。

要删除所选组件的所有关键帧，请右键单击Timeline 中的组件名称，然后在上下文菜单中选择Delete All Keyframes 。

导航时间线

您可以通过以下方式浏览时间线：

• 拖动播放头 (1) 到某一帧。
• 单击标尺 (2) 移动到一个帧。
• 选择Start Frame (Home) 、Previous Frame (,) 、NextFrame (.) 或End Frame (End) 按钮 (3)，或使用键盘快捷键移动到时间线上的第一帧、上一帧、下一帧或最后一帧。
• 在当前关键帧字段 (4) 中输入帧的编号，即可移动到该帧。
• 选择时间轴上属性名称旁边的Previous 和Next 按钮 (5)，可移动到该属性的上一个或下一个关键帧。

缩放时间线

使用工具栏上的滑块在Timeline 中设置缩放级别。选择 和 按钮放大或缩小视图。

设置关键帧轨迹颜色

要更改关键帧轨迹的颜色，请在上下文菜单中选择Override Color ，然后在颜色选择器中选择一种颜色。要重置颜色，请选择Reset Color 。

查看动画

要预览动画，请在Timeline 视图中执行以下操作之一：

• 沿时间线拖动播放头。
• 选择 (Play) 或Space。

要预览整个用户界面，请从顶部工具栏选择运行下拉菜单，然后选择Live Preview ，或选择Alt+P。

旋转动画

要为围绕中心点旋转的组件制作动画，可以使用Item组件作为旋转组件的父组件。然后为项创建一条时间线，并为开始和结束关键帧设置旋转属性。

形状动画

您可以使用 Qt Quick Shapes Design Helpers为以下形状制作动画：

• 椭圆形
• 矩形
• 正多边形
• 星形