Andoird自定义View贝塞尔曲线入门用法：仿天猫LOGO加载动画

一、前言

打开天猫随便搜索一下，就会出现一个天猫LOGO的加载图

模拟效果：

gif图的效果不是很好，手机上运行效果比较好。

二、实现思路

先推荐两篇文章了解一下贝塞尔曲线：
http://www.gcssloop.com/customview/Path_Bezier
http://blog.csdn.net/harvic880925/article/details/50995587

可以让美工做一个图，然后转换成SVG，使用一些svg -> path的库转换成Path，再使用动画展示出来。不过这LOGO看上去不是很复杂，就自己绘制，弧度都是使用贝塞尔曲线绘制。
1. 知道photoshop中的钢笔工具是用贝塞尔曲线实现的，那首先用PS来简单构建一个模型，确定控制点坐标。
2. 用path.lineTo、quadTo、cubicTo等方法绘制路径。
3. 用PathMeasure类来截取长度，达到闭合图形的缺口目的。
4. ValueAnimator属性动画，动起来。

三、开始绘制

1.用PS画出草图

经过调整，得到以下：

以一个栅格（cell）为基本单位，中心点表示整个图形的中央位置，大概得出整个图形：
长度：12 * cell，高度：8 * cell，为了方便计算和绘制图形，以黑色圆点为坐标原点。
红色原点：坐标点
黄色原点：贝塞尔曲线控制点
p1（cell， 0），p2（5 * cell， -2 * cell），p3（6 * cell， 0），p4（6 * cell，5 * cell），p5（5 * cell， 6 * cell）
c1（3 * cell， 0），c2（4 * cell， -2 * cell），c3（6 * cell， -2 * cell），c4（6 * cell，6 * cell）
左侧和右侧是镜像关系，所以左侧坐标只需要将右侧x坐标取反即可。

2.代码实现

private void initEarsPath() {

        p1.x = cellSize ;
        p1.y = 0;
        p2.x = 5 * cellSize ;
        p2.y = -2 * cellSize;
        p3.x = 6 * cellSize;
        p3.y = 0;
        p4.x = 6 * cellSize ;
        p4.y = 5 * cellSize ;
        p5.x = 5 * cellSize ;
        p5.y = 6 * cellSize ;
        c1.x = 3 * p1.x ;
        c1.y = 0;
        c2.x = 4 *cellSize ;
        c2.y = -2 * cellSize ;
        c3.x = 6 * cellSize;
        c3.y = -2 * cellSize ;
        c4.x = 6 * cellSize ;
        c4.y = 6 * cellSize ;
        mPath.moveTo(p1.x, p1.y);
        //三阶
        mPath.cubicTo(c1.x, c1.y, c2.x,c2.y, p2.x, p2.y);
        //二阶
        mPath.quadTo(c3.x, c3.y, p3.x, p3.y);
        //右侧直线
        mPath.lineTo(p4.x, p4.y);
        //右下角圆弧
        mPath.quadTo(c4.x, c4.y, p5.x, p5.y);

        //取反
        p1.x = -p1.x;
        p2.x = -p2.x;
        p3.x = -p3.x;
        p4.x = -p4.x;
        p5.x = -p5.x;
        c1.x = -c1.x;
        c2.x = -c2.x;
        c3.x = -c3.x;
        c4.x = -c4.x;

        mPath.lineTo(p5.x, p5.y);
        //左下角圆弧
        mPath.quadTo(c4.x, c4.y, p4.x, p4.y);
        //左侧直线
        mPath.lineTo(p3.x, p3.y);
        //二阶
        mPath.quadTo(c3.x, c3.y, p2.x, p2.y);
        //三阶
        mPath.cubicTo(c2.x, c2.y, c1.x,c1.y, p1.x, p1.y);

        mPath.close();

        mMeasure.setPath(mPath, false);
        mPathLength = mMeasure.getLength();
    }

3.缺口实现

将图形展开成一条直线好分析，开始点和终点其实是一个点，图中绿色表示缺口距离，A点加上间距等于B点，有两种情况。
1.A和B正好在线段的中间
2.B经过了终点（始点）而A还没经过终点
根据这两种情况从原path使用PathMeasure截取出红色部分的内容存放在新的path中，再将新的Path绘制出来就实现缺口。

4.动画

private void initListener() {

        mAnimator = ValueAnimator.ofFloat(0.0f, 1.0f);
        mAnimator.setDuration(2000);//一段path的时间
        mAnimator.setRepeatCount(ValueAnimator.INFINITE);//无限循环
        //加入线性插值器 计算返回的值均匀递增 如若不用 会出现不连续现象
        mAnimator.setInterpolator(new LinearInterpolator());

        mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mAnimatorValue = (float) animation.getAnimatedValue();
                invalidate();
            }
        });

        mAnimator.start();
    }

5.绘制

@Override
@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(mViewWidth / 2, mViewHeight / 2 - 2 * cellSize);

        mDstPath.reset();
        //判断哪种缺口情况
        if (mPathLength * mAnimatorValue + distance <= mPathLength) {
            mMeasure.getSegment(0, mPathLength * mAnimatorValue, mDstPath, true);
            mMeasure.getSegment(mPathLength * mAnimatorValue + distance, mPathLength, mDstPath, true);
        } else {
            mMeasure.getSegment(distance - mPathLength * (1 - mAnimatorValue), mPathLength * mAnimatorValue, mDstPath, true);
        }

        canvas.drawPath(mDstPath, mPaint);
    }

三、总结

本次主要熟悉使用贝塞尔曲线来绘制路径，通过PS来辅助完成坐标点和控制点的选取，以及跟Path相关的类做出动画效果。

源码