前言#

工作多年，有史以来，第一次尝试在简书和github上开始分享之旅，惭愧之际。为什么选择简书，简洁，大方，得体。为什么首先选择自定义控件这个知识点，因为是我薄弱地方，所以我要重新认识，再加深理解。本人用的小米手机，所以就直接在小米手机上面寻找模仿的UI界面咯。

效果预览#

为了做这个gif动画，还是花了点心思，第一次弄。
第一步：先用手机录屏软件或者其他方式（自行搜索）先录制好mp4文件。
第二步：我用的是mac，推荐在AppStore下载VideoGIF Free这款软件制作，将mp4转成gif。

运行效果动态图

实现思路#

1、自定义view，首先利用canvas.drawArc不断的画圆弧，通过改变角度值达到从0到有的圆圈。
2、等角度达到一定值的时候，开始显示绘制正确完成的钩子。
3、开始绘制圆弧的时候，一并绘制周围的三角形，这个是随机生成，然后慢慢想最新靠拢。
4、整体绘制完成，显示提示文字。

1、画圆弧，并且不断加角度，让其最后绘制成一个圆。通过postInvalidateDelayed方法让圆弧不停的自我绘制，直到角度的值等于360°算绘制完毕。绘制完毕后，回调调用完成的接口。

    /**
     * 画圆弧
     */
    private void drawArc(Canvas canvas) {
        RectF rectF = new RectF();
        rectF.left = (getWidth() - arcWidth) / 2;
        rectF.top = (getHeight() - arcWidth) / 2;
        rectF.right = (getWidth() - arcWidth) / 2 + arcWidth;
        rectF.bottom = (getHeight() - arcWidth) / 2 + arcWidth;
        if (isDraw) {
            //未运行的的时候可以执行一次
            if (!isDrawing) {
                startBezierAnimotion();
            }

            isDrawing = true;
            canvas.drawArc(rectF, -90, arcAngle, false, mArcPaint);
            arcAngle += ARC_CREATE_ANGLE;

            if (arcAngle > 330) {
                drawRight(canvas);
            }

            postInvalidateDelayed(ARC_CREATE_TIME); //每隔一段时间开始绘制

            if (arcAngle >= 360) {
                isDraw = false;
            }

            drawTriAngle(canvas);
        } else {
            canvas.drawArc(rectF, -90, 360, false, mArcPaint);
            drawRight(canvas);
            isDrawing = false;
            if(listener != null) {
                listener.onAnimotionFinished();
            }
        }
    }

2、绘制钩子。当角度大于330°的时候，绘制钩子，钩子是根据圆弧的相对角度绘制而成的，利用path就可以做到。

    /**
     * 画正确的钩子
     *
     * @param canvas\
     */
    private void drawRight(Canvas canvas) {
        Path path = new Path();
        path.moveTo((getWidth() - arcWidth) / 2 + arcWidth / 4 + arcWidth / 16, (getHeight() - arcWidth) / 2 + arcWidth / 2);
        path.lineTo((getWidth() - arcWidth) / 2 + arcWidth / 4 + arcWidth / 8 + arcWidth / 16, (getHeight() - arcWidth) / 2 + (arcWidth / 4) * 3 - arcWidth / 8);
        path.lineTo((getWidth() - arcWidth) / 2 + arcWidth / 2 + arcWidth / 4 - arcWidth / 8 + arcWidth / 16, (getHeight() - arcWidth) / 2 + arcWidth / 4 + arcWidth / 8);
        canvas.drawPath(path, mRightPaint);
    }

3、圆弧转动的动的时候，周围生成若干个随机的三角形，这里我生成的是十个。三角形的所处的位置以及运动的轨迹由ValueAnimator动画生成。

    /**
     * 坐标点的位置，用户传递到属性动画当中
     */
    public class Point implements Serializable {
        public int x;
        public int y;

        public Point(int x, int y) {
            this.x = x;
            this.y = y;
        }

        public Point(Point src) {
            this.x = src.x;
            this.y = src.y;
        }

        public void set(int x, int y) {
            this.x = x;
            this.y = y;
        }
    }

    /**
     * 用于属性动画的回掉，根据返回的参数t来计算相关数据，t是从0~1变化。
     */
    public class BezierEvaluators implements TypeEvaluator<List<Point>> {

        private Point controllPoint;

        public BezierEvaluators(Point controllPoint) {
            this.controllPoint = controllPoint;
        }

        @Override
        public List<Point> evaluate(float t, List<Point> startValue, List<Point> endValue) {
            List<Point> list = new ArrayList<>();
            if (startValue.size() > 0 && endValue.size() > 0 && startValue.size() == endValue.size()) {
                for (int i = 0; i < startValue.size(); i++) {
                    //增加角度，让每个碎片三角形所处位置不一样
                    double sum = t + ((double) i / (double) 10);
                    if (sum >= 1) {
                        sum = sum - 1;
                    }
                    // 200 - (80 * t) 旋转越来越靠近圆
                    double x = controllPoint.x + (arcWidth / 2 + 200 - (80 * t)) * Math.cos(360 * sum * Math.PI / 180);
                    double y = controllPoint.y + (arcWidth / 2 + 200 - (80 * t)) * Math.sin(360 * sum * Math.PI / 180);
                    list.add(new Point((int) x, (int) y));
                }
            }
            return list;
        }
    }

    /**
     * 开始运动三角形
     */
    private void startBezierAnimotion() {
        if(isShowTriAngle == 1) {
            float circleX = (getWidth() - arcWidth) / 2 + arcWidth / 2;
            float circleY = (getHeight() - arcWidth) / 2 + arcWidth / 2;
            float x = ((getWidth() - arcWidth) / 2) / 2;
            Point controllPoint = new Point((int) circleX, (int) circleY);
            BezierEvaluators bezierEvaluator = new BezierEvaluators(controllPoint);
            //初始化开始坐标和结束坐标，在这里这个坐标并使用，只是为了能够得属性动画产生的变化值
            List<Point> startPoint = new ArrayList<>();
            List<Point> endPoint = new ArrayList<>();
            triAngle.clear();
            for (int i = 0; i < 10; i++) {
                startPoint.add(new Point(i, i));    //随意生成
                endPoint.add(new Point(i, i));      //随意生成

                //半径之外的范围 150 - 200之间
                double r = Math.random() * 30 + 20;
                triAngle.add((int) r);
            }
            ValueAnimator anim = ValueAnimator.ofObject(bezierEvaluator, startPoint, endPoint);
            anim.addUpdateListener(this);
            anim.setDuration(1500);
            anim.setInterpolator(new AccelerateDecelerateInterpolator());   //动画运动的速率，开始和结束慢，中间快，还有其他方式可设置。
            anim.start();
        }
    }

    /**
     * 回调过来的数据，开始更新，画三角形，这样子就形成了三角形围着圆弧转，并且越靠越近，最后消失。
     */
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        List<Point> valuePoints = (List<Point>) animation.getAnimatedValue();
        this.valuePoints = valuePoints;
        invalidate();
    }

4、动画执行完毕之后，通知接口已完成。

            canvas.drawArc(rectF, -90, 360, false, mArcPaint);
            drawRight(canvas);
            isDrawing = false;
            if(listener != null) {
                listener.onAnimotionFinished();
            }

结语#

到这里，大致流程就介绍完了。有什么不足的，欢迎指出。
欢迎在下方评论和喜欢，谢谢，转载请说明出处。

欢迎在Github上Star，详细的DEMO地址在https://github.com/yangxixi88/ProcessSuccessView