效果展示
动画片第一小节
源码（AnimationExample.qml）主文件
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
// 为窗口对象设置一个唯一标识符。
id: window
// 设置窗口对象可见。
visible: true
width: 600
height: 600
// 设置窗口的标题
title: qsTr("QML study")
Image {
id: root
source: "pic//C.png"
// 设置图片的显示尺寸为400x400像素。
// sourceSize: Qt.size(600, 600)
anchors.fill: parent
// 定义属性变量
property int padding: 10
property int duration: 3000
property bool running: false
Image {
id: box
x: root.padding;
y: (root.height - height) / 2
source: "pic//5.jpg"
sourceSize: Qt.size(200,200)
// 创建一个对x属性的数值动画。
NumberAnimation on x {
// 设置动画的目标值为root.width - box.width - root.padding
to: root.width - box.width - root.padding
duration: root.duration // 设置动画的持续时间为root.duration的值。
running: root.running // 设置动画是否运行的状态为root.running的值。
}
// 创建一个对rotation属性的旋转动画。
RotationAnimation on rotation {
// 设置旋转动画的目标值为360度。
to:360
duration: root.duration
running: root.running
}
MouseArea {
anchors.fill: parent
onClicked: root.running = true
}
}
}
// 设置动画的目标值为40，持续时间为4000毫秒。意味着greenBox将会从初始位置移动到y坐标为40的位置，并在4000毫秒内完成该过程。
ClickableImageV2 {
id: greenBox
x: 40; y: root.height-height
source: "pic//1.jpg"
text: qsTr("animation on property")
NumberAnimation on y {
to: 40; duration:3000
running: root.running
}
}
// 第二个对象使用Behavior on动画。此行为告诉属性它应该对值的每次变化进行动画处理。可以通过设置来禁用该行为enabled: false在……上Behavior元素。
ClickableImageV2 {
id: blueBox
x: (root.width-width)/2; y: root.height-height
source: "pic//2.jpg"
text: qsTr("behavior on property")
Behavior on y {
NumberAnimation {
duration: 3000 }
}
//onClicked: y = 40
// random y on each click
onClicked: y = 40 + Math.random() * (205-40)
}
// 第三个对象使用独立动画。动画被定义为它自己的元素，几乎可以出现在文档中的任何地方。
ClickableImageV2 {
id: redBox
x: root.width-width-40; y: root.height-height
source: "pic//3.jpg"
// 当redBox被点击时，触发anim动画开始播放。动画会改变redBox的y属性，使其移动到目标值为40的位置。
onClicked: anim.start()
// onClicked: anim.restart()
text: qsTr("standalone animation")
NumberAnimation {
id: anim
// 设置动画的目标对象为redBox，即要改变属性的对象。
target: redBox
// 设置动画要改变的属性为y。
properties: "y"
to: 40
duration: 3000
}
}
}
解释语法
-
import QtQuick 2.12：导入QtQuick模块的版本2.12，用于创建Qt快速应用程序的用户界面。 -
import QtQuick.Window 2.12：导入QtQuick.Window模块的版本2.12，用于创建窗口对象。 -
import QtQuick.Controls 2.12：导入QtQuick.Controls模块的版本2.12，用于创建用户界面控件。 -
Window {}：定义了一个窗口对象，并在花括号内设置窗口的属性和组件。 -
id: window：为窗口对象设置了一个唯一标识符。 -
visible: true：设置窗口对象可见。 -
width: 600：设置窗口的宽度为600个单位。 -
height: 600：设置窗口的高度为600个单位。 -
title: qsTr("QML study")：设置窗口的标题为"QML study"，使用qsTr函数进行翻译。 -
Image {}：定义了一个图片对象，并在花括号内设置图片的属性和组件。 -
id: root：为图片对象设置了一个唯一标识符。 -
source: "pic//C.png"：设置了图片的来源为"pic//C.png"。 -
anchors.fill: parent：设置图片对象填满父级容器。 -
property int padding: 10：定义了一个属性变量padding，并将其值设置为10。 -
property int duration: 3000：定义了一个属性变量duration，并将其值设置为3000。 -
property bool running: false：定义了一个属性变量running，并将其值设置为false。 -
Image {}：在图片对象内部定义了另一个图片对象，并设置其属性和组件。 -
id: box：为内部图片对象设置了一个唯一标识符。 -
x: root.padding：设置了内部图片对象的x坐标为root.padding的值。 -
y: (root.height - height) / 2：设置了内部图片对象的y坐标为(root.height - height) / 2的值。 -
source: "pic//5.jpg"：设置了内部图片的来源为"pic//5.jpg"。 -
sourceSize: Qt.size(200,200)：设置了内部图片的显示尺寸为200x200像素。 -
NumberAnimation on x {}：创建了一个对x属性的数值动画，并在花括号内设置动画的属性和值。 -
to: root.width - box.width - root.padding：设置动画的目标值为(root.width - box.width - root.padding)的值。 -
duration: root.duration：设置动画的持续时间为root.duration的值。 -
running: root.running：设置动画是否运行的状态为root.running的值。 -
RotationAnimation on rotation {}：创建了一个对rotation属性的旋转动画，并在花括号内设置动画的属性和值。 -
to:360：设置旋转动画的目标值为360度。 -
duration: root.duration：设置旋转动画的持续时间为root.duration的值。 -
running: root.running：设置旋转动画是否运行的状态为root.running的值。 -
MouseArea {}：定义了一个鼠标区域对象，并在花括号内设置区域的属性和事件。 -
anchors.fill: parent：设置鼠标区域对象填满父级容器。 -
onClicked: root.running = true：当鼠标区域被点击时，将root.running属性设置为true。 -
ClickableImageV2 {}：定义了一个可点击的图片对象，并在花括号内设置图片的属性和组件。 -
id: greenBox：为可点击的图片对象设置一个唯一标识符。 -
x: 40、y: root.height-height：设置可点击的图片对象的x和y坐标的初始值。 -
source: "pic//1.jpg"：设置可点击的图片的来源为"pic//1.jpg"。 -
text: qsTr("animation on property")：设置可点击的图片的文本为"animation on property"，使用qsTr函数进行翻译。 -
NumberAnimation on y {}：创建了一个对y属性的数值动画，并在花括号内设置动画的属性和值。 -
to: 40：设置动画的目标值为40。 -
duration:3000：设置动画的持续时间为3000。 -
running: root.running：设置动画是否运行的状态为root.running的值。 -
Behavior on y {}：在可点击的图片对象内部使用Behavior元素，用于控制属性的动画处理方式。 -
NumberAnimation { duration: 3000 }：设置了对属性的数值动画，并设置动画的持续时间为3000。 -
onClicked: y = 40 + Math.random() * (205-40)：当可点击的图片对象被点击时，将y属性设置为一个40到205之间的随机值。 -
ClickableImageV2 {}：定义了另一个可点击的图片对象，并在花括号内设置图片的属性和组件。 -
id: redBox：为可点击的图片对象设置一个唯一标识符。 -
x: root.width-width-40、y: root.height-height：设置可点击的图片对象的x和y坐标的初始值。 -
source: "pic//3.jpg"：设置可点击的图片的来源为"pic//3.jpg"。 -
onClicked: anim.start()：当可点击的图片对象被点击时，触发anim动画开始播放。 -
text: qsTr("standalone animation")：设置可点击的图片的文本为"standalone animation"，使用qsTr函数进行翻译。 -
NumberAnimation {}：定义了一个数值动画，用于控制属性的数值变化。 -
target: redBox：设置动画的目标对象为redBox，即要改变属性的对象。 -
properties: "y"：设置动画要改变的属性为y。 -
to: 40：设置动画的目标值为40。 -
duration: 3000：设置动画的持续时间为3000。
源码子文件（ClickableImageV2.qml）
import QtQuick 2.0
// 用于创建一个可点击的项目（Item）
Item {
id:root
// 设置项目的宽度为column子元素的宽度。
width: column.childrenRect.width
height: column.childrenRect.height
// 定义一个名为text的属性，该属性与label的text属性关联，允许在外部访问和修改该属性。
property alias text: label.text
property alias source: image.source
// signal clicked - 声明一个clicked信号，表示项目被点击的事件。
signal clicked
Column {
id:column
spacing: 10
Image {
id: image
sourceSize: Qt.size(90,90)
}
Text {
id: label
width: image.width
// 设置文本的水平对齐方式为居中对齐。
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
color: "#000000"
}
}
MouseArea {
// 设置鼠标区域的大小与父元素（即Item）相同。
anchors.fill: parent
// 当鼠标区域被点击时，触发项目的clicked信号
onClicked: root.clicked()
}
}
解释语法
-
import QtQuick 2.0：导入QtQuick模块的版本2.0，用于创建Qt快速应用程序的用户界面。 -
Item {}：定义了一个可点击的项目，并在花括号内设置该项目的属性和组件。 -
id:root：为项目设置了一个唯一标识符。 -
width: column.childrenRect.width：设置项目的宽度为列（Column）子元素的宽度。 -
height: column.childrenRect.height：设置项目的高度为列（Column）子元素的高度。 -
property alias text: label.text：定义了一个名为text的属性，并将其与label的text属性相关联，允许在外部访问和修改该属性。 -
property alias source: image.source：定义了一个名为source的属性，并将其与image的source属性相关联，允许在外部访问和修改该属性。 -
signal clicked：声明了一个clicked信号，表示项目被点击的事件。 -
Column {}：定义了一个列（Column），用于组织子元素的垂直排列。 -
id:column：为列设置了一个唯一标识符。 -
spacing: 10：设置列中子元素之间的间隔为10个单位。 -
Image {}：定义了一个图片对象，并在花括号内设置图片的属性和组件。 -
id: image：为图片对象设置了一个唯一标识符。 -
sourceSize: Qt.size(90,90)：设置了图片的显示尺寸为90x90像素。 -
Text {}：定义了一个文本对象，并在花括号内设置文本的属性和组件。 -
id: label：为文本对象设置了一个唯一标识符。 -
width: image.width：设置文本的宽度与图片的宽度相同。 -
horizontalAlignment: Text.AlignHCenter：设置文本的水平对齐方式为居中对齐。 -
wrapMode: Text.WordWrap：设置文本的换行模式为自动换行。 -
color: "#000000"：设置文本的颜色为黑色。 -
MouseArea {}：定义了一个鼠标区域对象，并在花括号内设置区域的属性和事件。 -
anchors.fill: parent：设置鼠标区域的大小与父元素（即Item）相同，填满整个区域。 -
onClicked: root.clicked()：当鼠标区域被点击时，触发项目的clicked信号。