让进度条颜色渐变的shader

3 篇文章 0 订阅

让进度条颜色渐变的shader


1.先看效果 我做的是根据蓝色

在这里插入图片描述
2.先写shader代码

Shader "Unlit/TheGradientShader"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _TexTintColor("Texture Tint Color", Color) = (1,1,1,1)
        _PlaneColor("Plane Color", Color) = (1,1,1,1)
        _Unity("_Unity", float) = 1.5
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" "Queue"="Transparent" }
        LOD 100
        Blend SrcAlpha OneMinusSrcAlpha
        ZWrite Off
 
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            
            #include "UnityCG.cginc"
 
            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
                float3 uv2 : TEXCOORD1;
            };
 
            struct v2f
            {
                float4 vertex : SV_POSITION;
                float2 uv : TEXCOORD0;
                float3 uv2 : TEXCOORD1;
            };
 
            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed4 _TexTintColor;
            fixed4 _PlaneColor;
            float _ShortestUVMapping;
            float _Unity;
          
 
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                o.uv2 = v.uv2;
                return o;
            }
            
            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv) * _TexTintColor;
                col = lerp( _PlaneColor, col, col.a);
                col.a *= smoothstep(_Unity, _ShortestUVMapping, i.uv2.x);
                return col;
            }
            ENDCG
        }
    }
}

2.创建材质
图中1的地方可选放不放图片
也可以texture tint color的地方改成自己想要的颜色
在这里插入图片描述

3.材质放到image上
在这里插入图片描述
4.设置值的方法

//x=0-1 float值
  imgPercent.material.SetFloat("_Unity", x/100f* 1.6f);
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android 圆形进度条可以通过自定义 View 或者使用第三方库来实现。以下是一种简单的实现方式: 1. 创建一个自定义 View 类,继承自 View 或者 ProgressBar。 2. 在自定义 View 的构造方法中初始化画笔和属性。 3. 重写 onDraw 方法,在该方法中绘制圆形进度条。 4. 使用属性动画或者定时器来更新进度值,并调用 invalidate 方法触发重绘。 下面是一个简单的示例代码: ```java public class CircleProgressBar extends View { private Paint backgroundPaint; private Paint progressPaint; private RectF arcRect; private int progress; private int maxProgress; public CircleProgressBar(Context context) { super(context); init(); } public CircleProgressBar(Context context, AttributeSet attrs) { super(context, attrs); init(); } private void init() { backgroundPaint = new Paint(); backgroundPaint.setColor(Color.GRAY); backgroundPaint.setStyle(Paint.Style.STROKE); backgroundPaint.setStrokeWidth(10); progressPaint = new Paint(); progressPaint.setStyle(Paint.Style.STROKE); progressPaint.setStrokeWidth(10); progressPaint.setStrokeCap(Paint.Cap.ROUND); arcRect = new RectF(); progress = 0; maxProgress = 100; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int centerX = getWidth() / 2; int centerY = getHeight() / 2; int radius = Math.min(centerX, centerY) - 10; arcRect.set(centerX - radius, centerY - radius, centerX + radius, centerY + radius); // 绘制背景圆弧 canvas.drawArc(arcRect, 0, 360, false, backgroundPaint); // 绘制进度圆弧 float sweepAngle = 360 * ((float) progress / maxProgress); Shader shader = new SweepGradient(centerX, centerY, Color.RED, Color.BLUE); progressPaint.setShader(shader); canvas.drawArc(arcRect, -90, sweepAngle, false, progressPaint); } public void setProgress(int progress) { this.progress = progress; invalidate(); } public void setMaxProgress(int maxProgress) { this.maxProgress = maxProgress; } } ``` 使用时,可以在布局文件中添加该自定义 View,并通过调用 `setProgress` 方法来更新进度值。 相关问题: 1. 如何创建一个自定义 View? 2. 如何绘制圆形进度条? 3. 如何使用属性动画来更新进度值? 4. 如何使用定时器来更新进度值? 5. 如何使用第三方库来实现圆形进度条
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值