创建时间轴动画

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

您还可以将时间轴绑定到组件（例如滑块）的属性值，并通过这种方式控制动画。

添加时间轴

使用“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 帧，并在时间轴上属性名称旁边的字段中输入该属性的值。按Enter 键保存该值。
5. 将播放头移至时间轴上的另一个帧，并指定该帧的值。有关详细信息，请参阅“浏览时间轴”。
6. 指定完所需的所有值后，再次选择“Per Property Recording ”以停止录制。

创建用于状态的时间线

您可以创建多个时间轴，供在“States ”视图中添加的状态使用。

要为第二个状态创建时间轴：

1. 转到“Timeline ” > “Timeline Settings ”。
2. 选择“ ”以创建另一个时间轴。
3. 在“Animation Settings ”选项卡下方的表格中，为需要使用该时间轴的状态设置时间轴。

   

将时间轴绑定到属性

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

在此示例中，您将时间线绑定到一个滑块组件。

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

1. 从“Components ”中，将一个滑块拖动到“2D ”或“Navigator ”视图中。
2. 在Navigator 中，选择“slider”；在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 ）或按空格键。

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

制作旋转动画

若要为围绕中心点旋转的组件添加动画效果，可将“Item”组件设为旋转组件的父级。随后为“Item”创建时间轴，并在起始和结束关键帧中设置旋转属性。

形状动画

您可以使用 Qt Quick Shapes Design Helpers 对以下形状进行动画处理：

• 椭圆形状
• 矩形形状
• 正多边形形状
• StarShape