GLSL 效果示例
圆弧进度条：让端点沿圆环移动
进度从零增长到一圈，两个圆头跟随起止角。
在线示例
修改右侧代码，左侧预览会实时更新。
观察什么
进度从零增长到一圈，两个圆头跟随起止角。
实现原理
角度阈值保留圆环的一部分，起止点各加入圆头，端点不会随角度改变粗细。
找到控制效果的代码
float progress=.05+.9*u_parameter,a=mod(atan(p.y,p.x)+6.28318,6.28318),end=progress*6.28318;vec2 cap=vec2(cos(end),sin(end))*.5;float d=a<end?abs(length(p)-.5)-.055:min(length(p-vec2(.5,0)),length(p-cap))-.055;c=mix(c,vec3(.2,.85,1.),1.-smoothstep(-aa,aa,d));
动手修改
把 u_parameter 先设为 0.25，再设为 0.75，progress=.05+.9*u_parameter 会从 0.275 变为 0.725。圆头端点会沿圆环走得更远，圆环半径仍为 0.5。
调试与成本
圆环与端点距离都减去同一个描边半径 .055。把这些 .055 全部改为 .08，圆弧和两个圆头会一起变粗；只改圆环会使端点尺寸不匹配。