Unity makes Douyin same Roman clock

 

This Roman clock seems to have been released on a certain sound for a long time. I just saw it and thought it was very interesting, so I wanted to realize the effect. Directly above the picture below

 

Let me talk about the production idea first: 1. The placement of the text. 2. Acquisition and correction of time. 3. Text refreshes position as time refreshes

Main idea That's all, and then some animation effects. When the function first came out, there was no rotation animation, which looked very low. . .

A tween animation was added later.

Core code: Take the month as an example, the following is the initialization code, which is the placement of the position.

 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);
        }

    }

The following is the correction of the month

 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();
    }

In Update, check the time every frame, change it and then correct the corresponding part. The core part of the code is only these. Personally, I think it is just a calculation of some angles. It can be improved later, so that the rotation of the second hand can drive the rotation inside, so that it is more like a watch. Friends who are interested can try it.

Demo address: https://download.csdn.net/download/hnzmdlhc/12502457