效果

效果如图，主要是释放技能后，有一定的技能的持续时间（也可以设置为0），然后技能释放完成后，技能进入了冷却时间的倒计时，技能冷却完成后就可以再次释放。

实现

UI搭建

UI的搭建较为简单就是几张图片（Image）配合文本（Text），文本主要用于技能冷却文字的提示和冷却CD倒计时的显示，而图片就包含了技能的图标、技能释放的外环（用于显示释放倒计时）、技能冷却的倒计时图片等，效果如图：

不过技能释放的外环和技能冷却倒计时图片需要将他们的Image Type设置为Filled:

编写代码

技能的配置项我们将他们提取为公用的，而且可以配置的操作：

   [Header("技能释放持续时间")]
    public float SkillDura;

    [Header("技能CD")]
    public float SkillCD;

    [Header("UI图片&文字")]
    public Text CountDownText;
public Image DoingImg, CoverImg;

这样我们就能在单个技能中配置多个技能各自的相关属性了。生产的配置面板如图：

技能的释放中的更新操作主要是根据释放的时间来更新释放图片的进度（fillAmount），并在释放完成后设置还原释放状态。

    void DoSkillUpdate() {
   
        if (Time.time - SkillTime <= SkillDura)
        {
   
            DoingImg.fillAmount = (SkillDura - (Time.time - SkillTime)) / SkillDura;
            //CountDownText.text = (SkillDura - (Time.time - SkillTime)).ToString("F1");
            CountDownText.text = "";
        }
        else
        {
   
            IsDoing = false;
            CoverImg.fillAmount = 1;
            DoingImg.fillAmount = 0;
            LastTime = Time.time;
        }
}

技能冷却CD读秒的过程，主要的操作是更新技能冷却图片的进度（fillAmount）和技能冷却的倒计时，并在技能冷却后重新设置技能的状态。

    void SkillNotReadyUpdate() {
   
        if (Time.time - LastTime <= SkillCD)
        {
   
            CountDownText.text = "冷却中\n"+(SkillCD - (Time.time - LastTime)).ToString("F1");

            CoverImg.fillAmount = (SkillCD - (Time.time - LastTime)) / SkillCD;
        }
        else
        {
   
            CountDownText.text = "";
            IsReady = true;
            CoverImg.fillAmount = 0;
        }
    }

技能的释放接口，我们需要进行一定的状态判断，正在释放中或者冷却中是无法释放的，释放接口如下：

public void DoSkill() {
   
        if (!IsReady || IsDoing)
            return;
        CoverImg.fillAmount = 0;
        LastTime = Time.time;
        SkillTime = Time.time;
        IsReady = false;
        IsDoing = true;
 }