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

admin 2022年11月3日18:54:42安全开发评论9 views3087字阅读10分17秒阅读模式

切换动画

本节看完你将学会:

  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水平锚定到它的父级

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

  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. 关闭以保存时间轴和动画的设置

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

插入关键帧

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

  1. 在Navigator中选择repeatPassword以在Properties中显示其属性

  2. 在Visibility > Opacity中,选择设置 > Insert Keyframe,为组件的不透明度属性插入一个关键帧

  3. 在Timeline中,双击repeatPassword检查播放头是否在帧0位置,并选择录制按钮(Per Property Recording),记录repeatPassword透明度属性的变化

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

  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

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

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

将动画绑定到状态

现在将在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保存更改

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

Timeline

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

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

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

 import QtQuick.Timeline 1.0


作者:何名取
链接:https://juejin.cn/post/7102783235091857444
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


原文始发于微信公众号(汇编语言):Qt Design Studio教程(4)登录界面制作-时间轴

特别标注: 本站(CN-SEC.COM)所有文章仅供技术研究,若将其信息做其他用途,由用户承担全部法律及连带责任,本站不承担任何法律及连带责任,请遵守中华人民共和国安全法.
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年11月3日18:54:42
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                  Qt Design Studio教程(4)登录界面制作-时间轴 http://cn-sec.com/archives/1388328.html

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: