欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

UGUI实现文字/图片颜色渐变

程序员文章站 2022-05-30 17:37:35
...

/*
最后修改时间:
主题:
功能:
作者:
*/
using FZY;
using System.Collections;
using System.Collections.Generic;
using System.Text;
using UnityEngine;
using UnityEngine.UI;
using UnityEditor;
using System;

[RequireComponent(typeof(Graphic))]
public class NewBehaviourScript : BaseMeshEffect
{
    [SerializeField]
    private Color _topColor = Color.white;//顶部颜色
    [SerializeField]
    private Color _buttomColor = Color.white;//底部颜色
    [SerializeField, Range(-1f, 1f)]
    private float _colorScale = 0f; //颜色过度的比例

    public override void ModifyMesh(VertexHelper vh)
    {
        //判断当前对象是否为**状态
        if (!IsActive()) return;

        List<UIVertex> vList = new List<UIVertex>();
        vh.GetUIVertexStream(vList);
        ModifyVertices(vList);
        vh.Clear();
        vh.AddUIVertexTriangleStream(vList);
    }

    void ModifyVertices(List<UIVertex> vList)
    {
        if (IsActive() == false || vList == null || vList.Count == 0)
        {
            return;
        }

        //记录初始顶点的纵坐标
        float topPosY = vList[0].position.y;
        float buttomPosY = vList[0].position.y;

        //遍历所有顶点,找出最上与下的,用来下面做颜色差值
        for (int i = 0; i < vList.Count; i++)
        {
            UIVertex temp = vList[i];
            topPosY = Mathf.Max(topPosY, temp.position.y);
            buttomPosY = Mathf.Min(buttomPosY, temp.position.y);
        }

        //计算整个文本组件顶点的垂直间距
        float intervalHeight = topPosY - buttomPosY;

        //开始修改顶点
        for (int i = 0; i < vList.Count; i++)
        {
            UIVertex temp = vList[i];
            //颜色差值  颜色不受到源字体颜色的影响
            temp.color = Color.Lerp(_buttomColor, _topColor, (intervalHeight > 0 ? (temp.position.y - buttomPosY) / intervalHeight : 0) + _colorScale);
            
            //如果想让颜色受到源字体颜色的影响,可以使用下面这句
            //temp.color=temp.color* Color.Lerp(_buttomColor, _topColor, (intervalHeight > 0 ? (temp.position.y - buttomPosY) / intervalHeight : 0) + _colorScale);
            
            //再赋值会原来的顶点,抛回去绘制
            vList[i] = temp;
        }
    }
}

参考了一些大神们的代码,加上自己的理解,了解了十有八九

最后让我们来看一下最后的效果

UGUI实现文字/图片颜色渐变

脚本只需要挂到字体或颜色组件上就可以看到效果了

有不懂可以在详情问我UGUI实现文字/图片颜色渐变

相关标签: UGUI