Unity 制作抖音同款罗马时钟

怼烎@ 2023-02-15 13:58 6阅读 0赞

这个罗马时钟 好像出来好久了在某音上，刚看到 觉得很 好玩，所以自己就想着实现一下 效果。 下面直接上图

![20200606093804462.gif][]

先说一下制作思路：1. 文本的放置位置。2.时间的获取 和校正。 3. Text随着时间的刷新 而刷新位置

主要思路 就这些，然后就是 一些动画 效果。刚开始功能出来的时候，是没有 旋转那个动画的，看上去 很low。。。

后面加了个 补间动画。

核心代码：拿月份 来说，下面 是初始化代码，就是 位置的放置。

private void InitMonthes()
        {
            int monthesLen = Monthes.Length;
            float radius = 100.0f;
            float posX = 0;
            float posY = 0;
            float angel = 360.0f / monthesLen;
            GameObject tempObj;
            for (int i = 0; i < monthesLen; i++)
            {
                posX = _middlePoint.localPosition.x + radius * Mathf.Cos((monthesLen - i) * angel * Mathf.Deg2Rad);
                posY = _middlePoint.localPosition.y + radius * Mathf.Sin((monthesLen - i) * angel * Mathf.Deg2Rad);
                tempObj = TextFactory(_monthesTrans);
                tempObj.GetComponent<Text>().text = Monthes[i];
                tempObj.GetComponent<TextState>().Init(new Vector3(posX, posY, 0), 0.5f);
                //tempObj.transform.localPosition = new Vector2(posX, posY);
                tempObj.transform.Rotate(transform.forward, (monthesLen - i) * angel);
            }
    
        }

下面这个是月份的校正

private void FixMonth(bool isInit = false)
        {
            int month = System.DateTime.Now.Month;
            _nowMonth = month;
            if (isInit)
            {
                _monthesTrans.transform.Rotate(transform.forward, 360.0f / Monthes.Length * (month - 1));       
            }
            else
            {
                //_monthesTrans.transform.Rotate(transform.forward, 360.0f / Monthes.Length);
                _monthesTrans.transform.DORotate(new Vector3(0, 0, _monthesTrans.eulerAngles.z + 360.0f / Monthes.Length), 0.8f);
            }
    
            if (month - 2 < 0)
            {
                _monthesTrans.GetChild(Monthes.Length - 1).GetComponent<TextState>().SetNormal();
            }
            else
            {
                _monthesTrans.GetChild(month - 2).GetComponent<TextState>().SetNormal();
            }
            _monthesTrans.GetChild(month - 1).GetComponent<TextState>().SetHighLight();
        }

在Update里面 每帧去检测时间，发生改变 然后去校正 相应的 部分。核心部分代码 就只有这些。个人觉得只是一些角度的计算，后面可以 改进一下，让秒针 转动 带动 里面 的转动，那样就更像表了，有兴趣的朋友可以试试。

Demo地址 ：[https://download.csdn.net/download/hnzmdlhc/12502457][https_download.csdn.net_download_hnzmdlhc_12502457]

[20200606093804462.gif]: https://img-blog.csdnimg.cn/20200606093804462.gif
[https_download.csdn.net_download_hnzmdlhc_12502457]: https://download.csdn.net/download/hnzmdlhc/12502457