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")
    }
}

三、所用到的资源下载

本博文最前面下载。