自定义View-旋转变色圆角三角形的绘制

本文字数：3151字

预计阅读时间：20分钟

在现代设计中，动效图在APP的UI界面中所起到的作用无疑是显著的。相比于静态的界面，动效更符合人类的自然认知体系，它有效地降低了用户的认知负载，UI动效俨然已经成为了不可或缺的一部分。

那么在开发过程中，当遇到UI提供的动态物料满足不了内存以及效果的要求时，我们程序员就不得不通过代码自己去实现效果，这就引出了我们今天要实现的这个旋转变色圆角三角形。当时接到需求的时候，我也以为只要UI同学提供物料即可，但是实验的时候发现如果想呈现动效效果好一点的话，在不同的手机上可能会发生丢帧，OOM以及图形的严重锯齿化等一系列问题，最后实现这个效果的重任就落到了我们程序员的头上（很头大）。

记得当时为了实现这个动画效果，也是发挥了我尘封已久的初中数学知识，还有朋友的帮忙，才能顺利完成开发任务。所以虽然时间过去了很久，依然想做个记录，供大家参考探讨！废话说完终于要进入正题了，大家可以看一下这个UI动效，见下图：

首先我们仔细看这个动画，将它进行静态化拆分，大概如下图：

其实它的组成还是相对简单的，就是由以下这几个元素构成：黑色的三角形，沿着黑色三角形运动的红色/黑色轨迹，还有整体的旋转。那么我们就按部就班地一步一步来就行了。

第一步：画出一个“被放倒”的等边黑色三角形

问题来了，它三个角的坐标怎么确定呢？这里我们可以先考虑一下，它是要旋转的，等边三角形旋转的轨迹肯定是一个圆，那么呼之欲出的，到这里就需要我们拿出初中的数学知识了——三角形的外接