Qt Design Studio教程（4）登录界面制作-时间轴

何名取
2,578 阅读6分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

📒博客首页：何名取 的个人主页 - 文章 - 掘金 (juejin.cn)
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
❤️期待一起交流！
🙏作者水平很有限，如果发现错误，求告知，多谢！
🌺有问题可私信交流！！！

切换动画

本节看完你将学会：

  1. 使用时间轴
  2. 添加时间轴动画
  3. 使用缓动曲线

前言

登录界面制作-时间轴是系列教程中的第四节，该系列教程将说明如何使用Qt Design Studio使用一些基本的UI组件(如页面、按钮和输入框)创建一个简单的UI。本节描述了如何使用时间轴和状态来为UI组件添加动画。

在登录界面制作-状态中，学习了如何使用状态来模拟UI中的页面更改，以及如何使用连接来提供与UI的用户交互。在本部分中，您将学习另一种为UI制作动画的方法，即创建绑定到状态的时间轴动画。

为UI组件添加动画

在登录界面制作-状态中，更改了不同状态下的可见性属性，以模拟更改页面。为了确保这些更改不会影响接下来要对不透明度属性进行的更改，首先要删除这些状态。

然后，您将添加一个时间线，并为不透明度属性插入关键帧，以隐藏登录页面上的Retype Password字段和帐户创建页面上的Create Account按钮。因为我们想要重新输入密码字段从密码字段滑下来，您还需要为它的锚边属性插入一个关键帧。为了使锚点具有动画效果，您还需要从列组件中取出字段，并将它们固定到矩形或彼此固定。

用锚代替列

首先，要为Screen01组件添加动画:

  1. 双击打开Screen01.ui.qml跳转到Form Editor编辑页面
  2. 在States视图中，选择login，然后删除状态。同样删除createAccount状态
  3. 在Navigator中选择username，然后选择将其移动到父矩形中，以准备删除字段列组件实例
  4. 选择将username移动到Navigator中的tagLine下面，以保持组件层次结构
  5. 对password组件和repeatPassword重复上面对username组件的操作
  6. 删除fields列
  7. 在Navigator中选择username，以在Properties中显示其属性
  8. 选择Layout将username的顶部锚定到tagLine的底部，边距设置为170
  9. 将username水平锚定到它的父级

image.png

  1. 在Navigator中选择password以在Properties中显示其属性
  2. 选择Layout以20像素的空白将password的顶部锚定在username的底部
  3. 将password水平锚定到它的父级
  4. 重复上述步骤，将repeatPassword的顶部以20像素的边距固定在password的底部，并将其水平固定在其父节点上
  5. 选择File > Save或按Ctrl+S保存更改

添加时间轴和动画

添加一个带有动画的时间轴:

  1. 选择View > Views > Timeline以打开Timeline视图
  2. 在时间轴中，选择添加1000帧的时间轴和动画
  3. 将Animation ID设置为toCreateAccountState
  4. 取消选中“Running in base state”复选框，因为这样可以让动画只在用户单击“Create Account”按钮后运行。其他情况可以使用默认设置
  5. 关闭以保存时间轴和动画的设置

image.png

插入关键帧

现在你将在Timeline中插入关键帧并记录属性变化:

  1. 在Navigator中选择repeatPassword以在Properties中显示其属性
  2. 在Visibility > Opacity中，选择设置 > Insert Keyframe，为组件的不透明度属性插入一个关键帧
  3. 在Timeline中，双击repeatPassword检查播放头是否在帧0位置，并选择录制按钮(Per Property Recording)，记录repeatPassword透明度属性的变化

image.png

  1. 设置opacity为0
  2. 将播放头移动到1000帧，并将不透明度值更改为1以显示按钮。要微调关键帧的值，也可以右键单击关键帧标记，并选择Edit keyframe
  3. 再次选择记录按钮以停止记录属性更改
  4. 在Navigator中选择createAccount，并重复上述步骤，为按钮的不透明度属性插入一个关键帧，并记录更改。但是，这一次透明度值需要在第0帧为1，在第1000帧为0
  5. 选择File > Save或按Ctrl+S保存更改

沿着时间轴移动播放头时，可以看到createAccount按钮如何淡出，而repeatPassword淡入。

接下来为repeatPassword添加锚动画，使它看起来像是从password滑下来。

锚边动画

  1. 在Navigator中选择repeatPassword以在Properties中显示其属性
  2. 在Layout > Margin，选择设置 > Insert Keyframe为repeatPassword的顶部锚边插入关键帧
  3. 在Timeline中，检查播放头是在帧0，并选择录制按钮记录repeatPassword的anchors.topMargin属性变化
  4. 为anchors.topMargin设置一个负值-40，以便将repeatPassword放在password的顶部
  5. 将播放头移动到帧1000，并将anchors.topMargin更改为20。这样，结合不透明度值的更改，repeatPassword看起来会向下滑动并位于password下方
  6. 再次选择录制按钮以停止记录anchors.topMargin属性更改
  7. 选择File > Save或按Ctrl+S保存更改

添加缓动曲线

现在要给锚边动画添加一条缓动曲线，让过渡看起来更平滑:

  1. 选中anchors.topMargin时间轴的1000帧处的菱形标记🔶
  2. 右键单击关键帧标记打开上下文菜单，选择Edit Easing Curve添加一个Easing曲线到动画中
  3. 在Easing Curve Editor中，选择easeoutsin

image.png

接下来，将为登录和帐户创建页面创建状态，并为它们绑定动画

将动画绑定到状态

现在将在States视图中返回的状态绑定到Timeline中的动画:

  1. 在States中，选择Create New State添加两个ID为login和createAccount的状态。不需要做任何属性更改，因为要将状态绑定到属性动画
  2. 在States中，选择login打开Actions菜单，然后选择Set as Default以确定在应用程序启动时应用登录状态
  3. 在Timeline中，选择工具栏上的(Timeline Settings (S))按钮(或按S)打开Timeline Settings对话框
  4. 双击createAccount行的Timeline列中的单元格，中选择timeline
  5. 双击createAccount行中Animation列中的单元格，并选择toCreateAccountState
  6. 单击Close保存设置
  7. 选择File > Save或按Ctrl+S保存更改

image.png

Timeline

Qt Quick Timeline模块提供了使用时间轴和关键帧在ui中对组件属性进行动画处理的组件。动画属性使它们的值能够通过中间值移动，而不是立即改变为目标值。

Keyframe组件指定时间轴上关键帧的值。Qt Design Studio自动在两个关键帧之间添加关键帧，并均匀地设置它们的值，以创建一个运动或变换的外观。缓动曲线可以附加到关键帧，以改变动画的外观。

为了能够使用Timeline组件的功能，Qt Design Studio在它使用组件的UI文件中添加了以下import语句:

 import QtQuick.Timeline 1.0
avatar
文章
阅读
粉丝