快捷導(dǎo)航

基于Unity3D實(shí)現(xiàn)仿真時(shí)鐘詳解

更新時(shí)間：2023年01月30日 16:58:44 作者：恬靜的小魔龍

這篇文章主要為大家詳細(xì)介紹了如何利用Unity3D模擬實(shí)現(xiàn)一個(gè)簡(jiǎn)單是時(shí)鐘效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

一、前言

今天實(shí)現(xiàn)一個(gè)時(shí)鐘工具，其實(shí)在之前已經(jīng)完成了一個(gè)簡(jiǎn)單的時(shí)鐘工具：【Unity3D應(yīng)用案例系列】時(shí)鐘、鐘表小組件開(kāi)發(fā)。

那么，今天的這個(gè)小工具跟之前的有啥區(qū)別呢？

之前的時(shí)鐘，是模擬真實(shí)時(shí)間時(shí)針?lè)轴樏脶樀男D(zhuǎn)，比如：

可以當(dāng)個(gè)時(shí)鐘看。

二、時(shí)鐘小工具開(kāi)發(fā)

今天實(shí)現(xiàn)一個(gè)可以設(shè)置旋轉(zhuǎn)到指定的時(shí)間下的表盤(pán)，簡(jiǎn)單說(shuō)就是時(shí)鐘定時(shí)。

2-1、搭建UI

新建一個(gè)Image，命名為Image_Clock（名字隨意），作為時(shí)針和分針的父節(jié)點(diǎn)，設(shè)置寬高為512：

在Image_Clock節(jié)點(diǎn)下新建Image_Hour和Image_Minute，設(shè)置寬高為512：

在它們的節(jié)點(diǎn)下分別新建一個(gè)Image，設(shè)置適合的寬高，位置放到表盤(pán)中心：

2-2、實(shí)現(xiàn)腳本

新建腳本命名SimClock.cs，雙擊打開(kāi)腳本編輯代碼：

using UnityEngine;
using System.Collections;
using System;
using UniRx;

public class SimClock : MonoBehaviour
{
    /// <summary>
    /// 時(shí)針
    /// </summary>
    [SerializeField]
    private Transform HourHands;

    /// <summary>
    /// 分針
    /// </summary>
    [SerializeField]
    private Transform MinuteHands;

    /// <summary>
    /// 時(shí)針的角度
    /// </summary>
    private Quaternion HourHandsAngle;

    /// <summary>
    /// 分針的角度
    /// </summary>
    private Quaternion MinuteHandsAngle;

    /// <summary>
    /// 是否初始化了
    /// </summary>
    private bool isInit = false;

    /// <summary>
    /// 是否停止了
    /// </summary>
    private bool isStopClock = true;

    /// <summary>
    /// 初始化
    /// </summary>
    private void Init()
    {
        HourHandsAngle = HourHands.rotation;
        MinuteHandsAngle = MinuteHands.rotation;
    }

    private void Start()
    {
        //設(shè)置分鐘 和完成的秒數(shù)
        SetTime(300, 6, () => { Debug.Log("完成"); });
    }

    /// <summary>
    /// 恢復(fù)角度
    /// </summary>
    private void RecoverAngles()
    {
        HourHands.localEulerAngles = Vector3.zero;
        MinuteHands.localEulerAngles = Vector3.zero;
    }

    /// <summary>
    /// 設(shè)置時(shí)間
    /// </summary>
    /// <param name="minute">設(shè)置分鐘數(shù)</param>
    /// <param name="seconds">完成秒數(shù)</param>
    /// <param name="onComplete">委托函數(shù)</param>
    public void SetTime(float minute, float seconds, Action onComplete)
    {
        if (isInit == false)
            Init();

        if (isStopClock == false) return;

        isStopClock = false;
        RecoverAngles();

        // 角度 = 分鐘 / 60秒轉(zhuǎn)動(dòng)周數(shù) * 360度
        float angles = minute / 60 * 360;
        // 轉(zhuǎn)動(dòng)的角度 = 角度 / 轉(zhuǎn)動(dòng)秒數(shù) * 0.1秒轉(zhuǎn)動(dòng)的角度
        float interval = angles / seconds * 0.1f;
        float count = 0;
        IDisposable dispose = null;

        dispose = Observable.Interval(TimeSpan.FromSeconds(0.1f)).Subscribe(param => {
            MinuteHands.Rotate(Vector3.back, interval);
            HourHands.Rotate(Vector3.back, (interval / 360) * (360 / 12));
            count += interval;
            if (count >= angles)
            {
                isStopClock = true;
                onComplete();
                dispose.Dispose();
            }
        });
    }
}

注意：因?yàn)槟_本用到了UniRx插件，所以需要導(dǎo)入插件，在文章開(kāi)始提到的資源包中已經(jīng)有插件了。當(dāng)然，也可以去https://github.com/neuecc/UniRx/releases下載，然后導(dǎo)入到項(xiàng)目中。

將腳本附到Hiearchy視圖的Image_Clock對(duì)象上，將時(shí)針和分針對(duì)象拖進(jìn)去：