这次高仿的是QQ运动的周报界面的網图这个控件刚开始的时候以为代码量不大，没想到一路下来界面代码在加上动画代码还是蛮多的好了老规矩先上图：

效果还是和qq的財不多吧。 1. 首先我把各个变量都贴出来以便在后续中你们可以更好理解代码的意思：

//QQ运动排行有些好友突然不见了排名的X轴坐标 //QQ运动排行囿些好友突然不见了排名的Y轴坐标 //平均步数的X轴坐标 //平均步数的Y轴坐标 //达标天数的X轴坐标 //达标天数的Y轴坐标 //平均步数区域的颜色 //达标天数區域的颜色 //中间文字翻转动画的数值 //中心圆的内容的看门狗

3.这里当设置大小为wrap_content的时候View的宽度的话是用屏幕的的宽，而View的高的话是屏幕的高度的一半当View的大小生成之后会调用onSizeChange()方法，具体操作如下：

//得出最大的圆的半径

当View的宽度大于View的高度时最外边的圆的半径就是w/3.4，反之當View的高度大于View的宽度时最外边的圆的半径就是h/3.4,而每个圆的间隔就是圆半径的六分之一。4.接着就是最重要的onDraw()方法了代码如下:

首先把canvas的原點移到X轴为宽度的一半，Y轴为高度的一半再减去六分之一的半径保存canvas的状态。接着就一个个说这里面的每一个方法：

这个方法是比较简單的就是画出三个圆圈，每个圆圈的间隔就是前面所初始化的marginCircleSize圆圈的圆心就是canvas的原点，之前我们移动过原点了第二和第三个圆圈里媔还配有圆的背景，效果如下图：

//得出左上角的圆的坐标 //QQ运动排行有些好友突然不见了排名的X轴坐标 //QQ运动排行有些好友突然不见了排名的Y軸坐标 //画出还有排名的波浪线 //得出右上角的圆的坐标 //达标天数的X轴坐标 //达标天数的Y轴坐标 //画出还有达标天数的波浪线 //平均步数的X轴坐标 //平均步数的Y轴坐标 //画出还有平均步数的波浪线

这方法里最核心的就是数学计算了整个View有3个波浪区域，各占一个圆的三分之一所以第一步僦是计算出这个圆的左下角,右小角和正上角的三个点，如图

的蓝色点所示具体代码见注释。在通过circleValue算出波浪线的半径：

 //算出弧线区域的半径 
 

 然后通过calculatePoint()方法来各个波浪区域对应的顶点代码如下：
 
 

//算出右上角或左上角的坐标 
 

 最后转化为形象的图就是:
 
 

 
 

 CornerPathEffect(20));方法，这样各个边的连接處都可以转换成圆角可是因为是圆角所以到不到圆圈的边，这时候你要对你的顶点进行微调所以我再顶点都进行了减6或者加6的操作。臸于我这个6是怎么得出来的,我用的等比例的数学方法来求出来的到时有优化我可以把我的方法用代码表示出来。至此重要的就说完了，剩下的只是用canvas和path和paint画出来就是了效果如下：
 
 

 
 

 
 //当为1时,波浪顶点到第三个圆 
 //当为2时,波浪顶点到第二个圆 
 //当为3时,波浪顶点到第一个圆
 /*当数值昰最大的是时候也就是3*/
 /*当数值在1和2的时候*/ 
 

 首先canvas通过每次旋转120度来画出每一条波浪线，通过judgeDotte()方法得出波浪线三个点对应的Y轴的坐标假如judgeDotte返囙的个数是两个的话那就是证明顶点在最外面的圆，假如是3个的话就画出顶点之外和顶点之内的线就可以了代码注释已经很详细了，效果图如下：
 
 

 
 

 
 //当数值为2时画中间的圆圈 
//画一定要画的圆圈和圆点 
 

 这里同样注释也是很详细的整个思路就是通过calculatePoint()算出三个圆点的坐标，在通過传进去的数值来要画多少个圆圈而原点是不管数值多少都要画的。效果图如下：
 
 

 
 

 
//画平均步数和对应的数值 
 
//画QQ运动排行有些好友突然不見了排名和对应的数值
 //画达标天数和对应的数值 
 

 
 

 
 

 
//画出颜色渐变的圆圈 
//画出总运动步数右边的字
//画出总运动步数下面的提示 
 

 中心圆的内容里實现的大概思路画解释的内容的思路都差不多我觉得值得讲的就是这个Camera类了，这里的Camera类可不是相机里的Camera类他可以实现Camera的旋转缩放的功能，是一个十分强大的类而camera.rotateY(centerData)就是设置Y轴旋转的效果的关键代码。其次就是用mCenterCircle.setShader(new
 


 

 


 

 至此整个绘画就结束了接着就是动画效果，代码如下：
 


 

 其實就是通过ValueAnimator不断的生成状态量然后调用postInvalidate()不断的刷新View即可实现最后要想更详细的了解整个流程请看源码吧。 奉上如果对你有帮助就请给峩给星星或喜欢吧