QML 开机动画

前言

要求要做一个开机动画，使用QML，查了很多博客也没有一个满足要求的，于是就自己写了一个。顺便记录下自己的开发过程，希望能帮到大家。

一、基础知识

1、状态（State）

QML类型：State

2、动画（Animation）

推荐QML动画

3、过渡（Transition）

推荐QML类型：Transition

3、状态

二、效果

开机动画

三、动画流程

黑屏效果->图标淡入->进度条淡入->进度条加载->进度条淡出->图标淡出->黑屏淡出（以黑屏淡出效果来反向实现背景图片淡入效果）->登录界面淡入

四、代码

import QtQuick
import QtQuick.Controls

Item {
    anchors.fill: parent
    // 背景图片
    Image{
        anchors.fill: parent
        source: "qrc:/images/background.jpg"
        fillMode: Image.PreserveAspectFit
    }

    // 登录界面
    Rectangle{
        id: loginPage
        width: 400
        height: 400
        anchors.top: parent.top
        anchors.topMargin: 50
        anchors.horizontalCenter: parent.horizontalCenter
        color: "black"
        opacity: 0
        Text {
            anchors.centerIn: parent
            text: qsTr("这是一个登录界面")
            color: "orange"
        }
    }

    // 开始时的黑屏效果
    Rectangle{
        id: black
        anchors.fill: parent
        color: "black"
        state: "visible"

        states: [
            State {
                name: "visible"
                PropertyChanges {
                    target: black
                    color: "black"
                }
            },
            State {
                name: "invisible"
                PropertyChanges {
                    target: black
                    color: "transparent"
                }
            }
        ]

        transitions: Transition {
            from: "visible"
            to: "invisible"
            SequentialAnimation{
                ColorAnimation {
                    target: black
                    duration: 3000
                    easing.type: Easing.OutQuart
                }
                NumberAnimation{
                    target: progressBar
                    property: "opacity"
                    from: 1
                    to: 0
                    duration: 2000
                    easing.type: Easing.InQuart
                }
                NumberAnimation{
                    target: logo
                    property: "opacity"
                    from: 1
                    to: 0
                    duration: 2000
                    easing.type: Easing.InQuart
                }
                NumberAnimation{
                    target: loginPage
                    property: "opacity"
                    from: 0
                    to: 0.8
                    duration: 1000
                    easing.type: Easing.InQuart
                }
            }
        }
    }

    Column{
        anchors.centerIn: parent
        spacing: 40
        // logo
        Image{
            id: logo
            anchors.horizontalCenter: parent.horizontalCenter
            source: "qrc:/images/logo.png"
            fillMode: Image.PreserveAspectFit
            sourceSize: Qt.size(250, 150)
            opacity: 0

            NumberAnimation{
                id: logoShow
                target: logo
                property: "opacity"
                from: 0
                to: 1
                duration: 1000
                easing.type: Easing.InQuart
                onFinished: {
                    progressBarShow.start()
                }
            }
        }

        ProgressBar{
            id: progressBar
            width: 450
            height: 5
            value: 0
            anchors.horizontalCenter: parent.horizontalCenter
            background: Rectangle{
                implicitWidth: parent.width
                color: "gray"
                opacity: 0.5
                radius: 5
            }
            contentItem: Item {
                Rectangle{
                    width: progressBar.visualPosition * progressBar.width
                    height: progressBar.height
                    color: "#ff6600"
                    radius: 5
                }
            }

            opacity: 0
            NumberAnimation{
                id: progressBarShow
                target: progressBar
                property: "opacity"
                from: 0
                to: 1
                duration: 3000
                easing.type: Easing.InQuart
            }

            Timer{
                repeat: true
                interval: 1000
                triggeredOnStart: false
                running: parent.opacity === 1
                onTriggered: {
                    parent.value += 0.1
                    if(parent.value >= 0.9){
                        parent.value = 1.0
                        black.state = "invisible"
                        stop()
                    }
                }
            }
        }
    }

    Timer{
        id: startTimer
        repeat: false
        interval: 3000
        triggeredOnStart: false
        onTriggered: {
            logoShow.start()
            stop()
        }
    }

    function start(){
        startTimer.start()
    }

    Component.onCompleted: {
        start()
    }
}

五、资源

图标是在这里免费的LOGO在线设计制作工具设计的，然后自己用ps把背景扣透明了。背景图片是随便找的。