效果
基本原理：利用 ImageType 中的Filled方法，通过代码控制FillAmount来实现图标的冷却效果。
主要步骤：
1 在Canvas中创建一个Image，起个名字比如“Offense”；
2 在Offense（Image）下，创建两个子Image（Bkg 和 Mask0）和一个子Text；如下图，其中Bkg用来给图标套框，可以不用；
3 导入需要的图标素材，并在Texture Type中将类型设置为Sprite，根据需要调整导入参数后，Apply。
这里使用了https://opengameart.org/content/painterly-spell-icons-part-3上的图标素材，作为示例。
用作技能图标的Fireball
用作Bkg的Frame
4 将素材添加到对应的Image组件上，如下：
出于简单考虑，Mask使用了unity自带的Background(Sprite)
5 Mask的ImageType设置为Filled，具体设置如下图：
Background的颜色设置成深色，并且跟需要调整好透明度，如下：
现在，便可以手动拖动Fill Amount的滚动条，来查看冷却效果。
技能冷却效果需要能和实际的冷却时间关联，因此接下来需要通过代码实现：
6 编写冷却计时与冷却效果控制代码（C#），此代码作为参考，仅提供实现思路，实际使用还需要根据具体情况进行调整。
private const float m_CD_0 = 2f; // 冷却时间，2s
private float[] m_CD_Left = new float[3];
private bool[] CD_Trigger = new bool[3];
private Image[] m_Masks = new Image[3];
private Text[] m_Texts = new Text[3];
void Start () {
CD_Trigger [0] = false; // 初始化为false，在Update()中，跳过冷却计时代码；
m_CD_Left[0] = m_CD_0; // 初始化为对应冷却时间
m_Masks[0] = GameObject.Find("Mask0").GetComponent<Image>(); // 获取Mask的实例，可用其他方法
m_Masks[0].enabled = false; // 禁用Mask，确?？际保寄芡急晷Ч捎?；
m_Texts[0] = BtnObject.GetComponentInChildren<Text>(); // 获取Text实例，可用其他方法
m_Texts[0].enabled = false; // 禁用Text，确?？际保寄芡急晟衔蘩淙词窒允荆?
}
void Update () {
// 此处我有多个按钮需要不同的CD，因此用了数组;
// CD_Trigger[0] 是一个bool值，用于判断是否开始冷却计时；
if (CD_Trigger[0]) {
// m_CD_Left[0] 冷却开始后，计算冷却剩余时间
m_CD_Left[0] -= Time.deltaTime;
// 更新对应mask的Image.FillAmount, 由于FillAmount是[0,1]，要换算成对应范围的小数
m_Masks[0].fillAmount = m_CD_Left[0] / m_CD_0;
// 更新技能图标文本中的数字显示，采用string.Format，详情可参考C#官方文档，“F1”表示一位小数
m_Texts[0].text = string.Format("{0:F1}", m_CD_Left[0]);
if (m_CD_Left[0] < 0) { // 如果剩余冷却时间为0，则停止冷却，并重新初始化相关变量。
CD_Trigger[0] = false; // 下一个frame开始将不再执行if (CD_Trigger[0]){...}语句块的代码；
m_CD_Left[0] = m_CD_0; // 剩余冷却时间重新赋值为初始值
m_Masks[0].enabled = false; // Mask被禁用，不显示在图标上
m_Texts[0].enabled = false; // Text被禁用，不显示数值
}
}
}
// 技能释放，在角色施法时被调用，这里是一个重载
// index是技能编号，groupindex是对应按钮编号，与本文无关可忽略。
public void SpellCast(int index, int groupindex){
// 如果技能不再冷却中，则释放技能并开始冷却计时；如果技能在冷却，则跳过；
if (!CD_Trigger [groupindex]) {
// 真正的技能释放，与本文无关。
CmdSpell (index,2f,SpellCastPosition.position,SpellCastPosition.rotation,groupindex);
// 与冷却相关的在这里：
CD_Trigger[groupindex] = true; // 赋值为True，下一个frame，开始冷却计时
m_Masks[groupindex].enabled = true; // 启用Mask（Image）
m_Masks[groupindex].fillAmount = 1; // FillAmount设为1，确保效果显示正确
m_Texts[groupindex].enabled = true; // 启用Text，显示冷却数字
}
}
7 Enjoy It！
至此，基本的技能图标的冷却效果和时间显示便完成了，还不赶快试一下吗？
