QML动画特效.pptx

第20章 QML动画特效
QML动画元素
动画流UI界面
图像特效
Qt (Qt Quick Extras )新增饼状菜单
QML动画元素
PropertyAnimation元素
PropertyAnimation(属性动画元素)是用来为属性提供动画的最基本的动画元素,它直接继承自Animation元素,可以用来为real、int、color、rect、point、size和vector3d等属性设置动画。动画元素可以通过不同的方式来使用,取决于所需要的应用场景。一般的使用方式有如下几种:
作为属性值的来源。可以立即为一个指定的属性使用动画。
在信号处理器中创建。当接收到一个信号(如鼠标单击事件)时触发动画。
作为独立动画元素。像一个普通QML对象一样地被创建,不需要绑定到任何特定的对象和属性。
在属性值改变的行为中创建。当一个属性改变值的时候触发动画,这种动画又叫“行为动画”。
PropertyAnimation元素
【例】(简单)(CH2001)编程演示动画元素多种不同的使用方式,。
PropertyAnimation元素
实现步骤如下。
(1)新建QML应用程序,项目名称为“PropertyAnimation”。
(2)定义4个矩形组件,代码分别。
(3),修改代码。
(4),修改代码如下:
import QtQuick
import
Window {
visible: true
width: 640
height: 480
title: qsTr("PropertyAnimation")
MainForm {
: parent
: {
/* 将鼠标单击位置的x、y坐标值设为矩形Rect4的新坐标*/
= ;
= ;
}
}
}
其他动画元素
【例】(简单)(CH2002)编程演示其他各种动画元素的应用,,其中虚线箭头标示出在程序运行中图形运动变化的轨迹。
其他动画元素
实现步骤如下。
(1)新建QML应用程序,项目名称为“OtherAnimations”。
(2)右击项目视图“资源”→“”下的“/”节点,选择“添加新文件…”项,,编写代码。
(3),修改代码如下:
...
Rectangle {
...
MouseArea {
id: mouseArea
: parent
}
CircleRect { //使用组件
x:50; y:30
}
}
Animator元素
【例】(难度一般)(CH2003)用Animator实现一个矩形从窗口左上角旋转着进入屏幕,。
Animator元素
实现步骤如下。
(1)新建QML应用程序,项目名称为“Animator”。
(2)右击项目视图“资源”→“”下的“/”节点,选择“添加新文件…”项,,编写代码。
(3),修改代码如下:
...
Rectangle {
...
MouseArea {
id: mouseArea
: parent
}
AnimatorRect { } //使用组件
}
动画流UI界面
状态和切换
【例】(难度中等)(CH2004)用状态切换机制实现文字的动态增强显示,,其中被鼠标点中的单词会以艺术字放大,而释放鼠标后又恢复原状。
状态和切换
实现步骤如下。
(1)新建QML应用程序,项目名称为“StateTransition”。
(2)右击项目视图“资源”→“”下的“/”节点,选择“添加新文件…”项,,编写代码。
(3),修改代码如下:
...
Rectangle {
...
MouseArea {
id: mouseArea
: parent
}
Row {