背包中特殊物品有cd需求，参考了下苹果的效果。

思路

这个效果变暗的区域，我们可以使用rgb除以一个正整数的形式来实现变暗。如这样：color.rgb/3.0

里面有一个变暗的动态圆，中间环形是正常颜色，最外圈是变暗的静态环，覆盖整个图标。那这里就需要有两个半径，一个是内圆半径R，一个是外环半径R1。

先绘制出两个 变暗的区域出来。
下面展示一些 内联代码片。

vec2 center = vec2(0.5,0.5);
	float R = 0.15;
	float R1 = 0.2;
	vec2 uv = v_texCoord;
	vec4 color = texture2D(CC_Texture0, uv) * v_fragmentColor;
	float D = distance(center,uv);
	//内圆
	//0 在范围内 1 在范围外
	float flag = step(R,D);
	color.rgb = mix(color.rgb/3.0,color.rgb,flag);
	//外部环形变暗的区域
	float flag1 = step(D,R1);
	color.rgb = mix(color.rgb/3.0,color.rgb,flag1);;

效果：

非常简单，把静态的暗区域给画了出来。

下面考虑下，顺时针跑CD的效果。

这里面需要注意的，就是这个cd效果的操作必须限制在中间的圆形变暗区域里面。上面的代码有个flag。为0时表示在范围内，1表示在范围外。

    float rate = 1.0;
	vec2 curDir = normalize(uv - center);
	float angle =2.0*3.14*(mod(CC_Time.x*rate,1.0) - 0.5);
	float flag2= clamp(sign(angle+atan2(curDir.x,curDir.y)),0.0,1.0);
	//在范围内
	if（flag == 0）
	{
		color.rgb = mix(color.rgb,color.rgb*3.0,flag2);
	}
	

atan2(curDir.x,curDir.y)，我将x 和 y 调换了位置是为了保证cd是顺时针并且起始是在向上的方向。

color.rgb = mix(color.rgb,color.rgb*3.0,flag2);
因为上面的画静态圆的时候，内圆的像素被统一除以3.0了。所以这里要恢复成原来的颜色得乘回来。

但上面还是有点不爽。这个if判断得考虑把它去掉。至于为什么，我在链接: https://blog.csdn.net/qq_36705579/article/details/105935183.中有讲过。

不难看出，flag == 1 时 ，flag2 = 0 就可以了。

float flag2= clamp(sign(angle+atan2(curDir.x,curDir.y)),0.0,1.0);
我们可以把这个改造下，clamp 是将其限制在[0,1]这个区间内。

由于step函数的作用，flag的取值范围只有 0 或 1。那么我们可以这么处理
float flag2= clamp(sign(angle+atan2(curDir.x,curDir.y)),0.0,(1.0-flag));
当flag == 1 时，flag2被限定在[0,0]，也就是0了。

    float rate = 1.0;
	vec2 curDir = normalize(uv - center);
	float angle = 2.0*3.14*(mod(CC_Time.x*rate,1.0) - 0.5);
	//flag==1 => flag2 = 0
	float flag2 = clamp(sign(angle+atan2(curDir.x,curDir.y)),0.0,(1.0-flag));

	color.rgb = mix(color.rgb,color.rgb*3.0,flag2);

附上效果图：

就到这里了，有疑问或建议的留言交流。