在Unity中的image实现透明度渐变

目录

1.实现从有颜色到完全透明

2.实现从透明到有色

---

1.实现从有颜色到完全透明

首先添加组件Canvas Group：

 其中Alpha=0表示为透明，1则表示为有色。

脚本实现：

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

public class ToolTilePanel : MonoBehaviour
{
    private float alpha = 0.0f;
     //这里可以自己调整，按照你的需求来
    private float alphaSpeed = 0.8f;
   

    private CanvasGroup cg;

    void Start()
    {
        cg = this.transform.GetComponent<CanvasGroup>();
    }

    void Update()
    {
        if (alpha != cg.alpha)
        {
            cg.alpha = Mathf.Lerp(cg.alpha, alpha, alphaSpeed * Time.deltaTime);
            if (Mathf.Abs(alpha - cg.alpha) <= 0.01)
            {
                cg.alpha = alpha;
            }
        }
    }

    public void Show()
    {
        alpha = 1;

        cg.blocksRaycasts = true;//可以和该UI对象交互
    }

    public void Hide()
    {
        alpha = 0;

        cg.blocksRaycasts = false;//不可以和该UI对象交互
    }
}

2.实现从透明到有色

添加组件与先前一致，此处略。

添加脚本：

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

public class ToolT2 : MonoBehaviour
{
    private float alpha = 1.0f;
    private float alphaSpeed = 0.5f;

    private CanvasGroup cg;

    void Start()
    {
        cg = this.transform.GetComponent<CanvasGroup>();
    }

    void Update()
    {
        if (alpha != cg.alpha)
        {
            cg.alpha = Mathf.Lerp(cg.alpha, alpha, alphaSpeed * Time.deltaTime);
            if (Mathf.Abs(alpha + cg.alpha) >= 0.01)
            {
                cg.alpha = alpha;
            }
        }
    }

    public void Show()
    {
        alpha = 0;

        cg.blocksRaycasts = true;//可以和该UI对象交互
    }

    public void Hide()
    {
        alpha = 1;

        cg.blocksRaycasts = false;//不可以和该UI对象交互
    }
}

最后把它们都挂载在image(其它的一些东西也可以实现）上面，然后运行就可以得到渐变效果了。