Unity随记(三) 方形头像与圆形头像的切换过度效果

本文链接：https://blog.youkuaiyun.com/Vitens/article/details/105184646

本文介绍如何在Unity3D中实现头像的圆形裁剪和旋转效果，包括使用Shader进行图片裁剪，以及通过控制Transform的Rotation实现平滑旋转，并通过插值和AnimationCurve调整裁剪范围和旋转速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图
在这里插入图片描述
这应该不太陌生的吧，这就是雨松大牛Unity3D研究院里面的头像效果，最开始逛他的文章就发现这个效果有点意思，于是自己动手在Unity里面实现一个类似的效果。
其实关键就两步操作，1.实现图片的圆形裁剪，2.控制图片的旋转

圆形裁剪

要做圆形裁剪，首先想到的就是用Shader来处理了，通过图片的UV值可以明确的知道，裁剪后的圆的圆心处的UV值其实是（0.5,0.5）,而左下角的值是（0,0），右上角是（1,1）
在这里插入图片描述
任一点A到O的距离如果大于半径（0.5）则进行裁剪操作，而其他部分则保留，就能得到一个正方形的内切圆，而最远距离P到O则为根号2的一半。
frag中的关键代码：

//裁剪 step(a,x)  x >= a  return 1,  x < a return 0
col.a = step(distance(i.uv, float2(0.5, 0.5)), _ClipRange);

其实上面可以这样写：

if(distance(i.uv, float2(0.5, 0.5)) > _ClipRange)
{
   
	discard;
}

只是为了避免使用discard操作，而选择设置透明度，这个就得配合blend操作了，比如这里设置的是blend SrcAlpha OneMinusSrcAlpha

效果如下：
在这里插入图片描述
这里有个Outline，其实是为了打算让裁剪后的头像有个外边框，比如当前这张图没有外边框，裁剪后的效果：

添加Outline的关键代码如下：

//添加Outline
if(distance(i.uv, float2(0.5, 0.5)) > _ClipRange - _Outline)
{
   
	col.rgb = _OutlineColor.rgb;
}

完整的Shader代码如下：

Shader "vitens/circle"
{
   
    Properties
    {
   
        _MainTex ("Texture", 2D) = "white" {
   }
        _ClipRange("Clip Range", Range(0, 0.7071)) = 0.5
        _Outline("Outline", Range(0, 0.2)) = 0
        _OutlineColor("Outline color", COLOR) = (1,1,1,1)
    }
    SubShader
    {
   
        Tags {
    "RenderType"="Opaque" }
        LOD 100

        blend SrcAlpha OneMinusSrcAlpha

        Pass
        {
   
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct appdata