Unity 图片渐变色的实现

这篇博客详细介绍了如何在Unity中为UI Image组件添加渐变效果。通过创建Gradient组件,调整Color1和Color2属性,以及设置旋转角度,可以实现自定义颜色渐变。代码示例中提供了一个名为Gradient的脚本,该脚本修改顶点颜色以达到图片渐变视觉效果。
摘要由CSDN通过智能技术生成

示例:

在这里插入图片描述

实现方法:

  1. 创建一个Image
  2. 再Image组件上添加 Gradient 组件
    在这里插入图片描述
  3. 调节Gradient组件中的Color1 和 Color2 即可
Gradient源码:
/*
 *FileName:      Gradient.cs
 *Author:        M
 *Date:          2022/02/23 13:51:26
 *UnityVersion:  2020.3.0f1c1
 *Description:   图片渐变效果
*/

using UnityEngine;
using UnityEngine.UI;

[AddComponentMenu("UI/Effects/Gradient")]
public class Gradient : BaseMeshEffect
{
    public Color Color1 = Color.white;
    public Color Color2 = Color.white;

    [Range(-180f, 180f)] public float Angle = -90.0f;

    public override void ModifyMesh(VertexHelper vh)
    {
        if (enabled)
        {
            var rect = graphic.rectTransform.rect;
            var dir = RotationDir(Angle);

            var localPositionMatrix = LocalPositionMatrix(rect, dir);

            var vertex = default(UIVertex);
            for (var i = 0; i < vh.currentVertCount; i++)
            {
                vh.PopulateUIVertex(ref vertex, i);
                var localPosition = localPositionMatrix * vertex.position;
                vertex.color *= Color.Lerp(Color2, Color1, localPosition.y);
                vh.SetUIVertex(vertex, i);
            }
        }
    }

    public struct Matrix2x3
    {
        public float m00, m01, m02, m10, m11, m12;

        public Matrix2x3(float m00, float m01, float m02, float m10, float m11, float m12)
        {
            this.m00 = m00;
            this.m01 = m01;
            this.m02 = m02;
            this.m10 = m10;
            this.m11 = m11;
            this.m12 = m12;
        }

        public static Vector2 operator *(Matrix2x3 m, Vector2 v)
        {
            float x = (m.m00 * v.x) - (m.m01 * v.y) + m.m02;
            float y = (m.m10 * v.x) + (m.m11 * v.y) + m.m12;
            return new Vector2(x, y);
        }
    }

    private Matrix2x3 LocalPositionMatrix(Rect rect, Vector2 dir)
    {
        float cos = dir.x;
        float sin = dir.y;
        Vector2 rectMin = rect.min;
        Vector2 rectSize = rect.size;
        float c = 0.5f;
        float ax = rectMin.x / rectSize.x + c;
        float ay = rectMin.y / rectSize.y + c;
        float m00 = cos / rectSize.x;
        float m01 = sin / rectSize.y;
        float m02 = -(ax * cos - ay * sin - c);
        float m10 = sin / rectSize.x;
        float m11 = cos / rectSize.y;
        float m12 = -(ax * sin + ay * cos - c);
        return new Matrix2x3(m00, m01, m02, m10, m11, m12);
    }

    private Vector2 RotationDir(float angle)
    {
        float angleRad = angle * Mathf.Deg2Rad;
        float cos = Mathf.Cos(angleRad);
        float sin = Mathf.Sin(angleRad);
        return new Vector2(cos, sin);
    }
}
Unity中,可以使用`Color.Lerp`函数来实现图片颜色的渐变效果。`Color.Lerp`函数用于在两个颜色之间进行插值,从而实现平滑的颜色过渡。 以下是一个示例代码,展示了如何在协程中实现图片颜色的渐变效果: ```csharp using UnityEngine; using UnityEngine.UI; using System.Collections; public class ExampleImageColorGradient : MonoBehaviour { public Image image; public Color startColor; public Color endColor; public float duration = 2f; private IEnumerator Start() { float elapsedTime = 0f; while (elapsedTime < duration) { float t = elapsedTime / duration; Color lerpedColor = Color.Lerp(startColor, endColor, t); image.color = lerpedColor; elapsedTime += Time.deltaTime; yield return null; } image.color = endColor; // 确保最终颜色与目标颜色一致 } } ``` 在上述示例中,我们通过`Color.Lerp`将`startColor`和`endColor`之间的颜色进行插值。在协程中,我们使用一个循环来控制插值过程的进行。通过逐渐增加`elapsedTime`并计算插值的参数`t`,我们可以在指定的时间内实现颜色的平滑过渡。每帧更新一次颜色,并等待一帧后再次更新,以实现平滑渐变效果。 请注意,上述示例中的`image`是一个`Image`组件,你需要将其添加到你的游戏对象上,并通过代码或Inspector面板将其分配给脚本中的`image`变量。另外,你可以根据自己的需求调整`startColor`、`endColor`和`duration`的值来实现不同的颜色渐变效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值