View详解（5）

上篇中简单介绍了Path#moveTo(),Path#lineTo(),Path#addArc(),不知道勤劳的猿们学习的怎么样了。接下来我们还是以Path为主进行介绍，首先再回头看下上次最后说要实现的效果吧：

废话不多说，动手撸起。

形成过程

仔细观察上图，不难发现该动画起于三角形，止于类圆，每次动态添加一个顶点，附图说明如下：

相信有上图，大家理解起来就很easy了，原来这个图形的形成是圆的内接多边形实现的，我们只需要绘制多边形Path即可。

Path

首先回忆下圆心为（a,b）的圆的极坐标方程，角度为M的圆上点的坐标值为：

x = a + R * cos(M)
y = b + R * sin(M)

进而圆上点的Path坐标为：

X = mWidth / 2 + (float) (mRadius * Math.cos(M))
Y = mHeight / 2 + (float) (mRadius * Math.sin(0.0))

其中

M = （2.0 * Math.PI / mTmpPointCount ）* I ( I 取 1,2,3…)

那么一个顶点为mTmpPointCount的圆内接多边形Path为：

    Path path = new Path();    //计算每个点之间的间隔角度    double angle = 2.0 * Math.PI / mTmpPointCount;    //移动到路径起点    path.moveTo(        mWidth / 2 + (float) (mRadius * Math.cos(0.0)),        mHeight / 2 + (float) (mRadius * Math.sin(0.0)));    //依次连接多边形顶点    for (int i = 1; i < mTmpPointCount + 1; i++) {      path.lineTo(          mWidth / 2 + (float) (mRadius * Math.cos(angle * i)),          mHeight / 2 + (float) (mRadius * Math.sin(angle * i)));    }    //闭合Path    path.close();复制代码

动画

动画相对而言就更简单了，使用ValueAnimator控制多边形顶点个数从3增长到理想个数就好，代码如下：

  public void startAnimation(int count) {    mValueAnimator = ValueAnimator.ofInt(3, count);    mValueAnimator.addUpdateListener(new AnimatorUpdateListener() {      @Override      public void onAnimationUpdate(ValueAnimator valueAnimator) {        mTmpPointCount = (int) valueAnimator.getAnimatedValue();        postInvalidate();      }    });    mValueAnimator.setDuration(5000);    mValueAnimator.setRepeatCount(-1);    mValueAnimator.setRepeatMode(ValueAnimator.RESTART);    mValueAnimator.start();  }复制代码

下期预告

有兴趣的小伙伴们可以尝试自己实现下,老毛病，后台切图甩起来。

转载于:https://juejin.im/post/5bc85168e51d456f087be80b