Unity-UGUI 血条制作-缓动效果(HP Slider)-多层血条

今天尝试用一个新方法做血条缓动效果,  只用了UGUI最基本组件：

新建一个Slider，[隐藏]或者[删去]滑动按钮 Handle Slide Area，变成血条的样子：

重点：

原始的Fill游戏体，作为【瞬间掉血】的那个血条，

加入一个新的Fill游戏体，作为【缓慢掉血】的那个血条。直接ctrl+d复制一个Fill就好，如图

调整这个Fill(1) 的参数, 使其和Fill一样（这也是重点）:

别忘了把【缓慢掉血】的血条，调一个不一样的颜色，例如白色：

挂上下面的脚本，给public 字段赋对应的值，然后调用即可。

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


/// <summary>
/// 设计编写：常成功
/// 创建时间：2020/04/14
/// 脚本功能：双层血条, 缓动掉血效果
/// 挂载位置：挂在Slider游戏体上比较好
/// </summary>



// 为了节省性能, 采用调用式, 而不是用update去监控血量变化
public class HP_Sub_Tween : MonoBehaviour
{
    // [实际血量]-瞬间掉血,  Slider组件里自带的那个Fill
    public RectTransform fill_rect_trans;
    // [缓动血量]-缓慢掉血,  自己复制出来的Fill_1
    public RectTransform tween_rect_trans;

    private float tween_speed = 4.0f;
    private bool tween_flag = false;
    private float last_max_x = 0; 
    private float start_x = 0;     // 缓慢掉血的血条-缓动起点
    private float end_x = 0;       // 缓慢掉血的血条-缓动终点
    private float now_x = 0;       
    private float tm_t = 0;
    

    // Start is called before the first frame update
    void Start()
    {
        // 确保[实际血量]显示在最上面(对应在Hierarchy同级的最下面)
        fill_rect_trans.SetAsLastSibling();
        // 初始的时候让[实际血量]和[缓动血量]一致
        tween_rect_trans.anchorMax = fill_rect_trans.anchorMax;
        last_max_x = fill_rect_trans.anchorMax.x;
    }


    // Update is called once per frame
    void Update()
    {
        // 启动过渡动画
        if (tween_flag)
        {
            tm_t += tween_speed * Time.deltaTime;
            Debug.Log(tm_t);
            if (tm_t >= 1)
            {
                tm_t = 1;
                tween_flag = false;   // 关闭过渡效果
                last_max_x = end_x;   // 记录缓动停止到哪里
            }
            // 采用Lerp, 暴击的时候, 会显得血掉的快
            now_x = Mathf.Lerp(start_x, end_x, tm_t);
            tween_rect_trans.anchorMax = new Vector2(now_x, fill_rect_trans.anchorMax.y);
        }
    }


    // 启动减血效果(此时Slider的value已经变化过了, [实际血量]已经变化)
    public void Start_Tween()
    {
        start_x = last_max_x;        
        end_x = fill_rect_trans.anchorMax.x;
        tween_flag = true;
        tm_t = 0; 
    }

}

看一下运行效果：

新的脚本，两层血条均基于Image组件的做法：

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


/// <summary>
/// 设计编写：常成功
/// 创建时间：2020/04/14
/// 脚本功能：双层血条, 带缓动掉血效果, 基于Image的Fill。触发式, 而不是Update去监控血量变化。
/// 挂载位置：挂在Slider游戏体上比较好
/// </summary>


public class HP_Sub_Tween2 : MonoBehaviour
{
    // [实际血量]--第1层血条, 瞬间掉血
    public Image HP_Image;
    // [缓动血量]--第2层血条(复制于1), 缓慢掉血
    public Image HP_Image_Tween;

    private float tween_speed = 2.8f;
    private bool tween_flag = false;
    private float tween_fill = 0;     // 缓慢掉血的起点
    private float target_fill = 0;    // 缓动终点
    private float now_fill = 0;
    // tm_t: 过渡时间, 0-1之间
    private float tm_t = 0;


    // Start is called before the first frame update
    void Start()
    {
        // 确保[实际血量]显示在最上面(对应在Hierarchy同级的最下面)
        // HP_Image.GetComponent<RectTransform>().SetAsLastSibling();
        // 初始的时候让[实际血量]和[缓动血量]一致
        HP_Image_Tween.fillAmount = HP_Image.fillAmount;
    }

    // Update is called once per frame
    void Update()
    {
        // 启动过渡动画
        if (tween_flag)
        {
            tm_t += tween_speed * Time.deltaTime;
            if (tm_t >= 1)
            {
                tm_t = 1;
                tween_flag = false;   // 关闭过渡效果
                // 确保一致
                HP_Image_Tween.fillAmount = HP_Image.fillAmount;
            }
            // 采用Lerp, 暴击的时候, 会显得血掉的快
            now_fill = Mathf.Lerp(tween_fill, target_fill, tm_t);
            HP_Image_Tween.fillAmount = now_fill;
            Debug.Log(tween_fill.ToString("F4")+"/"+ target_fill.ToString("F4")+"|("+tm_t.ToString("F2")
                + ")--" + now_fill.ToString("F4"));
        }
    }

    // ---- [重要]启动减血效果 ----
    /// <summary>
    /// 必须调用此函数, 才能启动缓动效果. 需要传入当前血量比例(0-1之间).
    /// </summary>
    public void Start_Tween(float hp_ratio)
    {
        // 更新实际血量(立即减血)
        HP_Image.fillAmount = hp_ratio;
        // 记录数据
        target_fill = HP_Image.fillAmount;
        tween_fill = HP_Image_Tween.fillAmount; 
        tm_t = 0;
        // 启动缓动效果
        tween_flag = true;
    }

}