Qt 5 开发及实例（第5版） 课件 第20章 QML动画特效.pptx

QT5开发及实例（第5版）

第20章QML动画特效

——QML动画元素

01

PropertyAnimation元素

PropertyAnimation元素

PropertyAnimation（属性动画元素）是用来为属性提供动画的最基本的动画元素，它直接继承自Animation元素，可以用来为real、int、color、rect、point、size和vector3d等属性设置动画。

一般的使用方式有如下几种：

作为属性值的来源。可以立即为一个指定的属性使用动画。

在信号处理器中创建。当接收到一个信号（如鼠标单击事件）时触发动画。

作为独立动画元素。像一个普通QML对象一样地被创建，不需要绑定到任何特定的对象和属性。

在属性值改变的行为中创建。当一个属性改变值时触发动画，这种动画又叫“行为动画”。

PropertyAnimation元素

【例】（简单）（CH2001）编程演示动画元素多种不同的使用方式，运行效果如图，图中以虚线箭头标示出各图形的运动轨迹，其中，“属性值源”矩形：始终在循环往复地移动；“信号处理”矩形：每单击一次会往返运动3次；“独立元素”矩形：每单击一次移动一次；任意时刻在窗口内的其他位置单击鼠标，“改变行为”矩形都会跟随鼠标移动。

（2）定义4个矩形组件，代码分别。

（3）打开main.qml文件，编写代码。

02

其他动画元素

其他动画元素

【例】（简单）（CH2002）编程演示其他各种动画元素的应用，运行效果如图，其中虚线箭头标示出在程序运行中图形运动变化的轨迹。

实现步骤如下。

（1）新建QML应用程序，项目名称为“OtherAnimations”。

（2）右击项目视图“资源”→“qml.qrc”下的“/”节点，选择“添加新文件…”项，新建CircleRect.qml文件，编写代码。

其他动画元素

（3）打开main.qml文件，编写代码如下：

importQtQuick2.15

importQtQuick.Window2.15

Window{

width:640

height:150

visible:true

title:qsTr(OtherAnimations)

Rectangle{

width:360

height:360

anchors.fill:parent

CircleRect{ //使用组件

x:50;y:30

}

}

}

03

Animator元素

Animator元素

【例】（难度一般）（CH2003）用Animator实现一个矩形从窗口左上角旋转着进入屏幕，运行效果如图。

实现步骤如下。

（1）新建QML应用程序，项目名称为“Animator”。

（2）右击项目视图“资源”→“qml.qrc”下的“/”节点，选择“添加新文件…”项，新建AnimatorRect.qml文件，编写代码。

Animator元素

（3）打开main.qml文件，编写代码如下：

importQtQuick2.15

importQtQuick.Window2.15

Window{

width:320

height:240

visible:true

title:qsTr(Animator)

Rectangle{

width:360

height:360

anchors.fill:parent

AnimatorRect{} //使用组件

}

}

QT5开发及实例（第5版）

第20章QML动画特效

——动画流UI界面

01

状态和切换

状态和切换

【例】（难度中等）（CH2004）用状态切换机制实现文字的动态增强显示，运行效果如图，其中被鼠标选中的单词会以艺术字放大，而释放鼠标后又恢复原状。

实现步骤如下。

（1）新建QML应用程序，项目名称为“StateTransition”。

（2）右击项目视图“资源”→“qml.qrc”下的“/”节点，选择“添加新文件…”项，新建StateText.qml文件，编写代码。

状态和切换

（3）打开main.qml文件，编写代码如下：

importQtQuick2.15

importQtQuick.Window2.15

Window{

width:320

height:240

visible:true

title:qsTr(StateTransition)