C# 如何绘制线条动画来勾勒各种形状？

我试图画一条线动画轮廓各种形状，如下图所示。我非常清楚，我提到我能够获得具体帮助的最佳实践，但我不确定从哪里开始，只是我知道使用线渲染器可能是实现这一点的一个好方法。也就是说，我如何才能做到这一点

更新

我想有几件事我解释得不够清楚。我感兴趣的是不带箭头的对象的轮廓动画，只是围绕轮廓绘制的一条线，如下图所示：

我将执行以下操作：（伪代码，未经测试）

对于每个预设或游戏对象，存储定义轮廓的边列表。 我不建议使用网格的边，最好是每个形状有一个特定的预定义边列表，以避免对象的内部边。列表中的每个条目都由两个向量3定义，它们是两个顶点

List<Vector3[]> outline = new List<Vector3[]>();

列表大纲=新列表（）；

现在，您有很多方法来实际绘制箭头，比如将它们作为单个游戏对象（可能不是一个好主意）、粒子系统，或者只是从父对象更新功能自动绘制。我推荐后者

现在，您将存储一组浮动来定义箭头的位置

public List<float> arrow_locations = new List<float>();

//adding one arrow   
arrow_locations.Add(0.0);

//now in the update function of your parent object, update the arrow locations

private float cycle = 0.0f;
void Update()
{
   float segment_size = 360.0f/outline.Count;
   for(int i=0; i < arrow_locations.Count; i++)
   {
        arrow_locations[i] += 0.05f;  //speed of spinning
        if( arrow_locations[i] >= 360.0f ) arrow_locations[i] = 0;

        //now to get the actual location of the arrow
        int which_edge = Mathf.Floor((arrow_locations[i]/360.0f)*outline.Count);
        //this will give us a number 0..1 telling us where along the edge the arrow is
        float weight_within_edge=(arrow_locations[i] - segment_size*which_edge)/segment_size; 

        //here we lerp between the two vertices of the edge 
        Vector3 new_loc = outline[which_edge][0]*(1.0-weight_within_edge) + outline[which_edge][1]*(weight_within_edge); 

       //now that we have the location of the arrow, draw it
       //note, you can get more efficient if using instancing for all arrows
       //You can also use line drawing, but i wouldn't recommend that. 
       DrawMesh(arrow_mesh, new_loc, Quaternion.identity);

   }

}

public List arrow_locations=new List（）；
//添加一个箭头
箭头位置。添加（0.0）；
//现在，在父对象的更新函数中，更新箭头位置
私人浮动周期=0.0f；
无效更新（）
{
浮动段大小=360.0f/outline.Count；
对于（int i=0；i=360.0f）箭头位置[i]=0；
//现在获取箭头的实际位置
int，其边缘=基本地板（（箭头位置[i]/360.0f）*轮廓计数）；
//这将给我们一个数字0..1，告诉我们箭头沿边缘的位置
边缘内的浮动权重=（箭头位置[i]-分段尺寸*哪个分段尺寸）/分段尺寸；
//这里我们在边的两个顶点之间移动
Vector3 new_loc=轮廓[哪个_边][0]*（1.0-权重_在_边内）+轮廓[哪个_边][1]*（权重_在_边内）；
//现在我们有了箭头的位置，绘制它
//请注意，如果对所有箭头使用实例化，则效率会更高
//你也可以用线条画，但我不推荐这样。
DrawMesh（箭头网格、新网格、四元数标识）；
}
}

---

请注意，当您有箭头的位置时，您可以通过将箭头投影到相机平面，选择在UI中以2D绘制箭头。箭头以外的线本身是静态的，因此可以非常轻松地将它们作为网格的一部分绘制。还要注意的是，我并没有提到对象的位置，所有的值都应该在局部空间中定义，然后用对象进行转换。通过提供变换矩阵，可以在DrawMesh函数中变换绘制的内容

我认为使用参数化径向遮罩的着色器将是最好的方法。我自己从来没有做过一个，所以我对它是如何做的只有一个大概的想法，但下面是它如何工作的：

创建某种可以绘制对象边缘的单元着色器

创建一个过滤器/遮罩，该过滤器/遮罩具有从中心到边缘径向挤出的角度形状；可以使用参数控制形状/角度。Unity在未来已经有了类似的东西。

• 注意：教程甚至可能正是这个想法，但我不记得有足够的细节来确认；我会在再次查看后更新答案
• 本教程也有相同的想法，但它使用unity的内置UI来应用它

使用此遮罩，屏幕上将仅绘制形状边缘的遮罩区域

通过随时间增加遮罩的“角度”参数，可以创建随时间呈放射状显示对象边缘的效果。这似乎正是你想要的

---

为了帮助可视化，用油漆制作了一张非常专业的图表：

• 浅蓝色=遮罩
• 深蓝色=“显示”遮罩部分（角度参数）。加上角度增加时的行为（箭头）
• 绿色=对象
• 黑色=绘制到屏幕上的轮廓

---

我知道渐变之类的简单着色器。这是一个相当大的进步。我甚至不确定我将如何完成第一步。@Bane从网上类似内容的教程判断，应该不会太复杂（#FamousLastWords）。不幸的是，正如我所说的，我自己还没有做过这样的效果（着色器与否），所以我无法提供任何有经验的见解。对不起，我帮不上忙了。