文章目录
- 一、动画效果示例图
- 二、个人理解
- 三、源码
- 总结
一、动画效果示例图
下图演示四组动画效果分别包含数值动画(单个方块、多个方块),顺序动画,并行动画等效果
二、个人理解
- NumberAnimation:改变控件属性值的动画效果,可针对坐标位置(x,y)、大小(width、height)、透明度等参数改变动画。
- SequentialAnimation:顺序动画,作用域包含的多个动画从上到下依次运行动画效果。
- ParallelAnimation:并行动画,作用域包含的多个动画同时运行。
- 其他动画:QML还包含PropertyAnimation、RotationAnimation、ColorAnimation等动画效果,可根据实际需求使用具体效果。
三、源码
import QtQuick 2.0
import QtQuick.Controls 2.12
Item {
Button {
id: btnNumForSingle
text: "属性动画(单个)"
onClicked: {
rect1.resetPos() // 重置方块位置
numAnimForSingle.start() // 动画启动
}
}
Button {
id: btnNumForMuilt
text: "属性动画(多个)"
anchors.left: btnNumForSingle.right
onClicked: {
numAnimForMulti.resetPos() // 重置方块位置
numAnimForMulti.start() // 动画启动
}
}
Button {
id: btnNumForSequen
text: "顺序动画"
anchors.left: btnNumForMuilt.right
onClicked: {
rect1.resetPos() // 重置方块位置
sequentialAnim.start() // 动画启动
}
}
Button {
id: btnNumForParallel
text: "并行动画"
anchors.left: btnNumForSequen.right
onClicked: {
rect1.resetPos() // 重置方块位置
parallelAnim.start() // 动画启动
}
}
Rectangle {
id: rect1
x: 20
y: 300
width: 50
height: 50
visible: true
color: "skyblue"
function resetPos() {
x = 20
y = 300
}
}
Rectangle {
id: rect2
x: 20
y: 370
width: 50
height: 50
visible: true
color: "lightgreen"
function resetPos() {
x = 20
y = 370
}
}
// 单元素动画
NumberAnimation {
id: numAnimForSingle
target: rect1
property: "x"
duration: 2000
to: 500
easing.type: Easing.InOutQuad // 动画效果
}
// 多元素对象动画
NumberAnimation {
id: numAnimForMulti
targets: [rect1, rect2]
properties: "x,y"
duration: 2000
to:350
function resetPos() {
rect1.resetPos()
rect2.resetPos()
}
}
//! 多动画组合
// 顺序动画
SequentialAnimation {
id:sequentialAnim
NumberAnimation {
target: rect1
property: "x"
duration: 2000
to: 500
}
NumberAnimation {
target: rect1
property: "y"
duration: 2000
to: 200
}
}
// 并行动画
ParallelAnimation {
id:parallelAnim
NumberAnimation {
target: rect1
property: "x"
duration: 2000
to: 500
}
NumberAnimation {
target: rect1
property: "y"
duration: 2000
to: 200
}
}
}
总结
记录一下简易的QML动画效果使用,包含的动画效果考研根据需求使用,可能会有意想不到的收获。
友情提示——哪里看不懂可私哦,让我们一起互相进步吧
(创作不易,请留下一个免费的赞叭 谢谢 o/)
注:文章为作者编程过程中所遇到的问题和总结,内容仅供参考,若有错误欢迎指出。
注:如有侵权,请联系作者删除