QML实现动态时间的炫酷效果（类似八卦图）

废话不多说，先看效果：

整个工程全用QML代码实现，内部实现定时器，并且定义动画效果，完整源码如下所示（有完整的注释）：
SelfText.qml

import QtQuick 2.0

Text {
    id: textContent
    text: qsTr("")
    font.pointSize: 10
    anchors.centerIn: parent
}

main.qml

import QtQuick 2.0
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

/*
实现原理：
实际上圆形区域是默认构造出来的三个Rectangle 每个Rectangle中是一堆Text
每次触发定时器时 都是旋转Rectangle实现时间走动
*/

//根节点设置为Rectangle是因为可以设置color属性
Rectangle {
    id: qmlClockRoot
    color: "#c0c0c0"

    //定义属性
    property  string currHour
    property  string currMinute
    property  string currSecond
    property string textColor: "#808080"
    property string strList: "零一二三四五六七八九"

    //定时时分秒层
    Rectangle{
        id:rectHour
        //这里一定要设置背景透明-因为是铺满父窗口的
        color: "#00000000"
        anchors.fill: parent
    }
    Rectangle{
        id:rectMinute
        //这里一定要设置背景透明-因为是铺满父窗口的
        color: "#00000000"
        anchors.fill: parent
    }
    Rectangle {
        id:rectSecond
        //这里一定要设置背景透明-因为是铺满父窗口的
        color: "#00000000"
        anchors.fill: parent
    }

    //定义时分秒文字提示
    SelfText{
        id:textHour
        text: "\t\t\t\t\t\t\t\t秒"
        color: textColor
        font.pointSize: 12
    }
    SelfText{
        id:textMinute
        text: "\t\t\t\t\t\t分"
        color: textColor
        font.pointSize: 12
    }
    SelfText{
        id:textSecond
        text: "\t\t\t\t时"
        color: textColor
        font.pointSize: 12
    }

    //定义中心显示日期组件
    Column {
        spacing: 5
        //放在中间
        anchors.centerIn: parent
        Text{
            id:textWeek
            text: ""
            color: textColor
            font.pointSize: 14
            //放在中间
            anchors.horizontalCenter: parent.horizontalCenter
        }
        Text{
            id:textDate
            text: ""
            color: textColor
            font.pointSize: 14
            //放在中间
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }

    //定义旋转角动画效果
    RotationAnimation{
        id:aniHour
        target: rectHour
        //指定动画时间200ms
        duration: 200
        //这里旋转指定最小角度旋转
        direction: RotationAnimation.Shortest
    }
    RotationAnimation{
        id:aniMinute
        target: rectMinute
        //指定动画时间200ms
        duration: 200
        //这里旋转指定最小角度旋转
        direction: RotationAnimation.Shortest
    }
    RotationAnimation{
        id:aniSecond
        target: rectSecond
        //指定动画时间200ms
        duration: 200
        //这里旋转指定最小角度旋转
        direction: RotationAnimation.Shortest
    }

    //当组件加载完成时
    Component.onCompleted: {
        //初始化界面元素-时
        calcHourAndShow()
        //初始化界面元素-分
        calcMinuteAndShow()
        //初始化界面元素-秒
        calcSecondAndShow()
        //初始化一次界面
        timerCall()
        //启动定时器
        timer.start()
    }

    Timer{
        id:timer
        //设置执行间隔-这里设置小一点才能尽量保证和系统时间一致
        interval: 100
        //设置是否重复
        repeat: true
        //设置定时器回调
        onTriggered: {
            timerCall()
        }
    }

    //定时器执行回调函数
    function timerCall(){
        textWeek.text=getCurrentWeek()
        textDate.text=getCurrentDate()
        //这里获取出来的时间需要先转成整数 因为时间是0-59而文字是1-60 所以这里需要减一
        var tmpHour=getCurrentHour()
        if(currHour!==tmpHour){
            currHour=tmpHour
            aniHour.from=(parseInt(getCurrentHour()) - 2) * (-30)
            aniHour.to=(parseInt(getCurrentHour()) - 1) * (-30)
            aniHour.running=true
        }
        var tmpMinute=getCurrentMinute()
        if(currMinute!==tmpMinute){
            currMinute=tmpMinute
            aniMinute.from=(parseInt(getCurrentMinute()) - 2) * (-6)
            aniMinute.to=(parseInt(getCurrentMinute()) - 1) * (-6)
            aniMinute.running=true
        }
        var tmpSecond=getCurrentSecond()
        if(currSecond!==tmpSecond){
            currSecond=tmpSecond
            currSecond.from=(parseInt(getCurrentSecond()) - 2) * (-6)
            aniSecond.to=(parseInt(getCurrentSecond()) - 1) * (-6)
            aniSecond.running=true
        }
    }

    //计算并加载时分秒-时
    function calcHourAndShow(){
        //动态加载组件
        var component = Qt.createComponent("SelfText.qml")
        if(component.status===Component.Ready){
            //计算12个小时的文字
            var angle = 0
            for(var i=1;i<=12;++i){
                var tmpStr=""
                if(i<10){
                    tmpStr=strList[i]
                }
                else{
                    //这里一定要用parseInt或者Math.floor取整数 否则计算出来可能是小数
                    tmpStr=strList[parseInt(i/10)]
                    tmpStr=tmpStr+strList[i%10]
                }
                //动态创建组件-注意这里是创建-指定父类为Hour
                var tmpText=component.createObject(rectHour)
                tmpText.text="\t\t\t" + tmpStr
                tmpText.rotation = angle
                angle = i*30
            }
        }
    }

    //计算并加载时分秒-分
    function calcMinuteAndShow(){
        //动态加载组件
        var component = Qt.createComponent("SelfText.qml")
        if(component.status===Component.Ready){
            //计算60个分的文字
            var angle = 0
            for(var i=1;i<=60;++i){
                var tmpStr=""
                if(i<10){
                    tmpStr=strList[i]
                }
                else{
                    //这里一定要用parseInt或者Math.floor取整数 否则计算出来可能是小数
                    tmpStr=strList[parseInt(i/10)]
                    tmpStr=tmpStr+strList[i%10]
                }
                if(tmpStr=='六零'){
                    tmpStr='零零'
                }
                //动态创建组件-注意这里是创建-指定父类为Minute
                var tmpText=component.createObject(rectMinute)
                tmpText.text="\t\t\t\t\t" + tmpStr
                tmpText.rotation = angle
                angle = i*6
            }
        }
    }

    //计算并加载时分秒-秒
    function calcSecondAndShow(){
        //动态加载组件
        var component = Qt.createComponent("SelfText.qml")
        if(component.status===Component.Ready){
            //计算60个秒的文字
            var angle = 0
            for(var i=1;i<=60;++i){
                var tmpStr=""
                if(i<10){
                    tmpStr=strList[i]
                }
                else{
                    //这里一定要用parseInt或者Math.floor取整数 否则计算出来可能是小数
                    tmpStr=strList[parseInt(i/10)]
                    tmpStr=tmpStr+strList[i%10]
                }
                if(tmpStr=='六零'){
                    tmpStr='零零'
                }
                //动态创建组件-注意这里是创建-Second
                var tmpText=component.createObject(rectSecond)
                tmpText.text="\t\t\t\t\t\t\t" + tmpStr
                tmpText.rotation = angle
                angle = i*6
            }
        }
    }

    //获取时分秒
    function getCurrentHour(){
        return Qt.formatDateTime(new Date(),"h")
    }
    function getCurrentMinute(){
        return Qt.formatDateTime(new Date(),"m")
    }
    function getCurrentSecond(){
        return Qt.formatDateTime(new Date(),"s")
    }
    //获取年月日
    function getCurrentDate(){
        return Qt.formatDateTime(new Date(),"yyyy年MM月dd日")
    }
    //获取星期几
    function getCurrentWeek(){
        return Qt.formatDateTime(new Date(),"dddd")
    }
}