Unity は Douyin を同じローマ時計にします

 

このローマ時計は以前からあるサウンドでリリースされていたようですが、たまたま見ただけで非常に面白いと思ったのでその効果を実感したいと思いました。下の写真の真上

 

まずは制作アイデアについてお話します。 1. テキストの配置。2.時刻の取得と修正。3. 時間が更新されるとテキストの位置も更新されます

主なアイデア これですべてです。その後、いくつかのアニメーション効果を加えます。この機能が最初に登場したとき、回転アニメーションはなく、見た目は非常に低かったです。。。

トゥイーンアニメーションは後で追加されました。

コアコード: 月を例に挙げます。以下はポジションの配置を示す初期化コードです。

 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ではフレームごとに時間を確認して変更し、該当箇所を修正します。コードの核となる部分はこれだけです。個人的には、これは単なる角度の計算だと思いますが、後から改良して、秒針の回転で内部の回転を駆動することで、より時計らしくすることができます。興味のある友達は試してみてください。

デモのアドレス: https://download.csdn.net/download/hnzmdlhc/12502457