效果演示:
参考:https://doc.qt.io/qtcreator/qtcreator-transitions-example.html
一、创建工程
选择文件 > 新建文件或项目 > Application (Qt Quick) > Qt Quick Application - Empty
按照流程修改项目目录、名称、编译器等。
创建好的项目如下图:
使用Text Editor模式打开main.qml,向导模板建立的根元素为Window,该类型的元素不支持添加状态。因此需要使用Rectangle元素替代Window元素,同时要移除window元素的title属性。
原main.qml
代码:
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
}
修改后main.qml
代码
import QtQuick 2.12
import QtQuick.Window 2.12
Rectangle {
width: 640
height: 480
visible: true
}
二、创建主视图
将main.qml切换到设计模式。
选择Library > Assets > Add New Assests,定位到自己想要添加图片的目录即可将其添加到项目目录,将图片从Assets内拖拽到Navigator内。
在属性(Properties)中,编辑图片的属性。
- 在id栏,输入:icon
- 在Position栏,设置X为10,Y为10。
- 在size栏,设置W为50,H为50。
在右侧Library > QML Type > Qt Quick Basic,选择Rectangle拖动到界面中。
在属性(Properties)中,编辑矩形的属性。
-
在id栏,输入:topLeftRect
-
在size栏,设置W为50,H为50,使矩形的尺寸匹配图片的尺寸。
-
在Color栏,点击Transparent按钮,使图像具有透明度
-
在Border Color栏,设置border color为
#808080
使得矩形在白色背景上可见。
-
点击Layout,分别点击Top和Left 按钮,使矩形位于左上角。
-
在Margin栏,top anchor选择20,left anchor选择10。
-
在Library中选择Mouse Area拖拽到Navigator中的topLeftRect。
-
点击Layout,并且点击Fill to Parent按钮使mouse area充满rectangle。
-
在Navigator,复制topLeftRect(Ctrl+C)将该目标复制到Navigator两次(Ctrl+V),并且分别重命名为 topLeftRect1 和 topLeftRect2。
-
选择topLeftRect1并编辑属性。
- 在id栏,输入middleRightRect。
- 在Layout选择Vertical Center按钮,再按Right按钮。
- 在Margin栏,right anchor选择10,vertical center anchor选择0
-
选择topLeftRect2并编辑属性。
- 在id栏,输入bottomLeftRect。
- 在Layout选择Bottom按钮,再按Left按钮。
- 在Margin栏,bottom anchor选择10,lrft anchor选择0。
-
按Ctrl+S保存更改。
UI设计已经完成。
三、连接Mouse Area与状态转换
当点击界面时,使图片在矩形之间切换,我们需要添加状态,使icon的x和y坐标匹配三个矩形的位置。因此,需要连接onClicked信号与mouse areas来切换状态。
为了保证矩形能够按照设定尺寸显示在不同尺寸的显示器上,需要约束icon的x、y和这些矩形。
-
在States视图,选择Create New State三次,创建State1,State2和State3。
-
在States内选择State1。
-
打开Actions菜单,并且选择State1作为默认状态。
-
在States内选择State2。
-
在Navigator选择icon并且在Form Ediitor内将其拖拽到中间右侧的矩形上。使他们的x和y坐标像匹配。
-
在States内选择State3。
-
在Navigator选择icon并且在Form Ediitor内将其拖拽到下部左侧的矩形上。使他们的x和y坐标像匹配。
-
在Connections视图中,点击+按钮创建一组新的连接。
-
双击Target栏并且在列表中选择mouseArea。
-
在Singnal Handler列,选择onClicked。
-
在Action列,选择page.state=‘State1’;
-
创建另外两个连接,分别将mouseArea1连接State2,mouseArea2连接State3。
-
工具 > 选项 > 构建和运行 > 取消使用jom代替nmake
-
【标记1】由于主窗口的根元素为Rectangle无法运行,所以需要在其最外面添加一个Window元素。并进行一些配置。即根元素为Window,嵌套元素为Rectangle。
起初,是将根元素从Window改成了Rectangle,因为在Window元素内无法添加状态(三种状态,分别对应图标的三个位置)。将根元素改为Rectangle后会由于程序原因无法运,所以需要在Rectangle的最外面添加一个Window,但此时如果进入设计模式,将无法看到三种状态,因为这三种状态是在Rectangle内,而不是在Window内。 -
按Ctrl+R运行应用。
错误: 若果出现QML Image: Cannot open: qrc:/icon.jpg
,则在该根目录下添加次图片。选择‘/’目录,右键添加现有文件。
点击矩形移动图标从一个矩形到另一个矩形。
四、动画转场
在上一步,如果想要运行程序,需要在Rectangle的外面添加一个Window。现在,我们将要添加动画,所以把刚刚添加的Window删掉,继续原来的代码。就是将【标记1】修改的部分改回来。
-
工具栏View > 视图 > Transition Editor。
-
在Transition Editor视图,点击"+"按钮创建新的过度(transition)。
-
点击此按钮指定过度对应的状态。
-
在Transition ID中,输入toState1.
-
在From中,选择State2和State3.
-
在To中,选择State1.
-
点击“+”为State2和State3添加过度,IDs分别选择toState2和toState3.
-
选择Close保存设定并且返回至Transition Editor。
-
选择toState2在过度列表中。
-
将蓝色时间轴边界改到1000帧,表示动作运动的时间为1s。x和y也分别改到1000。
-
选择x的蓝条,并点击该按钮来改变easing curve。
-
在Easing Curve编辑中。将
[0.233,0.161,0.264,0.997,0.393,0.997,0.522,0.997,0.555,0.752, 0.61,0.75,0.664,0.748,0.736,1,0.775,1,0.814,0.999,0.861,0.901,0.888, 0.901,0.916,0.901,0.923,0.995,1,1]
填写在Text中,并点击ok。
-
对toState2的属性y进行相同操作。
-
选择toState3,将蓝色时间轴的边界改到2000帧,表示动作运动的时间为2s。x和y也分别改到2000。
-
在Easing Curve编辑中,将x和y的easing curve的状态从线性改为
[0.455,0.03,0.515,0.955,1,1]
-
选择toState1,将蓝色时间轴的边界改到200帧,表示运动时间为200ms。Easing Curve曲线不需要修改。
-
按照【标记1】处的内容进行修改。
-
按Ctrl+R运行应用。