QML 实现一个动态的启动界面
- 一、效果查看
- 二、源码分享
- 三、所用到的资源下载
一、效果查看
二、源码分享
工程结构
main.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Dialogs
import Qt.labs.platform
Window {
id:window
width: 640
height: 400
visible: true
title: qsTr("Hello World")
property int imageCnt: 1
Rectangle{
anchors.fill: parent
gradient: Gradient{
orientation: Gradient.Vertical
GradientStop { position: 0.0; color: "#4bb6ac" }
GradientStop { position: 0.5; color: "#3edabd" }
GradientStop { position: 1.0; color: "#24efc0" }
}
}
Timer{
interval: 2000
repeat: true
running:true
onTriggered: {
var w = Qt.createComponent("DynamicImage.qml")
if (w.status === Component.Ready) {
var image = "qrc:/image/image"+imageCnt+".svg";
imageCnt += 1
if(imageCnt > 10)
imageCnt = 1
var endX = Math.floor(Math.random()*window.width);
console.log(image,endX)
var item = w.createObject(window,{x:window.width/2-50,y:window.height,
width:100,height:100,source:image,
stopX:endX,stopY:-150,originX:0,originy:50,
moveDuration:15000,rotationDuration: 5000,
running: true});
console.log("create:"+item)
item.moveFinished.connect(()=>{
item.destroy()
console.log("destroyed:"+item)
})
}
else console.error("create component falied!");
}
}
Text{
id:btn
width: 200
height: 100
z:1
anchors.centerIn: parent
text: "正在启动中...请稍后!"
color:"white"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: 30
font.bold: true
font.italic: true
}
}
DynamicImage.qml
//DynamicImage.qml
import QtQuick
import QtQuick.Controls
Image{
id:root
property int stopX: 0
property int stopY: 0
property alias originX: rotation.origin.x
property alias originy: rotation.origin.y
property int moveDuration: 5000
property int rotationDuration: 5000
property bool running: false
signal moveFinished()
transform: Rotation{
id:rotation
axis.x: 0
axis.y: 0
axis.z: 1
}
RotationAnimation{
running: root.running
target: root
from:0
to:360
loops:Animation.Infinite
duration: rotationDuration
}
ParallelAnimation{
id:anim
running:root.running
NumberAnimation{
target: root
properties: "x"
from:root.x
to:stopX
duration: moveDuration
}
NumberAnimation{
target: root
properties: "y"
from:root.y
to:stopY
duration: moveDuration
}
onFinished: {
moveFinished()
console.log("onFinished")
}
}
Component.onDestruction: {
//console.log("onDestroyed")
}
}
三、所用到的资源下载
本博文最前面下载。