Unity 钟表电子表手表效果教程

Chinar blog ：www.chinar.xin

钟表效果的实现方式

---

本文提供全流程，中文翻译。 Chinar 的初衷是将一种简单的生活方式带给世人 使有限时间 具备无限可能

Chinar —— 心分享、心创新！ 助力快速通过 Unity 实现钟表 / 电子表等时间效果 节省您宝贵的时间，避免采坑！

Chinar 教程效果：

---

---

全文高清图片，点击即可放大观看 (很多人竟然不知道)

---

1

Horologe —— 钟表结构

Chinar 为大家介绍几种程序开发中电子表、钟表、计时器等实现方法

实现过程多种多样，只给大家提供一个思路，完善实现过程，大家可进行扩展开发

钟表的实现方式很简单，我们先来用基础件将钟表的样式做出来

其实对于初学者来讲，摆出这么一个钟表的模型并不难。如何让 时针、分针、秒针按照标准去旋转是主要问题？

下面我来简单说下上图中标识的结构
1：钟表：空物体 —— 用来表示整个时钟，装下钟表的所有部件
2：钟面：Cube，另一个是圆柱体，调整Y轴都压扁就行
3：数字时刻父级：Canvas，模式Render Mode —— World Space，自己调整世界空间坐标
4：数字时刻子级：右键UI元素TextMeshPro3D场景中显示文字特别清晰
5：时针分针：父级：空物体 —— 子级：Cube 重点一：父物体在（0,0,0）位置，子级位置偏移(自行调整)。从而达到转动父级角度，即可转动指针
5：秒针：父级：空物体 —— 子级：Sphere

---

2

Degree And Script —— 角度和脚本

重点二：

一个圆360度
时针每次走 360/12=30度
分针每次走 360/12=30度
秒针每次走 360/60=6度

// ========================================================
// 描述：钟表、手表效果
// 作者：Chinar 
// 创建时间：2019-02-16 19:49:39
// 版 本：1.0
// ========================================================
using System;
using System.Collections;
using System.Collections.Generic;
using System.Diagnostics;
using TMPro;
using UnityEngine;


/// <summary>
/// 钟表控制脚本
/// </summary>
public class ChinarHorologe : MonoBehaviour
{
    public        Transform Hour, Minute, Second; //时、分、秒
    public        bool      IsTimeOfDay;          //是否开启精准刷新钟表
    private       DateTime  currentTime;          //当前时间
    private const int       hourDegrees   = 30;   //时针每次转30度
    private const int       minuteDegrees = 6;    //时针每次转6度


    void Start()
    {
        Hour   = GameObject.Find("钟表/时针").transform;
        Minute = GameObject.Find("钟表/分针").transform;
        Second = GameObject.Find("钟表/秒针").transform;
        UpdateClock(); //首次刷新
        sw.Start();    //开始计时
        Second2     = GameObject.Find("秒表/秒针").transform;
        totalSecond = GameObject.Find("秒表/Canvas-TotalSecond/TotalSecond Text").GetComponent<TextMeshProUGUI>();
    }


    void Update()
    {
        SecondChronograph();
        if (!IsTimeOfDay)
        {
            UpdateClock(); //实时
        }
        else
        {
            PreciseUpdateClock(); //精准
        }
    }


    /// <summary>
    /// 1——刷新钟表
    /// </summary>
    private void UpdateClock()
    {
        currentTime     = DateTime.Now;
        Hour.rotation   = Quaternion.Euler(0, currentTime.Hour   * hourDegrees,   0);
        Minute.rotation = Quaternion.Euler(0, currentTime.Minute * minuteDegrees, 0);
        Second.rotation = Quaternion.Euler(0, currentTime.Second * minuteDegrees, 0);
    }


    /// <summary>
    /// 2——刷新钟表，非常精确的过渡动画
    /// </summary>
    private void PreciseUpdateClock()
    {
        TimeSpan span = DateTime.Now.TimeOfDay;
        Hour.rotation   = Quaternion.Euler(0, (float) (span.TotalHours   * hourDegrees),   0);
        Minute.rotation = Quaternion.Euler(0, (float) (span.TotalMinutes * minuteDegrees), 0);
        Second.rotation = Quaternion.Euler(0, (float) (span.TotalSeconds * minuteDegrees), 0);
    }


    public  Transform       Second2;              //秒表的秒针
    private TextMeshProUGUI totalSecond;          //秒表的总秒数
    private Stopwatch       sw = new Stopwatch(); //实例化计时器类


    /// <summary>
    /// 3——秒表
    /// </summary>
    private void SecondChronograph()
    {
        var elapsedMilliseconds = (float) (sw.ElapsedMilliseconds - sw.Elapsed.Seconds * 1000) / 1000; //毫秒 :0-1000
        Second2.rotation = Quaternion.Euler(0, elapsedMilliseconds * 360, 0);
        totalSecond.text = sw.Elapsed.Seconds.ToString();
    }
}

---

3

Buffer Animation —— 缓冲动画

有时需求：秒针并非一秒旋转一次，而是每一帧都在不停转

说白了就是不听刷新秒针的角度，那么我们就需要实时变换且精确的角度

TimeSpan span = DateTime.Now.TimeOfDay
span.TotalHours —— 返回精准的小时数，精度为double
span.TotalMinutes —— 返回精准的分钟数，精度为double
span.TotalSeconds —— 返回精准的秒数，精度为double

核心就在这里，我们用Double精度的值，强转为Float乘以相应角度

并频繁刷新即可达到缓慢运动而精准的旋转效果

Chinar 为您封装好了函数，设置 bool 为 True 即可

---

4

Project —— 项目文件

项目文件为 unitypackage 文件包：

下载导入 Unity 即可使用

---

支持

May Be —— 开发者，总有一天要做的事！

拥有自己的服务器，无需再找攻略 Chinar 提供一站式《零》基础教程 使有限时间 具备无限可能！

---

Chinar 知你所想，予你所求！( Chinar Blog )

---

---

END

本博客为非营利性个人原创，除部分有明确署名的作品外，所刊登的所有作品的著作权均为本人所拥有，本人保留所有法定权利。违者必究

对于需要复制、转载、链接和传播博客文章或内容的，请及时和本博主进行联系，留言，Email: ichinar@icloud.com

对于经本博主明确授权和许可使用文章及内容的，使用时请注明文章或内容出处并注明网址