Unity使用UI功能进行技能冷却倒计时特效

效果视频展示

jineng

如图可见，该效果是用过父子的嵌套方式

在Image中图片的覆盖关系，越上面的图片在越底层。在父子关系中，越儿子显示的图片在越上面

要达成这种效果可以将技能图片放在第一层中，新建一个Image的图片UI将技能图片导入进去,图片导入进去后，点击图片的Inpector面板，需要将Texture Type选择Sprite(2D and UI)才可以正常使用该图片

在Image中再新建一个Image的图片UI，这一层会覆盖上一层的图片，这边建议找一个纯白的图片，并且设置一定的透明度，使白色图片有模糊的效果。同时设置图片UI中的格式及旋转方向，将Image Type选择Filled格式，Fill Methon选择Radial 360即旋转360°，Fill  Origin选择Top表示顺时针，如下图所示

在子的ImageUI中的新建一个文本框UI(Text(TMP)),(现在主流是使用Text,小编这边使用新的，Text(TMP)，这边需要主要一下，UI的不同，导入的代码也不同）

界面部分完成后，在子的Image中添加实现功能的代码即可

using System.Collections;
using System.Collections.Generic;
using TMPro;
using UnityEngine;
using UnityEngine.UI;


///<summary>
///
///</summary>
public class SkillCD : MonoBehaviour
{
    [Header("技能CD时间")]
    [Range(1,100)]
    private float cd = 3;

    //计时器
    private float timer = 0;
    //开始CD
    private bool beginCD;
    //当前图片组件
    private Image maskImage;
    //技能CD显示时间文本

    private TMP_Text cdText;  
    //private Text cdText;
    private void Awake()
    {
        //找到图片组件
        maskImage = GetComponent<Image>();

        cdText = transform.GetChild(0).GetComponent<TMP_Text>();
        //新版本的数据类型,比较少用
        //找到文本组件
        //cdText = transform.GetChild(0).GetComponent<Text>();

    }

    private void Update()
    {
        if (Input.GetMouseButtonDown(0)  && beginCD == false)
        {
            //使用技能
            Debug.Log("使用技能");
            //设置填充值为1
            maskImage.fillAmount = 1;
            //开始转CD
            beginCD = true;
        }
        if (beginCD)
        {
            //转CD,填充值减少
            maskImage.fillAmount -= Time.deltaTime / cd;
            //显示技能可以再次使用的剩余时间
            cdText.text = (maskImage.fillAmount * cd).ToString("0.00");
            if (maskImage.fillAmount == 0)
            {
                cdText.text = "";
                beginCD = false; 
            }
        }
    }
}

这边由于使用的是Text(TMP)，所以需要导入一个using TMPro;

在这段计时代码中的0.00表示小数点后两位cdText.text = (maskImage.fillAmount * cd).ToString("0.00");