简易血槽残影设计方案（使用协程）

　　今天看了段DNF视频，有发现到血条变化效果是这样的：

 

 

　　这里为了突出Boss受到的伤害之大，也就是玩家的伤害之高，以至于Boss的血条变化会出现残影效果。

　　那么，就简单使用协程来实现了一下这种效果：

　　

 

　　实现思路也蛮简单的：就是在Canvas下创建两个Slider，分别是Slider和Slider01，先将每个Slider中的Fill Area下的Fill拖到其父项下，然后除了Background、Fill，其余子项全部删除，再将Slider01放入Slider中。

　　这里，就把Slider01作为Slider的残影。

　　因为想最快写出效果，所以就直接用了协程来实现的，当然，如果在实际项目中有很多需要优化的地方。

　　把脚本绑定到最外边的Slider组件下。

　　[锤子猫原创代码，转载请标注来源]

　　测试代码如下：

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

public class HealControl : MonoBehaviour
{
    public float curHeal; //当前血量

    public float allHeal; //总血量

    public float reHeal; //增量

    public float reTime = 0.01f; //递减时间

    public float[] tempData; //临时数据组

    public Slider fatherSlider, sonSlider; //父子血条

    // Start is called before the first frame update
    void Start()
    {
        tempData = new float[2] { 0f, 0f }; //初始化 0：旧父血条值  1：子血条值

        fatherSlider = this.GetComponent<Slider>(); //获取父血条组件
        sonSlider = this.GetComponent<Slider>().transform.GetChild(1).GetComponent<Slider>(); //获取子血条组件

        tempData[0] = curHeal; //给旧父血条值赋初值
        tempData[1] = tempData[0]; //给子血条值赋初值

        fatherSlider.value = curHeal / allHeal; //计算血量值后赋给血条
        sonSlider.value = tempData[0] / allHeal; //计算子血量值后赋给血条
    }

    // Update is called once per frame
    void Update()
    {
        Blood0peration();
    }

    public void Blood0peration() //血量值换算成血条值
    {
        if (curHeal < tempData[0] && Mathf.Abs(curHeal - tempData[0]) > 0.1f) //判断父血量发生变化
        {
            StartCoroutine(TimerForFBloodReduce());
        }
        else if (curHeal > tempData[0] && Mathf.Abs(curHeal - tempData[0]) > 0.1f)
        {
            StartCoroutine(TimerForFBloodAdd());
        }
        else
        {
            StopCoroutine(TimerForFBloodReduce());
            StopCoroutine(TimerForFBloodAdd());
            tempData[0] = curHeal;
        }

        if (curHeal < tempData[1] && Mathf.Abs(curHeal - tempData[1]) > 0.1f) //判断子血量发生变化
        {
            StartCoroutine(TimerForSBloodReduce());
        }
        else
        {
            StopCoroutine(TimerForSBloodReduce());
            tempData[1] = curHeal;
        }
    }

    private IEnumerator TimerForFBloodReduce()
    {
        while (Mathf.Abs(curHeal - tempData[0]) > 0.1f)
        {
            tempData[0] -= reHeal;
            fatherSlider.value = tempData[0] / allHeal;
            yield return new WaitForSeconds(reTime);
        }
    } 

    private IEnumerator TimerForFBloodAdd()
    {
        while (Mathf.Abs(curHeal - tempData[0]) > 0.1f)
        {
            tempData[0] += reHeal;
            fatherSlider.value = tempData[0] / allHeal;
            yield return new WaitForSeconds(reTime);
        }
    } 

    private IEnumerator TimerForSBloodReduce()
    {
        while (Mathf.Abs(curHeal - tempData[1]) > 0.1f)
        {
            tempData[1] -= reHeal;
            sonSlider.value = tempData[1] / allHeal;
            yield return new WaitForSeconds(reTime + 0.02f);
        }
    } 
}