话不多说，先看效果图。自定义View很简单
回弹效果
我这就说下大致思路，还不懂的去看git上的看代码。
1.上图中，出现图形最多的就是圆弧，这个很简单我们可以使用canvas.drawArc方法绘制圆弧
2.然后圆，中间的有透明度的圆，和指针底部无透明度的小圆。这个也简单使用canvas.drawCircle方法绘制，透明度可以用paint的alpha属性设置。这里有个细节，大家可以去看我的代码都有注释
3.在看下中间的，比较复杂的指针箭头。一种方式是让美工切一个，然后画出来。另一种用canvas的drawPath方法，绘制出来。我使用的是后一种，毕竟不是太复杂，而且还能练练手。
4.接下来就是渐变色了，我们可以SweepGradient类，设置到paint 的shader属性上即可，但如果要做到图中的效果，我们还要做些旋转，这个看代码就行了。
5.最后是动画。我们是用BounceInterpolator这个差值器实现，可以看到是有回弹效果的。小伙伴们也可以换成变得，比如先快后慢等。
下面是git地址，大致框架已经说了，省下的看代码更清楚
https://github.com/allenzhangp/colorfulpanel/blob/master/README.md
下面我再啰嗦下，可能有些小伙伴代码也看的费劲
(1)记住下面这张图，我们坐标的计算都是按照这图上的坐标系来写的。x和y已经画出来了横轴是x轴，纵轴是y轴。然后正东面表示0°，顺时针是正的度数。
然后在记住下面这个公式换算，计算在圆上点的坐标方程，如果圆心坐标是（x0,y0）,圆的半径r
那么圆上angleRadians角度的坐标为
val angleRadians = realAngle * Math.PI /180 //换算成弧度,realAngle为角度，比如270°
x1 = r * Math.cos(angleRadians).toFloat() +x0
y1 = r * Math.sin(angleRadians).toFloat() +y0
这个公式在代码中多次用到，计算坐标很方便
坐标系
（2）如果细心的小伙伴应该已经看到了，左右两边和最上面黄色的那个四分之一圆有空隙，不是连续的（谁让美工觉得更好看呢）！。
空隙
但是我们的整体框架已经定了，每个弧度都代表四分之一圆，有这个白色的小块就很麻烦。怎么办呢？
如果左边的白色空隙和红色圆弧一起表示四分之一，右边那块空白和下面绿色圆弧一起表示四分之一，最上面的黄色一块表示四分之一，这样处理后期算坐标会方便很多。
如果还有不清楚的，可以直接回复。
网友评论