QML 日月交替效果

---

前言

过年闲来无事，学学前端，写写qml

一、效果

二、代码

主体为Sky.qml，直接调用即可

// Sky.qml
import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffects

Item {
    id: control
    width: 600
    height: 400
    property bool isNight: false
    readonly property real displayY: 20
    readonly property color nightColor: "#040720"
    readonly property color daytimeColor: "#FFEEE2"

    Rectangle {
        id: content
        anchors.fill: parent
        color: isNight ? nightColor : daytimeColor

        Sun {
            visible: !isNight
            x: (parent.width - width) / 2
            y: visible ? displayY : parent.height - height
            Behavior on y {
                NumberAnimation {
                    duration: 500
                }
            }
        }

        Moon {
            visible: isNight
            x: (parent.width - width) / 2
            y: visible ? displayY : 0
            nightColor: control.nightColor
            Behavior on y {
                NumberAnimation {
                    duration: 500
                }
            }
        }
    }

    FastBlur {
        source: content
        width: source.width
        height: source.height / 3
        anchors.bottom: parent.bottom
        transparentBorder: true
        radius: 50
    }

    Button {
        text: "切换"
        onClicked: isNight = !isNight
    }
}

两个组件：Sun.qml和Moon.qml

// Sun.qml
import QtQuick
import QtQuick.Controls

Rectangle{
    width: 200
    height: 200
    radius: width / 2
    color: "orange"
    clip: true
}

// Moon.qml
import QtQuick
import QtQuick.Controls

Rectangle{
    property color nightColor: "#040720"
    
    width: 200
    height: 200
    radius: width / 2
    color: "cyan"
    clip: true
    
    Rectangle{
        width: 200
        height: 200
        color: nightColor
        radius: width / 2
        anchors.left: parent.left
        anchors.leftMargin: - width / 3
        anchors.top: parent.top
        anchors.topMargin: -height / 3
    }
}

三、参考视频

HTML5+CSS3+JS实现日月交替效果