QML 实现一个动态的启动界面

一、效果查看

二、源码分享

工程结构

main.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Dialogs
import Qt.labs.platformWindow {id:windowwidth: 640height: 400visible: truetitle: qsTr("Hello World")property int imageCnt: 1Rectangle{anchors.fill: parentgradient: Gradient{orientation: Gradient.VerticalGradientStop { position: 0.0; color: "#4bb6ac" }GradientStop { position: 0.5; color: "#3edabd" }GradientStop { position: 1.0; color: "#24efc0" }}}Timer{interval: 2000repeat: truerunning:trueonTriggered: {var w = Qt.createComponent("DynamicImage.qml")if (w.status === Component.Ready) {var image = "qrc:/image/image"+imageCnt+".svg";imageCnt += 1if(imageCnt > 10)imageCnt = 1var 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:btnwidth: 200height: 100z:1anchors.centerIn: parenttext: "正在启动中...请稍后！"color:"white"horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenterfont.pixelSize: 30font.bold: truefont.italic: true}}

DynamicImage.qml

//DynamicImage.qml
import QtQuick
import QtQuick.ControlsImage{id:rootproperty int stopX: 0property int stopY: 0property alias originX: rotation.origin.xproperty alias originy: rotation.origin.yproperty int moveDuration: 5000property int rotationDuration: 5000property bool running: falsesignal moveFinished()transform: Rotation{id:rotationaxis.x: 0axis.y: 0axis.z: 1}RotationAnimation{running: root.runningtarget: rootfrom:0to:360loops:Animation.Infiniteduration: rotationDuration}ParallelAnimation{id:animrunning:root.runningNumberAnimation{target: rootproperties: "x"from:root.xto:stopXduration: moveDuration}NumberAnimation{target: rootproperties: "y"from:root.yto:stopYduration: moveDuration}onFinished: {moveFinished()console.log("onFinished")}}Component.onDestruction: {//console.log("onDestroyed")}
}

三、所用到的资源下载

本博文最前面下载。