前言

为什么起了这么个标题呢，因为我们接下来要做的动画运用到了多个知识点，如果自己实操几遍，基本android中绘图方面的知识点就掌握的差不多了

先看下动画图

首先让我们来看一下动画效果 ,原文地址

有教程了为什么还要专门再写一篇？因为小编脑子比较笨，理解不了原文写的啥意思，就写了另一种实现方法，本文通俗易懂，不懂留言即可

分析动画

• 1、加载过程，画蓝色圆环，当进度为100%时，圆环完成
• 2、从右侧抛出蓝色小方块，小方块沿着曲线到达圆环正上方
• 3、蓝色小方块下落，下落过程中，逐渐变长，当方块与圆圈接触时，进入圆环的部分变粗，同时圆环逐渐被挤压，变成椭圆形
• 4、方块底端到达圆环中心后，发出三个分叉向圆周延伸，同时椭圆被撑大，逐渐恢复回圆形
• 5、圆环变绿色，画出绿色勾√

仔细分析一下第一部分，则是canvas.drawArc就可以，随着进度改变初始位置，和弧长
第二部分也不难没和第一部分基本一样，只不过圆变大了
第三部分算是最难的部分了，先路径，判断

第一部分、随进度增加圆弧增加，最后成圆

上面我们分析也提到，实现并不难，这里我们用handle的定时原理来代替进度

MainActivity

    public void button(View view){
        switch (view.getId()){
            case R.id.btn2:
                //定时器原理
                final Handler handler=new Handler();
                i=0;
                handler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        if (i<360){
                        i+=10;
                        mMyView.setProgress(i);
                        handler.postDelayed(this,100);
                      }else {
                            mMyView.finishSuccess();
                        }
                    }
                },1000);
        }
    }

然后在我们的自定义MyView中，设置setProgress参数,收到进度值，刷新页面，onDrow更新进度值，绘制圆弧随进度改变

    /**
     * 开始完成动画
     */
    private void start(){
        post(new Runnable() {
            @Override
            public void run() {
                mRotateAnimation.start();
            }
        });
    }

    public void setProgress(int progress) {
        status = 0;
        this.progress = progress;
        postInvalidate();
    }

    /**
     * loading成功后调用
     */
    public void finishSuccess() {
        setProgress(maxProgress);
        this.isSuccess = true;
        status = 1;
        start();
    }

    /**
     * loading失败后调用
     */
    public void finishFail() {
        setProgress(maxProgress);
        this.isSuccess = false;
        status = 1;
        start();
    }
}

重写onSizeChanged

protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        mWidth = w;
        mHeight = h;

        //居中设置 圆的半径  小编这里的半径为130
        radius = Math.min(getMeasuredWidth(),getMeasuredHeight())/4-strokeWidth;

        //居中绘圆  小编这里的圆为150，150，410，410
        mRectF.set(new RectF(radius+strokeWidth, radius+strokeWidth, 3 * radius+strokeWidth, 3 * radius+strokeWidth));
}

重写onDraw

圆弧起始状态

圆弧最终状态

可以看到，首先圆弧有一定的起始角度，我们知道，在Android坐标系中，0度其实是指水平向右开始的 也就是起点的起始角度，其实是-90度，终点的起始角度，其实-150度

而整个过程中， 起点:-90度，逆时针旋转270度，最后回到0度位置 终点:-150度，与起点相差60度，最后相差360度，与起点重合

所以当progress=1，也就是动画完成时，起点会减去270度，那么对应每个progress 起点的位置应该是

-90-270*progress

当progress=1,终点和起点相差360度，而一开始就相差60度,所以整个过程就是多相差了300度，那么对应每个progress，终点和起点应该相差

-(60+precent*300)

根据上面的结论，我们得到圆弧的具体绘制方式如下：

@Override
    protected void onDraw(Canvas canvas) {
        switch (status){
            case 0:
                //设置一下maxProgress最大为360（private int maxProgress=360；），这里设置多少无所谓，设置360，方便理解
                float precent = 1.0f*progress/maxProgress;
                canvas.drawArc(mRectF, startAngle-270*precent, -(60 + precent*300), false, circlePaint);
                break;

当然我们要在初始化的时候定义一下paint

circlePaint.setAntiAlias(true);
circlePaint.setColor(Color.argb(255, 48, 63, 159));
circlePaint.setStrokeWidth(strokeWidth);
circlePaint.setStyle(Paint.Style.STROKE);

第一部分完成，看一下效果图

圆弧运动状态

第二部分、抛出小方块

首先构思如何绘出小方块，其实方法有多种，可以用canvas的drawLine，也可以drawArc，小编这里用的是drawArc，有开始角度，和横扫角度，这样会很方便的控制移动，而用drawLine会很麻烦，原文用的drawLine，反正我是没有看懂，如果你看懂了，可以留言教教我

先看一张小编用软件绘制的图，我们可以看出深蓝色的圆为小圆，红色的为大圆（没画完整），那么大圆的弧度右上部分就是小方块的运动轨迹

第一种方法

１.假设运动轨迹是某个圆的一段弧，那么根据勾股定理有如下方程

(X+R)^2 + （2R）^2 = (X+2R)^2

２.解得X=R/2(其实也很容易解，就是勾三股四玄五) ,小编这里的R为130（上面有写到），我们只需要知道圆心角是多少度，就可以设置运动轨迹了

弦长为(R)^2 + （2R）^2 =L^2,解L=根5 * R

３.已知弦长L和半径R求大圆半径:

sinA=(1/2)*L/R=L/(2R),圆心角=2asin(L/(2R)）
圆心角*180/π=度数   即2asin(L/(2R)）*180/π=度数

Android中这样表示

(2*Math.asin(290.68/650))*180/Math.PI

第二种方法

这也是最好用的方法，反正原文作者的那种我是看不懂

如果勾股定理你已经忘得一干二净了，那么你也可以直接运用Android的度数公式

那么如何计算任意两点间直线的倾斜角呢?只需要将两点x,y坐标分别相减得到一个新的点(x2-x1,y2-y1)。然后利用它求出角度即可——Math.atan2(y2-y1,x2-x1)。

Math.atan2(y2-y1,x2-x1) * 180.0 / Math.PI

        //抛出动画
        System.out.println(endAngle);
        mRotateAnimation = ValueAnimator.ofFloat(0f, (float)(Math.atan2(-260, 195) * 180.0 / Math.PI));
        mRotateAnimation.setDuration(1000);
        mRotateAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
        mRotateAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                curSweepAngle = (float) animation.getAnimatedValue();
                invalidate();
            }
        });

      ／／设置监听
        mRotateAnimation.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                curSweepAngle = 0;
                if (isSuccess) {
                    status = 2;
                    mDownAnimation.start();
                } else {
                    status = 5;
                    mCommaAnimation.start();
                }
            }
        });

我们的小方块就这样完成了

方块下落，压缩圆环

可以说下落过程，是整个动画中最复杂的过程了，包括方块下落，圆环挤压，方块变粗三个过程，整个过程，从方块下落开始，到方块底部到底圆心