4. QtDesignStudio使用TimeLine添加动画

1. 说明：

在QML中可以使用各种动画组件为元素的属性变化设计不同的动画展现形式，以丰富界面交互效果。在使用 Qt Design Studio 进行界面设计时，可以在TimeLine窗口添加时间线，在时间线上为不同控件的不同属性添加动画。

2. 具体操作：

首先，在菜单栏的view->Views中将TimeLine窗口调出来，点击窗口的左上角即可添加一条时间线，如下图所示：

注意：时间线和当前页面状态是对应的，一个状态对应一个时间线，如果有多个状态，则在其他状态中应该单独添加时间线。
弹出TimeLine设计窗口后，会看到上中下三部分选项卡，上面部分是TimeLine Settings，就是用来设置时间线的，包括名称TimeLine ID，起始帧Start frame，结束帧End frame，结束帧和起始帧之间的差值决定了时间线的动画时长，中间部分是timelineAnimation,为时间线添加一个动画控制器，利用该动画控制时间线 currentFrame 属性值，属性包含名称Animation ID，是否启动立即运行Running in base state，起始帧Start frame，结束帧End frame，一般和TimeLine Setting中的起始帧和结束帧保持一致，时间周期Duration，是否连续Continuous，执行次数Loops，是否启动回弹效果Ping Pong，结束后停留的状态Finished。最下面的窗口是绑定窗口，如果有多个状态，多条时间线和动画控制器，可在此窗口进行组合绑定，如下图所示：

如果上图中不使用timelineAnimation,可以点击右上角的 - 号将其删掉，此时在TimeLine Setting选项卡的Expression Binding选项将变为可编辑状态，可以在编辑框中设置时间线 currentFrame 属性的绑定，如下图所示：

使用上述任意一种方式设置完成后，点击右下角的 close按钮，即可成功添加时间线。Timeline视图窗口此时会更新为可添加关键帧的状态，界面上的相关功能如下图所示：

在开始对控件的属性设置动画时，先将时间线拖动到第 0 帧处，然后该点亮上图中的动作捕捉按钮，点亮状态下，将鼠标移至需要添加动画的属性处，点击其左侧的设置按钮，选择Insert Keyframe选项，如下图所示：

此时将会在第 0 帧为属性opacity添加一个关键帧，关键帧的值就是当前状态的值，假设动画时长设置为1秒钟，则将时间线设置为1000帧处，在已经出现在时间线窗口中的属性上右键鼠标，选择Insert New Keyframe，即可在1000帧处创建一个新的关键帧。

双击1000帧处的关键帧图标，更改当前关键帧的数值，如下图所示：

最后关闭动作捕捉按钮，即可完成对透明度属性的动画设置。
实际效果（slider控制背景色的透明度）

TimeLine使用

持续更新中，请大家多多关注…